<template>
  <div class="detail-info-container">
    <!-- 任务基础信息 -->
    <div class="basic-info">
      <h3>任务基础信息</h3>
      <el-descriptions :column="2" border>
        <el-descriptions-item label="盘点计划ID">{{ taskInfo.planId }}</el-descriptions-item>
        <el-descriptions-item label="盘点任务编号">{{ taskInfo.taskNo }}</el-descriptions-item>
        <el-descriptions-item label="任务状态">{{ taskInfo.taskStatus }}</el-descriptions-item>
        <el-descriptions-item label="总盘点数">{{ taskInfo.totalItems }}</el-descriptions-item>
        <el-descriptions-item label="已盘数">{{ taskInfo.countedItems }}</el-descriptions-item>
        <!-- <el-descriptions-item label="盘点设备">{{ taskInfo.inventoryDevice }}</el-descriptions-item> -->
        <el-descriptions-item label="备注" :span="2">{{ taskInfo.remark }}</el-descriptions-item>
      </el-descriptions>
    </div>

    <!-- 任务明细信息 -->
    <div class="detail-info mt-4">
      <h3>任务明细信息</h3>
      <el-table v-loading="loading" :data="taskDetailList" stripe height="calc(100vh - 400px)">
        <el-table-column label="库存ID" align="center" prop="inventoryId" />
        <el-table-column label="物资ID" align="center" prop="materialId" />
        <el-table-column label="仓库名称" align="center" prop="warehouseName" />
        <el-table-column label="库区ID" align="center" prop="areaId" />
        <el-table-column label="库区名称" align="center" prop="areaName" />
        <el-table-column label="货架名称" align="center" prop="locationName" />
        <el-table-column label="批次号" align="center" prop="batchNo" width="120" />
        <el-table-column label="系统数量" align="center" prop="systemQuantity" />
        <el-table-column label="实际数量" align="center" prop="actualQuantity" />
        <el-table-column label="差异数量" align="center" prop="differenceQuantity" />
        <el-table-column label="差异率" align="center" prop="differenceRate" />
        <el-table-column label="差异原因" align="center" prop="differenceReason" width="120">
          <template #default="scope">
            <dict-tag :options="diff_type" :value="scope.row.differenceReason" />
          </template>
        </el-table-column>
        <el-table-column label="盘点状态" align="center" prop="checkStatus" width="120">
          <template #default="scope">
            <dict-tag :options="check_status" :value="scope.row.checkStatus" />
          </template>
        </el-table-column>
        <el-table-column label="盘点员ID" align="center" prop="checkerId" />
        <el-table-column label="盘点员姓名" align="center" prop="checkerName" />
        <el-table-column label="盘点时间" align="center" prop="checkTime" width="180">
          <template #default="scope">
            <span>{{ parseTime(scope.row.checkTime, '{y}-{m}-{d}') }}</span>
          </template>
        </el-table-column>
        <el-table-column label="RFID标签" align="center" prop="rfidTag" />
        <el-table-column label="是否盲区" align="center" prop="isBlindZone" />
        <el-table-column label="质量状态" align="center" prop="qualityStatus" />
        <el-table-column label="备注" align="center" prop="remark" />
      </el-table>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, watch } from 'vue'
import { listWmsInventoryTaskDetail } from "@/api/ware/wmsInventoryTaskDetail"
import { parseTime } from "@/utils/ruoyi"

const {proxy} = getCurrentInstance()
const {check_status, diff_type} = proxy.useDict('check_status','diff_type')

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

const emit = defineEmits(['close'])

const taskDetailList = ref([])
const loading = ref(false)

// 加载任务明细数据
function loadTaskDetail() {
  loading.value = true
  const queryParams = {
    pageNum: 1,
    pageSize: 1000, // 加载所有明细
    taskId: props.taskInfo.taskId
  }
  listWmsInventoryTaskDetail(queryParams).then(response => {
    taskDetailList.value = response.rows
    loading.value = false
  }).catch(() => {
    loading.value = false
  })
}

watch(() => props.visible, (newVal) => {
  if (newVal && props.taskInfo.taskId) {
    loadTaskDetail()
  }
},{immediate: true})

// 暴露给父组件的方法
defineExpose({
  loadTaskDetail
})
</script>

<style scoped>
.detail-info-container {
  padding: 10px;
}

.basic-info h3,
.detail-info h3 {
  margin-bottom: 16px;
  color: #333;
  font-size: 16px;
  font-weight: bold;
}

.mt-4 {
  margin-top: 20px;
}
</style>