<template>
  <el-dialog v-model="visibleProxy" title="报工单" width="800px" append-to-body>
    <el-form label-width="120px">
      <template v-if="Object.keys(detailProcessData).length > 0">
        <div class="mb-4">
          <div class="text-lg font-bold mb-2">工序参数</div>
          <template v-for="(field, key) in detailProcessData" :key="key">
            <el-form-item :label="field.label">
              <div class="text-gray-600">{{ formatDetailFieldValue(field) }}</div>
            </el-form-item>
          </template>
        </div>
      </template>
      <el-form-item label="操作人">
        <div class="text-gray-600">{{
          currentDetailOperation?.currentExecution?.workerName || '-'
        }}</div>
      </el-form-item>
      <el-form-item label="设备">
        <div class="text-gray-600">{{
          currentDetailOperation?.currentExecution?.equipmentName || '-'
        }}</div>
      </el-form-item>
      <el-form-item label="开始时间">
        <div class="text-gray-600">{{
          currentDetailOperation?.currentExecution?.startTime || '-'
        }}</div>
      </el-form-item>
      <el-form-item label="结束时间">
        <div class="text-gray-600">{{
          currentDetailOperation?.currentExecution?.endTime || '-'
        }}</div>
      </el-form-item>
      <el-form-item label="投入数量">
        <div class="text-gray-600">{{
          currentDetailOperation?.currentExecution?.inputQuantity || '-'
        }}</div>
      </el-form-item>
      <el-form-item label="产出数量">
        <div class="text-gray-600">{{
          currentDetailOperation?.currentExecution?.outputQuantity || '-'
        }}</div>
      </el-form-item>
      <el-form-item label="合格数量">
        <div class="text-gray-600">{{
          currentDetailOperation?.currentExecution?.qualifiedQuantity || '-'
        }}</div>
      </el-form-item>
      <el-form-item label="不合格数量">
        <div class="text-gray-600">{{
          currentDetailOperation?.currentExecution?.unqualifiedQuantity || '-'
        }}</div>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="visibleProxy = false">关闭</el-button>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { computed } from 'vue'

const props = defineProps<{
  visible: boolean
  currentDetailOperation: any
  detailProcessData: Record<string, any>
}>()

const emit = defineEmits<{
  (e: 'update:visible', value: boolean): void
}>()

const visibleProxy = computed({
  get: () => props.visible,
  set: (val: boolean) => emit('update:visible', val)
})

const formatDetailFieldValue = (field: any) => {
  if (!field || field.value === undefined) return '-'
  const { value, type, unit, options } = field
  if (type === 'select' && options) {
    const option = options.find((opt: any) => opt.value === value)
    return option ? option.label : value
  }
  if (type === 'number' && unit) {
    return `${value} ${unit}`
  }
  if (Array.isArray(value)) {
    return value.join('、')
  }
  return value
}
</script>

<style scoped>
.text-lg {
  font-size: 16px;
}
.font-bold {
  font-weight: bold;
}
.mb-2 {
  margin-bottom: 8px;
}
.mb-4 {
  margin-bottom: 16px;
}
.text-gray-600 {
  color: #606266;
}
</style>
