<template>
    <div>
        <el-table :data="pager.lists" border style="width: 100%; margin-top: 10px">
            <el-table-column prop="id" label="ID" width="120" />
            <!-- <el-table-column prop="order_id" label="采购订单id" width="120" /> -->
            <el-table-column label="商品名称" prop="goods_name" show-overflow-tooltip width="220" />
            <el-table-column label="单位" prop="unit_name" width="80" show-overflow-tooltip />
            <el-table-column
                label="供应商"
                prop="supplier_name"
                show-overflow-tooltip
                width="160"
            />
            <el-table-column label="入库数量" prop="nums" show-overflow-tooltip width="100" />
            <el-table-column label="报价" prop="price" show-overflow-tooltip />
            <el-table-column label="状态" prop="is_storage" show-overflow-tooltip>
                <template #default="{ row }">
                    <el-tag v-if="row.is_storage" type="success">已入库</el-tag>
                    <el-tag v-else type="info">未入库</el-tag>
                </template>
            </el-table-column>
            <el-table-column label="备注" prop="notes" show-overflow-tooltip />
            <el-table-column
                label="入库时间"
                prop="update_time"
                show-overflow-tooltip
                width="160"
            />
            <el-table-column v-if="false" label="操作" fixed="right">
                <template #default="{ row }">
                    <el-button
                        type="primary"
                        v-if="row.is_adopt === 1 && row.price > 0"
                        size="small"
                        @click="offerGood(row, 0)"
                        >采纳</el-button
                    >
                    <span v-if="row.is_storage">已入库</span>
                    <el-button
                        type="success"
                        v-else-if="row.is_adopt === 2 && row.price > 0"
                        size="small"
                        @click="offerGood(row, 1)"
                        >入库</el-button
                    >
                    <span v-if="row.is_adopt === 0 && row.price == 0" style="color: #e6a23c"
                        >等待供应商报价</span
                    >
                </template>
            </el-table-column>
        </el-table>
        <div class="flex mt-4 justify-end">
            <pagination v-if="pager.lists" v-model="pager" @change="getLists" />
        </div>
        <el-dialog v-model="dialogVisible" title="入库" width="600">
            <el-descriptions class="margin-top" :column="1" border>
                <el-descriptions-item label="供应商名称">
                    {{ updateInfo.supplier_name }}
                </el-descriptions-item>
                <el-descriptions-item label="商品名称">
                    {{ updateInfo.goods_name }}
                </el-descriptions-item>
                <el-descriptions-item label="商品报价">
                    ¥ {{ updateInfo.price }} / {{ updateInfo.unit_name }}
                </el-descriptions-item>
                <el-descriptions-item label="应入库数量">
                    {{ updateInfo.q_nums }}
                </el-descriptions-item>
                <el-descriptions-item label="实际入库数量">
                    <el-input-number v-model="updateInfo.nums" :step="1" :min="1" />
                </el-descriptions-item>
                <el-descriptions-item label="备注">
                    <el-input
                        v-model="updateInfo.notes"
                        type="textarea"
                        placeholder="请输入备注"
                    ></el-input>
                </el-descriptions-item>
            </el-descriptions>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="dialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="goodsOfferUpdate"> 确认 </el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>

<script lang="ts" setup name="subOrder">
import { usePaging } from '@/hooks/usePaging'
// import {
//     opurchaseclassStorageListApi,
//     apiOpurchaseclassGoodsOfferUpdate
// } from '@/api/opurchaseclass'
import { apiPurchaseOrderInfoLists } from '@/api/purchase_order'

import { useRoute } from 'vue-router'

const route = useRoute()

const isAdopt = ref('')
const queryParams = reactive({
    order_id: route.query.id,
    is_storage: 1
})
// 分页相关
const { pager, getLists, resetParams, resetPage } = usePaging({
    fetchFun: apiPurchaseOrderInfoLists,
    params: queryParams
})
defineExpose({
    getLists
})

const changeType = (e: any) => {
    queryParams.is_adopt = isAdopt.value
    getLists()
}

const dialogVisible = ref(false)
const updateInfo = ref({
    id: '',
    type: 0,
    notes: '', //备注
    nums: 0, //实际数量
    q_nums: 0 //应到数量
})
const offerGood = (row: any, type: number) => {
    //type:0 采纳，1 入库
    updateInfo.value = Object.assign(
        {
            id: '',
            type: type,
            notes: '', //备注
            nums: 0
        },
        row
    )
    if (type == 0) return goodsOfferUpdate() // 采纳时直接成功, 入库弹窗显示数量
    updateInfo.value.q_nums = row.nums
    dialogVisible.value = true
}

const goodsOfferUpdate = () => {
    apiOpurchaseclassGoodsOfferUpdate({
        id: updateInfo.value.id,
        type: updateInfo.value.type,
        notes: updateInfo.value.notes, //备注
        nums: updateInfo.value.nums
    }).then((res) => {
        getLists()
        dialogVisible.value = false
    })
}
</script>
