<template>
  <el-dialog :title="'库存流水详情'" v-model="dialogVisible" width="600px" append-to-body>
    <el-descriptions :column="1" border>
      <el-descriptions-item label="库存ID">{{ detailData.inventoryId }}</el-descriptions-item>
      <el-descriptions-item label="物资ID">{{ detailData.materialId }}</el-descriptions-item>
      <el-descriptions-item label="仓库ID">{{ detailData.warehouseId }}</el-descriptions-item>
      <el-descriptions-item label="货架ID">{{ detailData.locationId }}</el-descriptions-item>
      <el-descriptions-item label="流水类型">{{ detailData.flowType }}</el-descriptions-item>
      <el-descriptions-item label="流水单号">{{ detailData.flowCode }}</el-descriptions-item>
      <el-descriptions-item label="批次号">{{ detailData.batchNo }}</el-descriptions-item>
      <el-descriptions-item label="变动前数量">{{ detailData.quantityBefore }}</el-descriptions-item>
      <el-descriptions-item label="变动数量">{{ detailData.quantityChange }}</el-descriptions-item>
      <el-descriptions-item label="变动后数量">{{ detailData.quantityAfter }}</el-descriptions-item>
      <el-descriptions-item label="单价">{{ detailData.unitPrice }}</el-descriptions-item>
      <el-descriptions-item label="总价">{{ detailData.totalPrice }}</el-descriptions-item>
      <el-descriptions-item label="操作人">{{ detailData.operatorId }}</el-descriptions-item>
      <el-descriptions-item label="操作时间">{{ detailData.operationTime }}</el-descriptions-item>
      <el-descriptions-item label="备注">{{ detailData.remark || '-' }}</el-descriptions-item>
    </el-descriptions>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleClose">关 闭</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup name="DetailInfo">
import { ref, watch, onMounted } from 'vue'
import { getWmsInventoryFlow } from "@/api/ware/wmsInventoryFlow"

const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  flowId: {
    type: [Number, String],
    default: null
  }
})

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

const dialogVisible = ref(props.visible)
const detailData = ref({})
const loading = ref(false)

// 监听visible变化
watch(() => props.visible, (newVal) => {
  dialogVisible.value = newVal
  if (newVal && props.flowId) {
    getDetail()
  }
})

// 监听flowId变化，重新获取详情
watch(() => props.flowId, (newVal) => {
  if (dialogVisible.value && newVal) {
    getDetail()
  }
})

// 监听对话框关闭
watch(() => dialogVisible.value, (newVal) => {
  emit('update:visible', newVal)
})

// 获取详情
const getDetail = () => {
  if (!props.flowId) return
  
  loading.value = true
  getWmsInventoryFlow(props.flowId).then(response => {
    detailData.value = response.data
  }).finally(() => {
    loading.value = false
  })
}

// 关闭对话框
const handleClose = () => {
  dialogVisible.value = false
  emit('close')
}

// 组件挂载时，如果visible为true且有flowId，则获取详情
onMounted(() => {
  if (props.visible && props.flowId) {
    getDetail()
  }
})
</script>

<style scoped>
.dialog-footer {
  text-align: right;
}
</style>