<template>
    <div>
        <el-button type="primary" @click="OclickDialogBuyer"> 一键入库 </el-button>
        <el-button type="primary" @click="product_offer_export">导出表格 </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="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
                    >
                    <el-button type="primary" link @click="storeroomClick(row)"
                        >库房设置信息</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"> 确认 </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
                    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="出库价比例">
                <el-select
                    v-model="outbound_lv"
                    placeholder="请选择出库价比例"
                    @change="outboundChange"
                >
                    <el-option
                        :label="`${item.name}|${item.value}`"
                        :value="item.value"
                        v-for="item in dictData.outbound_floating"
                        :key="item.value"
                    />
                </el-select>
            </el-form-item> -->
            <!-- <el-form-item label="出库价" prop="outbound_price">
                <el-input
                    v-model="formData.outbound_price"
                    clearable
                    placeholder="请输入出库价"
                    :readonly="false"
                />
            </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="storeroomShow" title="验货设置" width="600">
        <el-form ref="formRef" :model="storeroom" label-width="90px">
            <el-form-item label="验收数量" prop="accept_num">
                <el-input
                    v-model="storeroom.accept_num"
                    clearable
                    placeholder="请输入验收数量"
                    :readonly="false"
                    @change="compute"
                />
            </el-form-item>
            <el-form-item label="毛重" prop="gross_weight">
                <el-input
                    v-model="storeroom.gross_weight"
                    clearable
                    placeholder="请输入毛重"
                    :readonly="false"
                    @change="compute"
                />
            </el-form-item>
            <el-form-item label="净重" prop="net_weight">
                <el-input
                    v-model="storeroom.net_weight"
                    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="setStoreroomInfo"> 确认 </el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script lang="ts" setup name="subOrder">
import { usePaging } from '@/hooks/usePaging'
import {
    apiPurchaseProductOfferLists,
    apiPurchaseProductOfferSetProcureInfo,
    apiPurchaseProductOffersetStoreroomInfo
} 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'

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

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,
    pay_type: 1
})

const storeroom = ref({
    id: '',
    bhoid: order_id.value.id,
    product_id: '',
    accept_num: '',
    gross_weight: '',
    net_weight: ''
})
// 重置表单
const resetFormData = () => {
    formData.value = {
        id: '',
        bhoid: order_id.value.id,
        supplier_id: '',
        purchase: 0,
        outbound_price: 0,
        total_price: 0,
        buyer_nums: 0,
        pay_type: 1
    }
}
const oneClickStorage = () => {
    apiBeforehandOrderCartInfoOneClickStorage(one_click_storage.value).then((res) => {
        dialogBuyer.value = false
        getLists()
    })
}
const outboundChange = (e) => {
    const price = (formData.value.purchase * e).toFixed(2)
    const price2 = parseFloat(formData.value.purchase) + parseFloat(price)
    formData.value.outbound_price = price2.toFixed(2)
}
/**
 * 采购信息设置
 */
const setProcureInfo = () => {
    apiPurchaseProductOfferSetProcureInfo(formData.value).then((res) => {
        procureShow.value = false
        resetFormData()
        getLists()
    })
}
/**
 * 库房信息设置
 */
const setStoreroomInfo = () => {
    apiPurchaseProductOffersetStoreroomInfo(storeroom.value).then((res) => {
        storeroomShow.value = false
        resetFormData()
        getLists()
    })
}
const procureClick = (data: any) => {
    formData.value.id = data.id
    formData.value.buyer_nums = data.need_num
    formData.value.purchase = data.price
    formData.value.total_price = data.total_price
    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.accept_num = data.buyer_nums
    storeroomShow.value = true
}
const compute = () => {
    formData.value.total_price = (formData.value.buyer_nums * formData.value.purchase).toFixed(2)
}
const OclickDialogBuyer = () => {
    dialogBuyer.value = true
    apiWarehouseLists({}).then((res) => {
        warehouse_list.value = res.lists
    })
}
const product_offer_export = () => {
    apiPurchaseProductOfferLists({
        export: 2,
        order_id: queryParams.order_id
    }).then((res) => {
        window.open(res.url, '_blank')
        ElMessage.success('导出成功')
    })
}

const queryParams = reactive({
    order_id: order_id.value.id,
    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()
}
defineExpose({
    getList
})
</script>
