<template>
  <!-- 移动端使用抽屉 -->
  <el-drawer
    v-if="isMobile"
    v-model="visibleProxy"
    title="报工单"
    direction="btt"
    size="75%"
  >
    <el-form label-position="top">
      <template v-if="Object.keys(detailProcessData).length > 0">
        <div class="mobile-form-section">
          <div class="mobile-form-section__title">工序参数</div>
          <template v-for="(field, key) in detailProcessData" :key="key">
            <el-form-item :label="field.label">
              <div class="detail-value">{{ formatDetailFieldValue(field) }}</div>
            </el-form-item>
          </template>
        </div>
      </template>
      
      <div class="mobile-form-section">
        <div class="mobile-form-section__title">执行信息</div>
        <el-form-item label="操作人">
          <div class="detail-value">{{
            currentDetailOperation?.currentExecution?.workerName || '-'
          }}</div>
        </el-form-item>
        <el-form-item label="设备">
          <div class="detail-value">{{
            currentDetailOperation?.currentExecution?.equipmentName || '-'
          }}</div>
        </el-form-item>
        <el-form-item label="开始时间">
          <div class="detail-value">{{
            currentDetailOperation?.currentExecution?.startTime || '-'
          }}</div>
        </el-form-item>
        <el-form-item label="结束时间">
          <div class="detail-value">{{
            currentDetailOperation?.currentExecution?.endTime || '-'
          }}</div>
        </el-form-item>
      </div>
      
      <div class="mobile-form-section">
        <div class="mobile-form-section__title">数量统计</div>
        <div class="quantity-grid">
          <div class="quantity-item">
            <div class="quantity-item__label">投入数量</div>
            <div class="quantity-item__value">{{
              currentDetailOperation?.currentExecution?.inputQuantity || '-'
            }}</div>
          </div>
          <div class="quantity-item">
            <div class="quantity-item__label">产出数量</div>
            <div class="quantity-item__value">{{
              currentDetailOperation?.currentExecution?.outputQuantity || '-'
            }}</div>
          </div>
          <div class="quantity-item">
            <div class="quantity-item__label">合格数量</div>
            <div class="quantity-item__value success">{{
              currentDetailOperation?.currentExecution?.qualifiedQuantity || '-'
            }}</div>
          </div>
          <div class="quantity-item">
            <div class="quantity-item__label">不合格数量</div>
            <div class="quantity-item__value danger">{{
              currentDetailOperation?.currentExecution?.unqualifiedQuantity || '-'
            }}</div>
          </div>
        </div>
      </div>
    </el-form>
    <template #footer>
      <div class="mobile-drawer-footer">
        <el-button @click="visibleProxy = false" style="flex:1">关闭</el-button>
      </div>
    </template>
  </el-drawer>

  <!-- PC端使用对话框 -->
  <el-dialog v-else 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'
import { useWindowSize } from '@vueuse/core'

const { width } = useWindowSize()
const isMobile = computed(() => width.value < 768)

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 lang="scss">
.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;
}

.mobile-form-section {
  margin-bottom: 20px;
  
  &__title {
    font-size: 15px;
    font-weight: 600;
    color: #303133;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid #f0f0f0;
  }
}

.detail-value {
  font-size: 14px;
  color: #606266;
  font-weight: 500;
}

.quantity-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.quantity-item {
  padding: 12px;
  background: #f5f7fa;
  border-radius: 8px;
  text-align: center;
  
  &__label {
    font-size: 12px;
    color: #909399;
    margin-bottom: 6px;
  }
  
  &__value {
    font-size: 18px;
    font-weight: 600;
    color: #303133;
    
    &.success {
      color: #67c23a;
    }
    
    &.danger {
      color: #f56c6c;
    }
  }
}

.mobile-drawer-footer {
  display: flex;
  gap: 12px;
  padding: 12px 16px;
  border-top: 1px solid #f0f0f0;
}
</style>
