<template>
  <el-descriptions :column="column" :border="border" size="small" :title="title">
    <template slot="extra">
      <slot name="extra"></slot>
    </template>
    <el-descriptions-item v-for="(item, index) in filteredFields" :key="index" :label="item.label"
      :span="item.span || 1">
      <template v-if="item.children">
        <span v-for="(child, cIndex) in item.children" :key="cIndex" style="margin-right: 12px;">
          {{ child.label }}: {{ child.value || '-' }}
        </span>
      </template>
      <template v-else>
        {{ item.value || '-' }}
      </template>
    </el-descriptions-item>
  </el-descriptions>
</template>

<script>
export default {
  name: 'CoilInfo',
  props: {
    coilInfo: {
      type: Object,
      default: () => ({})
    },
    column: {
      type: Number,
      default: 5
    },
    border: {
      type: Boolean,
      default: false
    },
    // 只显示有值的字段
    showOnlyValue: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
    }
  },
  computed: {
    fields() {
      return [
        { label: '入场卷号', key: 'enterCoilNo' },
        { label: '当前卷号', key: 'currentCoilNo' },
        { label: '厂家原料号', key: 'supplierCoilNo' },
        { label: '逻辑库位', key: 'warehouseName' },
        { label: '实际库区', key: 'actualWarehouseName' },
        { label: '班组', key: 'team' },
        { label: '材料类型', key: 'materialType' },
        { label: '物料名', key: 'itemName' },
        { label: '规格', key: 'specification' },
        { label: '材质', key: 'material' },
        { label: '厂家', key: 'manufacturer' },
        { label: '镀层质量', key: 'zincLayer' },
        { label: '表面处理', key: 'surfaceTreatmentDesc' },
        { label: '质量状态', key: 'qualityStatus' },
        { label: '切边要求', key: 'trimmingRequirement' },
        { label: '原料材质', key: 'packingStatus' },
        { label: '包装要求', key: 'packagingRequirement' },
        // 设置对照属性，两个数量显示在一个格子里
        {
          label: '长度[m]',
          children: [
            { label: '实测', key: 'actualLength' },
            { label: '理论', key: 'theoreticalLength' }
          ]
        },
        {
          label: '厚度[mm]',
          children: [
            { label: '实测', key: 'actualThickness' },
            { label: '理论', key: 'theoreticalThickness' }
          ]
        },
        { label: '排产厚度[mm]', key: 'scheduleThickness' },
        { label: '实测宽度[mm]', key: 'actualWidth' },
        { label: '毛重[t]', key: 'grossWeight' },
        { label: '净重[t]', key: 'netWeight' },
        { label: '生产开始', key: 'productionStartTime' },
        { label: '生产结束', key: 'productionEndTime' },
        { label: '调制度', key: 'temperGrade' },
        { label: '镀层种类', key: 'coatingType' },
        { label: '钢卷表面处理', key: 'coilSurfaceTreatment' },
        { label: '备注', key: 'remark', span: this.column > 2 ? this.column - 2 : 1 }
      ]
    },
    filteredFields() {
      let fields = this.fields.map(item => {
        if (item.children) {
          return {
            ...item,
            children: item.children.map(child => ({
              ...child,
              value: this.coilInfo[child.key]
            }))
          }
        }
        return {
          ...item,
          value: this.coilInfo[item.key]
        }
      })

      if (this.showOnlyValue) {
        fields = fields.filter(item => {
          if (item.children) {
            return item.children.some(child => child.value !== undefined && child.value !== null && child.value !== '')
          }
          return item.value !== undefined && item.value !== null && item.value !== ''
        })
      }

      return fields
    }
  },
}
</script>

<style scoped>
.status-success {
  color: #67c23a;
  font-weight: 500;
}

.status-danger {
  color: #f56c6c;
  font-weight: 500;
}

.status-warning {
  color: #e6a23c;
  font-weight: 500;
}
</style>
