<template>
    <el-dialog v-model="dialogVisible" :title="'入库单详情'" width="1200px" append-to-body @opened="handleOpen"
        @close="handleClose">
        <!-- 基本信息 -->
        <el-descriptions :column="4" border :size="'small'" class="detail-basic-info">
            <el-descriptions-item label="入库单号">{{ inboundOrder?.orderNo }}</el-descriptions-item>
            <el-descriptions-item label="入库类型">
                <dict-tag :options="inbound_type" :value="inboundOrder?.orderType" />
            </el-descriptions-item>
            <el-descriptions-item label="仓库">{{ inboundOrder?.warehouseName }}</el-descriptions-item>
            <el-descriptions-item label="供应商">{{ inboundOrder?.supplierName }}</el-descriptions-item>
            <el-descriptions-item label="关联单号">{{ inboundOrder?.relatedOrderNo }}</el-descriptions-item>
            <el-descriptions-item label="总金额">{{ inboundOrder?.totalAmount }} 元</el-descriptions-item>
            <el-descriptions-item label="状态">
                <dict-tag :options="in_order_status" :value="inboundOrder?.orderStatus" />
            </el-descriptions-item>
            <el-descriptions-item label="操作人">{{ inboundOrder?.applicantUserName }}</el-descriptions-item>
            <el-descriptions-item label="操作时间">{{ parseTime(inboundOrder?.applyTime, '{y}-{m}-{d}')
                }}</el-descriptions-item>
            <el-descriptions-item label="预计到货日期">{{ parseTime(inboundOrder?.expectedArrivalDate, '{y}-{m}-{d}')
                }}</el-descriptions-item>
        </el-descriptions>

        <!-- 入库明细 -->
        <el-divider>入库明细</el-divider>
        <el-table :data="inboundDetailList" row-key="itemDetailId" border style="width: 100%">
            <el-table-column prop="wmsMaterial.materialName" label="物资名称" width="150" />
            <el-table-column prop="wmsMaterial.materialCode" label="物资编码" width="150" />
            <el-table-column prop="wmsMaterial.specification" label="规格型号" width="180" />
            <el-table-column prop="planQuantity" label="计划数量" width="100" />
            <el-table-column prop="actualQuantity" label="实际数量">
                <template #default="scope">
                    <el-tag type="success" v-if="scope.row.actualQuantity" effect="dark">{{ scope.row.actualQuantity }}</el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="unit" label="计量单位" width="80" />
            <el-table-column prop="unitPrice" label="单价(元)" width="120" />
            <el-table-column prop="amount" label="金额(元)" width="120" />
            <el-table-column prop="remark" label="备注" />
            <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="150" fixed="right">
                <template #default="scope">
                    <el-button link type="primary" @click="handleViewFlow(scope.row)">
                        查看流水
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
    </el-dialog>

    <!-- 入库流水弹框 -->
    <el-dialog v-model="flowDialogVisible" :title="'入库流水详情'" width="900px" append-to-body>
        <el-table :data="currentFlowData" row-key="itemId" border>
            <el-table-column prop="batchNo" label="批次号" width="150" />
            <el-table-column prop="actualQuantity" label="入库数量">
                <template #default="scope">
                    <el-tag type="success" effect="dark">{{ scope.row.actualQuantity }}</el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="unitPrice" label="单价(元)" />
            <el-table-column label="金额(元)" prop="amount" />
            <el-table-column label="仓库/库区/货架">
                <template #default="scope">
                    {{ scope.row.wmsWarehouse?.warehouseName || '-' }}/{{ scope.row.wmsArea?.areaName || '-' }}/{{
                        scope.row.wmsLocation?.locationName || '-' }}
                </template>
            </el-table-column>
            <el-table-column prop="storageLocation" label="PTL标签" />
            <el-table-column prop="rfidTagIds" label="RFID标签" />
            <el-table-column prop="expirationDate" label="有效期" width="120">
                <template #default="scope">
                    {{ parseTime(scope.row.expirationDate, '{y}-{m}-{d}') }}
                </template>
            </el-table-column>
            <el-table-column prop="productionDate" label="生产日期" width="120">
                <template #default="scope">
                    {{ parseTime(scope.row.productionDate, '{y}-{m}-{d}') }}
                </template>
            </el-table-column>
            <el-table-column prop="remark" label="备注" />
        </el-table>
    </el-dialog>
</template>

<script setup name="DetailInfo">
import { ref, watch, computed, getCurrentInstance } from 'vue'
import { listWmsInboundOrderItem } from '@/api/ware/wmsInboundOrderItem'
import { listWmsInboundOrderItemDetail } from '@/api/ware/wmsInboundOrderItemDetail'
import { parseTime } from '@/utils/ruoyi'
import DictTag from '@/components/DictTag'

const props = defineProps({
    visible: {
        type: Boolean,
        default: false
    },
    order: {
        type: Object,
        default: () => ({})
    }
})

const emit = defineEmits(['update:visible'])

const { proxy } = getCurrentInstance()
const { inbound_type, in_order_status, quality_status } = proxy.useDict('inbound_type', 'in_order_status', 'quality_status')

// 对话框状态
const dialogVisible = computed({
    get() {
        return props.visible
    },
    set(val) {
        emit('update:visible', val)
    }
})

// 入库流水弹框状态
const flowDialogVisible = ref(false)
// 当前流水数据
const currentFlowData = ref([])

// 入库单详情数据
const inboundOrder = ref({})
// 入库明细列表
const inboundDetailList = ref([])

// 当对话框打开时加载数据
function handleOpen() {
    if (props.order.orderId) {
        loadInboundOrderDetail()
    }
}

// 关闭对话框时重置数据
function handleClose() {
    inboundOrder.value = {}
    inboundDetailList.value = []
}

// 加载入库单详情
function loadInboundOrderDetail() {
    if (!props.order.orderId) return

    // 加载入库单基本信息
    inboundOrder.value = props.order

    // 加载入库明细
    listWmsInboundOrderItemDetail({ orderId: props.order.orderId }).then(response => {
        inboundDetailList.value = response.rows || []
        // 加载完成明细，无需初始化流水数组，改为弹框模式按需加载
    })
}

// 查看入库流水
function handleViewFlow(row) {
    // 加载入库流水数据
    listWmsInboundOrderItem({ itemDetailId: row.itemDetailId }).then(response => {
        currentFlowData.value = response.rows || []
        flowDialogVisible.value = true
    })
}
</script>

<style lang="scss" scoped>
.detail-basic-info {
    margin-bottom: 20px;

    :deep(.el-descriptions-item__label) {
        width: 100px;
        font-weight: bold;
    }
}

.empty-data {
    padding: 20px 0;
    text-align: center;
}
</style>