<template>
    <div>
        <el-button type="primary" @click="OclickDialogBuyer"> 一键出库 </el-button>
        <el-button type="primary" @click="xlsx(1)"> 打印采购单 </el-button>
        <!-- <el-button type="primary" @click="xlsx(2)"> 打印供货单 </el-button>
        <el-button type="primary" @click="xlsx(3)"> 打印商户/会员单 </el-button> -->
        <el-button type="primary" @click="xlsx(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="buyer_name" show-overflow-tooltip width="100" /> -->
            <el-table-column label="出库数量" prop="nums" show-overflow-tooltip />
            <el-table-column label="采购价" prop="purchase" show-overflow-tooltip />
            <el-table-column label="总价" prop="total_price" show-overflow-tooltip />
        </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="送货时间">
                <el-date-picker
                    :readonly="false"
                    class="flex-1 !flex"
                    v-model="one_click_storage.delivery_time"
                    clearable
                    type="date"
                    value-format="YYYY-MM-DD"
                    placeholder="选择生产日期"
                >
                </el-date-picker>
            </el-form-item>
            <el-form-item label="门店" prop="store_id">
                <el-select
                    v-model="one_click_storage.store_id"
                    placeholder="请选择门店"
                    size="large"
                    style="width: 240px"
                >
                    <el-option
                        v-for="item in store_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>
</template>

<script lang="ts" setup name="subOrder">
import { usePaging } from '@/hooks/usePaging'
import {
    apiBeforehandOrderOutboundLists,
    apiBeforehandOrderCreateOutboundOrder
} from '@/api/beforehand_order'
import { apiWarehouseLists } from '@/api/warehouse'
import { apiSystemStoreLists } from '@/api/system_store'
import { apiWarehouseOrderExport } from '@/api/warehouse_order'

const dialogBuyer = ref(false)
const warehouse_list = ref([])
const store_list = ref([])

const order_id = ref({ id: 0 })
const outbound_id = ref(0)

const one_click_storage = ref({
    bhoid: order_id.value.id,
    warehouse_id: '',
    remark: '',
    delivery_time: '',
    store_id: ''
})
const oneClickStorage = () => {
    apiBeforehandOrderCreateOutboundOrder(one_click_storage.value).then((res) => {
        location.reload()
    })
}
const OclickDialogBuyer = () => {
    dialogBuyer.value = true
    apiWarehouseLists({}).then((res) => {
        warehouse_list.value = res.lists
    })
    apiSystemStoreLists({}).then((res) => {
        store_list.value = res.lists
    })
}
const xlsx = (type) => {
    if (outbound_id.value > 0) {
        apiWarehouseOrderExport({
            id: outbound_id.value,
            type: type
        }).then((res) => {
            window.open(res.url, '_blank')
            ElMessage.success('导出成功')
        })
    } else {
        ElMessage.error('出库id不能为空')
    }
}
const queryParams = reactive({
    id: order_id.value.id
})
// 分页相关
const { pager, getLists, resetParams, resetPage } = usePaging({
    fetchFun: apiBeforehandOrderOutboundLists,
    params: queryParams
})
function getList(id, order) {
    outbound_id.value = order.outbound_id
    order_id.value.id = id
    one_click_storage.value.bhoid = id
    queryParams.id = id
    getLists()
}
defineExpose({
    getList
})
</script>
