<template>
    <el-dialog
        title="入库单详情"
        v-model="visible"
        width="1020px"
        destroy-on-close
    >
        <div class="detail-content">
            <el-descriptions :column="2" border label-width="100px">
                <el-descriptions-item label="入库单号">{{
                    detailData.inputCode
                }}</el-descriptions-item>
                <el-descriptions-item label="入库库位">{{
                    detailData.positionCode
                }}</el-descriptions-item>
                <el-descriptions-item label="入库仓库">{{
                    detailData.godownName
                }}</el-descriptions-item>
                <el-descriptions-item label="入库时间">{{
                    formatTime(detailData.inputTime)
                }}</el-descriptions-item>
                <el-descriptions-item label="备注">{{
                    detailData.inputRemark
                }}</el-descriptions-item>
                <el-descriptions-item label="操作员">{{
                    detailData.inputName
                }}</el-descriptions-item>
            </el-descriptions>

            <el-table
                :data="dataList"
                style="width: 100%; margin-top: 20px"
                border
            >
                <el-table-column type="index" label="序号" width="70" />
                <el-table-column prop="orderId" label="订单编号" width="180" />
                <el-table-column
                    prop="waybillCode"
                    label="物流单号"
                    width="160"
                />
                <el-table-column prop="orderNum" label="数量" />
                <el-table-column prop="bookNum" label="不良数量" />
                <el-table-column prop="checkTime" label="验货时间" width="180">
                    <template #default="scope">
                        {{ formatTime(scope.row.checkTime) }}
                    </template>
                </el-table-column>

                <el-table-column
                    prop="inputRemark"
                    label="订单备注"
                    width="180"
                />
            </el-table>
        </div>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="visible = false">关闭</el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script setup>
    import { ref, reactive } from 'vue';
    import dayjs from 'dayjs';
    import { getStockInDetail } from '@/api/recycleService/stockIn';

    const visible = ref(false);
    const detailData = ref({
        inputCode: '',
        positionCode: '',
        orderId: '',
        waybillCode: '',
        orderNum: 0,
        bookNum: 0,
        checkTime: '',
        inputRemark: ''
    });

    const formatTime = (time) => {
        return time ? dayjs(time).format('YYYY-MM-DD HH:mm:ss') : '-';
    };

    const dataList = ref([]);
    const open = async (row) => {
        visible.value = true;
        detailData.value = row;
        try {
            const res = await getStockInDetail({ inputCode: row.inputCode });
            dataList.value = res.data;
        } catch (error) {
            console.error('获取入库详情失败:', error);
        }
    };

    defineExpose({
        open
    });
</script>

<style scoped>
    .detail-content {
        padding: 20px;
    }
</style>
