<template>
    <div>
        <el-form class="inline-block" :model="queryParams" inline>
            <el-form-item label="名称" prop="store_name">
                <el-input
                    class="w-[280px]"
                    v-model="queryParams.store_name"
                    clearable
                    placeholder="请输入名称"
                />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="resetPage">查询</el-button>
                <export-data
                    class="ml-2.5"
                    :fetch-fun="apiPurchaseProductOfferLists"
                    :params="queryParams"
                    :page-size="pager.size"
                />
            </el-form-item>
        </el-form>
        <el-button type="primary" @click="no_storage(0)" class="mb-4"> 未入库 </el-button>
        <el-button type="primary" @click="no_storage(1)" class="mb-4"> 已入库 </el-button>
        <!-- <el-button
            type="primary"
            @click="OclickDialogBuyer"
            v-perms="['beforehand_order.beforehand_order/oneClickStorage']"
            class="mb-4"
        >
            一键入库
        </el-button> -->
        <el-table :data="pager.lists" border style="width: 100%; margin-top: 10px">
            <el-table-column prop="id" label="ID" width="60" />
            <el-table-column label="商品图片" prop="image" width="120">
                <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="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="pay_type_name" show-overflow-tooltip />
            <el-table-column label="是否入库" prop="is_storage_name" show-overflow-tooltip />
            <el-table-column label="来源订单信息" prop="unit_name" show-overflow-tooltip>
                <template #default="{ row }">
                    <div v-for="item in row.source_order_info">
                        <div>订单id：{{ item.source_order_id }}</div>
                        <div>数量：{{ item.need_num }}</div>
                        <div>订单备注：{{ item.mark }}</div>
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="操作" fixed="right" width="180">
                <template #default="{ row }">
                    <el-button
                        v-if="row.is_storage == 0"
                        type="primary"
                        link
                        @click="procureClick(row)"
                        >采购设置</el-button
                    >
                    <el-button
                        v-if="row.is_storage == 0"
                        type="primary"
                        link
                        v-perms="['beforehand_order.beforehand_order/oneClickStorage']"
                        @click="storeroomClick(row)"
                        >分拣入库</el-button
                    >
                    <!-- <el-button
                        type="primary"
                        link
                        @click="productOfferClick(row)"
                        v-perms="['purchase_product_offer.purchase_product_offer/warehouse']"
                        >修改入库</el-button
                    > -->
                    <el-button
                        type="danger"
                        link
                        @click="handleDelete(row.id)"
                        v-perms="['purchase_product_offer.purchase_product_offer/delete']"
                        >删除</el-button
                    >
                </template>
            </el-table-column>
        </el-table>
        <!-- <div class="flex mt-4 justify-end">
            <pagination
                v-if="pager.lists"
                v-model="pager"
                @change="getLists"
            />
        </div> -->
    </div>
    <el-dialog v-model="dialogBuyer" title="入库设置" width="600">
        <el-form ref="formRef" :model="one_click_storage" label-width="90px">
            <el-form-item label="仓库">
                <el-select
                    v-model="one_click_storage.warehouse_id"
                    placeholder="请选择仓库"
                    size="large"
                    style="width: 240px"
                >
                    <el-option
                        v-for="item in warehouse_list"
                        :label="item.name"
                        :value="item.id"
                        :key="item.id"
                    />
                </el-select>
            </el-form-item>
            <el-form-item label="备注" prop="remark">
                <el-input
                    v-model="one_click_storage.remark"
                    clearable
                    placeholder="请输入备注"
                    :readonly="false"
                />
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="dialogBuyer = false">取消</el-button>
                <el-button type="primary" @click="oneClickStorage" :disabled="disableClick">
                    确认
                </el-button>
            </div>
        </template>
    </el-dialog>
    <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
                    reserve-keyword
                    placeholder="输入供应商名称搜索"
                    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_price">
                <el-input
                    v-model="formData.purchase_price"
                    clearable
                    placeholder="请输入采购价"
                    :readonly="false"
                />
            </el-form-item>
            <el-form-item label="采购净价" prop="purchase">
                <el-input
                    v-model="formData.purchase"
                    clearable
                    placeholder="请输入采购净价"
                    :readonly="false"
                    disabled
                />
            </el-form-item>                    @change="compute"
 -->
            <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-item label="包装" prop="package">
                <el-input v-model="formData.package" placeholder="请输入包装" />
            </el-form-item>
            <el-form-item label="规格" prop="store_info">
                <el-input v-model="formData.store_info" placeholder="请输入规格" />
            </el-form-item>
            <el-form-item label="型号" prop="marques">
                <el-input v-model="formData.marques" placeholder="请输入型号" />
            </el-form-item>
            <el-form-item label="售后" prop="after_sales">
                <el-input v-model="formData.after_sales" placeholder="请输入售后" />
            </el-form-item>
            <el-form-item label="生产日期" prop="manufacture">
                <el-date-picker
                    v-model="formData.manufacture"
                    type="date"
                    value-format="YYYY-MM-DD"
                    placeholder="请输入生产日期"
                />
            </el-form-item>
            <el-form-item label="保质期" prop="expiration_date">
                <el-date-picker
                    v-model="formData.expiration_date"
                    type="date"
                    value-format="YYYY-MM-DD"
                    placeholder="请输入保质期"
                />
            </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="storeroomShow" title="分拣设置" width="600">
        <el-form ref="formRef" :model="storeroom" label-width="90px">
            <el-form-item label="仓库">
                <el-select
                    v-model="storeroom.warehouse_id"
                    placeholder="请选择仓库"
                    size="large"
                    style="width: 240px"
                >
                    <el-option
                        v-for="item in warehouse_list"
                        :label="item.name"
                        :value="item.id"
                        :key="item.id"
                    />
                </el-select>
            </el-form-item>
            <el-form-item label="采购数量" prop="buyer_nums">
                <el-input v-model="storeroom.buyer_nums" readonly />
            </el-form-item>
            <el-form-item label="分拣数量" prop="warehouse_num">
                <el-input
                    v-model="storeroom.warehouse_num"
                    clearable
                    placeholder="请输入分拣数量"
                    :readonly="false"
                    @change="compute"
                />
            </el-form-item>
            <el-form-item label="备注" prop="mark">
                <el-input
                    v-model="storeroom.mark"
                    clearable
                    placeholder="请输入备注"
                    :readonly="false"
                />
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="storeroomShow = false">取消</el-button>
                <el-button type="primary" @click="putInStorage" :disabled="disableClick">
                    确认
                </el-button>
            </div>
        </template>
    </el-dialog>
    <el-dialog v-model="productOfferShow" title="入库设置" width="600">
        <el-form ref="formRef" :model="productOfferData" label-width="90px">
            <el-form-item label="采购数量" prop="buyer_nums">
                <el-input
                    v-model="productOfferData.buyer_nums"
                    clearable
                    placeholder="请输入采购数量"
                    :readonly="false"
                />
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="productOfferShow = false">取消</el-button>
                <el-button type="primary" @click="productOfferInfo"> 确认 </el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script lang="ts" setup name="subOrder">
import { usePaging } from '@/hooks/usePaging'
import {
    apiPurchaseProductOfferLists,
    apiPurchaseProductOfferSetProcureInfo,
    apiPurchaseProductOffersetStoreroomInfo,
    apiPurchaseProductOffersetStoreroomInfoTwo,
    apiPurchaseProductOfferDelete
} from '@/api/purchase_product_offer'
import {
    apiBeforehandOrderCartInfoOneClickStorage,
    apiBeforehandOrderCartInfoPutInStorage
} from '@/api/beforehand_order_cart_info'
import { apiWarehouseLists } from '@/api/warehouse'
import { apiSupplierLists } from '@/api/supplier'
import { useDictData } from '@/hooks/useDictOptions'
import feedback from '@/utils/feedback'

const order_id = ref({ id: 0 })
const outbound_lv = ref('')
const dialogBuyer = ref(false)
const procureShow = ref(false)
const storeroomShow = ref(false)
const productOfferShow = ref(false)
const warehouse_list = ref([])
const disableClick = ref(false)

const one_click_storage = ref({
    bhoid: order_id.value.id,
    warehouse_id: '',
    remark: ''
})
const formData = ref({
    id: '',
    bhoid: order_id.value.id,
    supplier_id: '',
    purchase: 0,
    purchase_price: 0,
    outbound_price: 0,
    total_price: 0,
    buyer_nums: 0,
    package: '',
    store_info: '',
    marques: '',
    after_sales: '',
    pay_type: 1,
    manufacture: '',
    expiration_date: ''
})

const storeroom = ref({
    id: '',
    bhoid: order_id.value.id,
    product_id: '',
    buyer_nums: '',
    warehouse_num: '',
    warehouse_id: '',
    mark: ''
})
const productOfferData = ref({
    id: '',
    buyer_nums: ''
})
const no_storage = (type: any) => {
    queryParams.is_storage = type
    getLists()
}
// 重置表单
const resetFormData = () => {
    formData.value = {
        id: '',
        bhoid: order_id.value.id,
        supplier_id: '',
        purchase: 0,
        purchase_price: 0,
        outbound_price: 0,
        total_price: 0,
        buyer_nums: 0,
        package: '',
        store_info: '',
        marques: '',
        after_sales: '',
        pay_type: 1,
        manufacture: '',
        expiration_date: ''
    }
}
const oneClickStorage = async () => {
    disableClick.value = true
    try {
        await apiBeforehandOrderCartInfoOneClickStorage(one_click_storage.value)
        dialogBuyer.value = false
        disableClick.value = false
        getLists()
    } catch (error) {
        setTimeout(() => {
            disableClick.value = false
        }, 2000)
    }
}
/**
 * 采购信息设置
 */
const setProcureInfo = () => {
    apiPurchaseProductOfferSetProcureInfo(formData.value).then((res) => {
        procureShow.value = false
        resetFormData()
        getLists()
    })
}

const putInStorage = () => {
    try {
        apiBeforehandOrderCartInfoPutInStorage(storeroom.value).then((res) => {
            storeroomShow.value = false
            disableClick.value = false
            getLists()
        })
    } catch (error) {
        setTimeout(() => {
            disableClick.value = false
        }, 2000)
    }
}

/**
 * 库房信息设置
 */
const setStoreroomInfo = () => {
    apiPurchaseProductOffersetStoreroomInfo(storeroom.value).then((res) => {
        storeroomShow.value = false
        resetFormData()
        getLists()
    })
}
const productOfferInfo = () => {
    apiPurchaseProductOffersetStoreroomInfoTwo(productOfferData.value).then((res) => {
        productOfferShow.value = false
        resetFormData()
        getLists()
    })
}
const procureClick = (data: any) => {
    if (supplierList.value.length <= 0) {
        apiSupplierLists({ page_size: 999 }).then((res) => {
            supplierList.value = res.lists
        })
    }
    formData.value.id = data.id
    formData.value.buyer_nums = data.need_num
    formData.value.purchase = data.price
    formData.value.total_price = data.total_price

    formData.value.package = data.package
    formData.value.store_info = data.store_info
    formData.value.marques = data.marques
    formData.value.after_sales = data.after_sales
    formData.value.pay_type = data.pay_type
    formData.value.supplier_id = data.supplier_id
    formData.value.manufacture = data.manufacture
    formData.value.expiration_date = data.expiration_date

    dictData.outbound_floating.forEach((item) => {
        if (item.value == data.top_cate_name) {
            outbound_lv.value = `${item.name}|${item.value}`
        }
    })
    procureShow.value = true
}
const storeroomClick = (data: any) => {
    storeroom.value.id = data.id
    storeroom.value.bhoid = data.order_id
    storeroom.value.product_id = data.product_id
    storeroom.value.buyer_nums = data.buyer_nums
    storeroom.value.warehouse_num = ''
    storeroomShow.value = true
    apiWarehouseLists({}).then((res) => {
        warehouse_list.value = res.lists
    })
}
const productOfferClick = (data: any) => {
    productOfferData.value.id = data.id
    productOfferData.value.buyer_nums = data.buyer_nums
    productOfferShow.value = true
}
const compute = () => {
    formData.value.purchase = (formData.value.total_price / formData.value.buyer_nums).toFixed(2)
}
const OclickDialogBuyer = () => {
    dialogBuyer.value = true
    apiWarehouseLists({}).then((res) => {
        warehouse_list.value = res.lists
    })
}
const queryParams = reactive({
    order_id: order_id.value.id,
    store_name: '',
    is_adopt: '',
    page_size: 200,
    page_no: 1,
    is_mer: 1
})
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 { pager, getLists, resetParams, resetPage } = usePaging({
    fetchFun: apiPurchaseProductOfferLists,
    params: queryParams
})
// 获取字典数据
const { dictData } = useDictData('outbound_floating')
function getList(id) {
    order_id.value.id = id
    one_click_storage.value.bhoid = id
    formData.value.bhoid = id
    queryParams.order_id = id
    getLists()
}
// 删除
const handleDelete = async (id: number | any[]) => {
    await feedback.confirm('确定要删除？')
    await apiPurchaseProductOfferDelete({ id })
    getLists()
}
defineExpose({
    getList
})
</script>
