<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="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="nums" show-overflow-tooltip />
            <el-table-column label="仓库" prop="warehouse_name" show-overflow-tooltip />
            <el-table-column label="原因" prop="mark" show-overflow-tooltip />
            <el-table-column label="操作" fixed="right" width="180">
                <template #default="{ row }">
                    <el-button
                        type="primary"
                        link
                        @click="resetWarehouseClick(row)"
                        v-perms="['warehouse_product.warehouse_product/resetNums']"
                        >重置数量</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>
</template>

<script lang="ts" setup name="subOrder">
import { usePaging } from '@/hooks/usePaging'
import {
    apiPurchaseProductOfferLists,
    apiPurchaseProductOfferDelete
} from '@/api/purchase_product_offer'
import { apiBeforehandOrderCartInfoOneClickStorage } 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 dialogBuyer = ref(false)
const warehouse_list = ref([])
const resetWarehouseShow = 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,
    outbound_price: 0,
    total_price: 0,
    buyer_nums: 0,
    package: '',
    store_info: '',
    marques: '',
    after_sales: '',
    pay_type: 1
})
const resetWarehouseData = ref({
    id: '',
    store_name: '',
    nums: ''
})
const resetWarehouseClick = (data: any) => {
    resetWarehouseShow.value = true
    resetWarehouseData.value.id = data.id
    resetWarehouseData.value.store_name = data.store_name
    resetWarehouseData.value.nums = data.nums
}
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: '',
    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>
