<template>
  <el-form :model="customForm" ref="formCustom" class="row-form">
    <el-row>
      <el-col
        :span="8"
        v-if="defaultNum == '3' || defaultNum == '4' || defaultNum == '6'"
      >
        <el-form-item label="牌号" prop="brandNumber" label-width="60px">
          <span>{{ customForm.brandNum }}</span>
        </el-form-item>
      </el-col>
      <el-col
        :span="8"
        v-if="
          defaultNum == '8' ||
          defaultNum == '1' ||
          defaultNum == '2' ||
          defaultNum == '5' ||
          defaultNum == '7'
        "
      >
        <el-form-item label="规格" prop="gg" label-width="60px">
          <span>{{ customForm.specification }}</span>
        </el-form-item>
      </el-col>
      <el-col :span="8" v-if="defaultNum != '3'">
        <el-form-item label="型号" prop="xh" label-width="60px">
          <span>{{ customForm.modelType }}</span>
        </el-form-item>
      </el-col>
      <el-col :span="8" v-if="defaultNum == '5'">
        <el-form-item label="材质" prop="xh" label-width="60px">
          <span>{{ extendField.texture }}</span>
        </el-form-item>
      </el-col>
      <el-col :span="8" v-if="defaultNum == '1'">
        <el-form-item label="标准产能" prop="bzcn" label-width="85px">
          <span
            >{{
              extendField.standardCapacity ? extendField.standardCapacity : '-'
            }}/小时</span
          >
        </el-form-item>
      </el-col>
      <el-col :span="8" v-if="defaultNum == '4'">
        <el-form-item label="标准单重" prop="bzcn" label-width="85px">
          <span
            >{{
              extendField.pieceWeight ? extendField.pieceWeight : '-'
            }}KG</span
          >
        </el-form-item>
      </el-col>
      <el-col :span="8" v-if="defaultNum == '4'">
        <el-form-item label="不良品率" prop="bzcn" label-width="85px">
          <span
            >{{
              extendField.unqualifiedRate ? extendField.unqualifiedRate : '-'
            }}%</span
          >
        </el-form-item>
      </el-col>
      <el-col :span="8" v-if="defaultNum == '2'">
        <el-form-item label="角度" prop="bzcn" label-width="60px">
          <span>{{ extendField.angle }}</span>
        </el-form-item>
      </el-col>
      <el-col :span="8" v-if="defaultNum == '2' || defaultNum == '5'">
        <el-form-item label="长" prop="bzcn" label-width="60px">
          <span>{{ extendField.length ? extendField.length : '-' }}mm</span>
        </el-form-item>
      </el-col>
      <el-col :span="8" v-if="defaultNum == '2' || defaultNum == '5'">
        <el-form-item label="宽" prop="bzcn" label-width="60px">
          <span>{{ extendField.width ? extendField.width : '-' }}mm</span>
        </el-form-item>
      </el-col>
      <el-col :span="8" v-if="defaultNum == '2' || defaultNum == '5'">
        <el-form-item label="高" prop="bzcn" label-width="60px">
          <span>{{ extendField.high ? extendField.high : '-' }}mm</span>
        </el-form-item>
      </el-col>
      <el-col :span="8" v-if="defaultNum == '6'">
        <el-form-item label="大模体型号" prop="bzcn" label-width="95px">
          <span>{{ extendField.dieBodyModel }}</span>
        </el-form-item>
      </el-col>
      <el-col :span="8" v-if="defaultNum == '6'">
        <el-form-item label="收缩系数" prop="bzcn" label-width="85px">
          <span>{{ extendField.shrinkageCoefficient }}</span>
        </el-form-item>
      </el-col>
      <el-col :span="8" v-if="defaultNum == '6'">
        <el-form-item label="芯杆数量" prop="bzcn" label-width="85px">
          <span>{{ extendField.mandrelNum }}</span>
        </el-form-item>
      </el-col>
      <el-col :span="8" v-if="defaultNum == '6'">
        <el-form-item label="模孔数量" prop="bzcn" label-width="85px">
          <span>{{ extendField.dieHoleNum }}</span>
        </el-form-item>
      </el-col>
      <el-col :span="8" v-if="defaultNum == '6'">
        <el-form-item label="上冲头数量" prop="bzcn" label-width="95px">
          <span>{{ extendField.upperPunchNum }}</span>
        </el-form-item>
      </el-col>
      <el-col :span="8" v-if="defaultNum == '6'">
        <el-form-item label="下冲头数量" prop="bzcn" label-width="95px">
          <span>{{ extendField.lowerPunchNum }}</span>
        </el-form-item>
      </el-col>
      <el-col :span="8" v-if="defaultNum == '6'">
        <el-form-item label="最大冲压次数" prop="bzcn" label-width="105px">
          <span>{{ extendField.maximumStampingTimes }}</span>
        </el-form-item>
      </el-col>
      <el-col
        :span="8"
        v-for="(item, index) in selfDefinedParameter"
        :key="index"
      >
        <el-form-item>
          <div class="add-col">
            <span class="col-input">{{ item.key }}</span>
            <span class="col-input">{{ item.value }}</span>
          </div>
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>

<script>
  export default {
    props: {
      customForm: {
        type: Object,
        default: {}
      },
      defaultNum: {
        type: String,
        default: '1'
      }
    },
    components: {},
    data () {
      return {
        angleList: [
          { id: 0, value: '非A' },
          { id: 1, value: 'A' }
        ],
        extendField: {},
        selfDefinedParameter: []
      };
    },
    watch: {
      customForm (val) {
        if (val) {
          this.extendField = JSON.parse(val.extendField);
          this.selfDefinedParameter = JSON.parse(val.selfDefinedParameter);
        }
      }
    },
    created () {},
    methods: {}
  };
</script>

<style lang="scss" scoped>
  .row-form {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    border-bottom: 1px dashed #ccc;
    .el-row {
      width: 100%;
    }
    :deep(.el-form-item) {
      margin-bottom: 15px;
    }
    :deep(.row-col) {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      .el-input--medium {
        width: 80%;
        margin-right: 10px;
      }
    }
    .add-col {
      display: flex;
      align-items: center;
      margin-left: 20px;
      .col-input {
        margin-right: 5px;
      }
    }
  }
</style>
