<template>
    <div>
        <el-card class="!border-none mb-4" shadow="never">
            <el-form class="mb-[-16px]" :model="queryParams" inline>
                <el-form-item label="商品名称" prop="store_name">
                    <el-input
                        class="w-[280px]"
                        v-model="queryParams.store_name"
                        @keydown.enter="resetPage"
                        clearable
                        placeholder="请输入商品名称"
                    />
                </el-form-item>
                <el-form-item label="订单id" prop="order_id">
                    <el-input
                        class="w-[280px]"
                        v-model="queryParams.order_id"
                        @keydown.enter="resetPage"
                        clearable
                        placeholder="请输入订单id"
                    />
                </el-form-item>
                <el-form-item label="采购人员" prop="buyer_id">
                    <div class="flex items-center mr-4">
                        <el-select
                            v-model="queryParams.buyer_id"
                            placeholder="选择选择采购人员"
                            style="width: 240px"
                            @change="resetPage"
                        >
                            <el-option
                                v-for="item in delivery_list"
                                :key="item.uid"
                                :label="item.nickname"
                                :value="item.uid"
                            />
                        </el-select>
                    </div>
                </el-form-item>
                <el-form-item label="采购状态">
                    <el-select
                        v-model="queryParams.buyer_confirm"
                        placeholder="请选择采购状态"
                        style="width: 240px"
                    >
                        <el-option label="采购完成" value="1" />
                        <el-option label="未完成" value="0" />
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="resetPage">查询</el-button>
                    <el-button @click="resetParams">重置</el-button>
                </el-form-item>
            </el-form>
        </el-card>
        <el-card class="!border-none" v-loading="pager.loading" shadow="never">
            <el-button type="primary" @click="batchProcureShow = true">
                批量采购信息设置
            </el-button>
            <div class="mt-4">
                <el-table :data="pager.lists">
                    <el-table-column type="selection" width="55" />
                    <el-table-column label="id" prop="id" show-overflow-tooltip />
                    <el-table-column label="订单id" prop="order_id" show-overflow-tooltip />
                    <el-table-column label="商品ID" prop="product_id" show-overflow-tooltip />
                    <el-table-column label="商品图片" prop="image" min-width="80">
                        <template #default="{ row }">
                            <el-image
                                style="width: 50px; height: 50px"
                                :src="row.image"
                                :preview-teleported="true"
                            />
                        </template>
                    </el-table-column>
                    <el-table-column label="商品名称" prop="store_name" show-overflow-tooltip />
                    <el-table-column
                        label="分类"
                        prop="cate_name"
                        min-width="120"
                        show-overflow-tooltip
                    />
                    <el-table-column label="单位" prop="unit_name" show-overflow-tooltip />

                    <el-table-column label="供应商" prop="supplier_name" show-overflow-tooltip />
                    <el-table-column label="需求数量" prop="need_num" show-overflow-tooltip />

                    <el-table-column label="采购数量" prop="buyer_nums" show-overflow-tooltip />
                    <el-table-column label="采购价" prop="price" show-overflow-tooltip />
                    <el-table-column label="采购总价" prop="total_price" show-overflow-tooltip />
                    <el-table-column label="采购人员" prop="buyer_name" show-overflow-tooltip />

                    <el-table-column
                        label="采购状态"
                        prop="buyer_confirm_name"
                        show-overflow-tooltip
                    />
                    <el-table-column
                        label="是否入库"
                        prop="is_storage_name"
                        show-overflow-tooltip
                    />
                    <el-table-column label="操作" fixed="right">
                        <template #default="{ row }">
                            <el-button type="primary" link @click="procureClick(row)"
                                >设置采购信息</el-button
                            >
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div class="flex mt-4 justify-end">
                <pagination v-model="pager" @change="getLists" />
            </div>
        </el-card>
    </div>
    <el-dialog v-model="procureShow" title="采购信息设置" width="600">
        <el-form ref="formRef" :model="formData" label-width="90px">
            <el-form-item label="供应商">
                <el-select
                    v-model="formData.supplier_id"
                    filterable
                    remote
                    reserve-keyword
                    placeholder="输入供应商名称搜索"
                    remote-show-suffix
                    :remote-method="remoteMethodSupplier"
                    :loading="supplierLoading"
                    style="width: 240px"
                >
                    <el-option
                        v-for="item in supplierList"
                        :key="item.id"
                        :label="item.mer_name"
                        :value="item.id"
                    />
                </el-select>
            </el-form-item>
            <el-form-item label="数量" prop="buyer_nums">
                <el-input
                    v-model="formData.buyer_nums"
                    clearable
                    placeholder="请输入采购数量"
                    :readonly="false"
                    @change="compute"
                />
            </el-form-item>
            <el-form-item label="采购价" prop="purchase">
                <el-input
                    v-model="formData.purchase"
                    clearable
                    placeholder="请输入采购价"
                    :readonly="false"
                    @change="compute"
                />
            </el-form-item>
            <el-form-item label="采购总价" prop="total_price">
                <el-input
                    v-model="formData.total_price"
                    clearable
                    placeholder="请输入采购总价"
                    :readonly="false"
                />
            </el-form-item>
            <el-form-item label="付款方式" prop="pay_type">
                <el-radio-group v-model="formData.pay_type">
                    <el-radio :label="1">赊账</el-radio>
                    <el-radio :label="2">现金</el-radio>
                </el-radio-group>
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="procureShow = false">取消</el-button>
                <el-button type="primary" @click="setProcureInfo"> 确认 </el-button>
            </div>
        </template>
    </el-dialog>

    <el-dialog v-model="batchProcureShow" title="批量采购信息设置" width="1200">
        <el-form ref="formRef" :model="formBatchData">
            <el-form-item label="供应商">
                <el-select
                    v-model="formBatchData.supplier_id"
                    filterable
                    remote
                    reserve-keyword
                    placeholder="输入供应商名称搜索"
                    remote-show-suffix
                    :remote-method="remoteMethodSupplier"
                    :loading="supplierLoading"
                    style="width: 240px"
                >
                    <el-option
                        v-for="item in supplierList"
                        :key="item.id"
                        :label="item.mer_name"
                        :value="item.id"
                    />
                </el-select>
            </el-form-item>
            <el-form-item label="商品" prop="store_id">
                <div class="flex-1 w-full">
                    <div class="mb-2">
                        <el-button type="primary" @click="showProduct = true">添加商品</el-button>
                    </div>
                    <el-table :data="productList">
                        <el-table-column label="id" prop="id" show-overflow-tooltip />
                        <el-table-column label="商品ID" prop="product_id" show-overflow-tooltip />
                        <el-table-column label="商品图片" prop="image" min-width="80">
                            <template #default="{ row }">
                                <el-image
                                    style="width: 50px; height: 50px"
                                    :src="row.image"
                                    :preview-teleported="true"
                                />
                            </template>
                        </el-table-column>
                        <el-table-column label="商品名称" prop="store_name" show-overflow-tooltip />

                        <el-table-column label="数量">
                            <template #default="{ row }">
                                <el-input v-model="row.buyer_nums" @change="handleNmus(row)" />
                            </template>
                        </el-table-column>
                        <el-table-column label="采购价">
                            <template #default="{ row }">
                                <el-input v-model="row.purchase" @change="handleNmus(row)" />
                            </template>
                        </el-table-column>
                        <el-table-column label="采购总价">
                            <template #default="{ row }">
                                <el-input v-model="row.total_price" />
                            </template>
                        </el-table-column>
                        <el-table-column label="支付类型" width="180">
                            <template #default="{ row }">
                                <el-radio-group v-model="row.pay_type">
                                    <el-radio :label="1">赊账</el-radio>
                                    <el-radio :label="2">现金</el-radio>
                                </el-radio-group>
                            </template>
                        </el-table-column>
                        <el-table-column label="操作" width="120" fixed="right">
                            <template #default="{ row }">
                                <el-button type="danger" link @click="handleDeleteProdut(row.id)">
                                    删除
                                </el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="batchProcureShow = false">取消</el-button>
                <el-button type="primary" @click="setBatchProcureInfo"> 确认 </el-button>
            </div>
        </template>
    </el-dialog>
    <el-dialog v-model="showProduct" title="选择商品" width="70%">
        <product-offer-pop @onBindStore="onBindProduct"></product-offer-pop>
    </el-dialog>
</template>

<script lang="ts" setup name="storeProductLists">
import { usePaging } from '@/hooks/usePaging'
import {
    apiPurchaseProductOfferLists,
    apiPurchaseProductOfferSetProcureInfo,
    apiPurchaseProductOfferSetBatchProcureInfo
} from '@/api/purchase_product_offer'
import { apiSupplierLists } from '@/api/supplier'
import { apiDeliveryServiceLists } from '@/api/delivery_service'

const procureShow = ref(false)
const batchProcureShow = ref(false)

// 查询条件
const queryParams = reactive({
    buyer_id: '',
    order_id: '',
    store_name: '',
    buyer_confirm: ''
})
const formData = ref({
    id: '',
    bhoid: 0,
    supplier_id: '',
    purchase: 0,
    outbound_price: 0,
    total_price: 0,
    buyer_nums: 0,
    pay_type: 1
})
const formBatchData = ref({
    supplier_id: ''
})
const compute = () => {
    formData.value.total_price = (formData.value.buyer_nums * formData.value.purchase).toFixed(2)
}
const procureClick = (data: any) => {
    formData.value.id = data.id
    formData.value.bhoid = data.order_id
    formData.value.buyer_nums = data.need_num
    formData.value.purchase = data.price
    formData.value.total_price = data.total_price

    procureShow.value = true
}

/**
 * 采购信息设置
 */
const setProcureInfo = () => {
    apiPurchaseProductOfferSetProcureInfo(formData.value).then((res) => {
        procureShow.value = false
        getLists()
    })
}
const setBatchProcureInfo = () => {
    const product_arr = productList.value.map((item: any) => {
        return {
            id: item.id,
            buyer_nums: item.buyer_nums,
            purchase: item.purchase,
            total_price: item.total_price,
            pay_type: item.pay_type
        }
    })
    apiPurchaseProductOfferSetBatchProcureInfo({
        supplier_id: formBatchData.value.supplier_id,
        product_arr
    }).then((res) => {
        batchProcureShow.value = false
        getLists()
    })
}
const supplierLoading = ref(false)
const supplierList = ref([])
const remoteMethodSupplier = (e = '') => {
    supplierLoading.value = true
    apiSupplierLists({ mer_name: e })
        .then((res) => {
            supplierList.value = res.lists
            setTimeout(() => {
                supplierLoading.value = false
            }, 300)
        })
        .catch((err) => {
            setTimeout(() => {
                supplierLoading.value = false
            }, 300)
        })
}
const showProduct = ref(false) // 选择商品列表是否显示
// 商品列表
const productList = ref([])
// 删除已有商品
const handleDeleteProdut = (id: number) => {
    productList.value = productList.value.filter((item: any) => item.id !== id)
}
// 选择商品
const onBindProduct = (e: any[]) => {
    e.forEach((item: any) => {
        if (!productList.value.find((t: any) => t.id == item.id)) {
            productList.value.push(item)
        }
    })
    showProduct.value = false
}

function handleNmus(row) {
    if (row.buyer_nums > 0 && row.purchase > 0) {
        row.total_price = (row.buyer_nums * row.purchase).toFixed(2)
    }
}

const delivery_list = ref([])
const DeliveryService = () => {
    apiDeliveryServiceLists({ type: 3 }).then((res) => {
        delivery_list.value = res.lists
    })
}
// 分页相关

const { pager, getLists, resetParams, resetPage } = usePaging({
    fetchFun: apiPurchaseProductOfferLists,
    params: queryParams
})

onMounted(() => {
    getLists()
    DeliveryService()
})
</script>
