<template>
  <el-form ref="form" >
    <ele-pro-table
      ref="table"
      :needPage="false"
      :columns="columns"
      :toolkit="[]"
      :datasource="form?.datasource"
      cache-key="systemRoleTable17"
      class="time-form"
    >
      <template v-slot:technicalDrawings="scope">
        <el-form-item
          style="margin-bottom: 20px"
          :prop="'datasource.' + scope.$index + '.technicalDrawings'"
        >
          <fileMain
            v-model="scope.row.technicalDrawings"
            type="view"
          ></fileMain>
        </el-form-item>
      </template>
      <template v-slot:customerReqFiles="scope">
        <el-form-item
          style="margin-bottom: 20px"
          :prop="'datasource.' + scope.$index + '.customerReqFiles'"
        >
          <fileMain v-model="scope.row.customerReqFiles" type="view"></fileMain>
        </el-form-item>
      </template>
      <template v-slot:industryArtFiles="scope">
        <el-form-item
          style="margin-bottom: 20px"
          :prop="'datasource.' + scope.$index + '.industryArtFiles'"
          :rules="{
            required: false,
            message: '请输入',
            trigger: 'change'
          }"
        >
          <fileMain v-model="scope.row.customerReqFiles" type="view"></fileMain>
        </el-form-item>
      </template>
      <template v-slot:otherFiles="scope">
        <el-form-item
          style="margin-bottom: 20px"
          :prop="'datasource.' + scope.$index + '. otherFiles'"
        >
          <fileMain v-model="scope.row.otherFiles" type="view"></fileMain>
        </el-form-item>
      </template>
    </ele-pro-table>
  </el-form>
</template>
<script>
  import fileMain from '@/components/addDoc/index.vue';
  import { lbjtList } from '@/enum/dict.js';

  export default {
    components: {
      fileMain
    },
    props: {
      pageName: {
        default: '',
        type: String
      }
    },
    data() {

      return {

        form: {
          datasource: []
        },
       
      };
    },
    computed: {
      columns() {
        return [
          {
            width: 45,
            type: 'index',
            columnKey: 'index',
            align: 'center',
            fixed: 'left'
          },
          {
            width: 250,
            prop: 'productName',
            label: '名称',
            slot: 'productName',
            headerSlot: 'headerProductName',
            align: 'center'
          },
          {
            width: 120,
            prop: 'productCode',
            label: '编码',
            slot: 'productCode',
            align: 'center'
          },

          {
            width: 150,
            prop: 'totalCount',
            label: '数量',
            slot: 'totalCount',
            headerSlot: 'headerTotalCount',
            align: 'center'
          },
          {
            width: 120,
            prop: 'measuringUnit',
            label: '计量单位',
            slot: 'measuringUnit',
            align: 'center'
          },
          {
            width: 100,
            prop: 'availableCountBase',
            label: '库存数量',
            slot: 'availableCountBase',
            align: 'center'
          },
          {
            width: 120,
            prop: 'blockCount',
            label: '块数',
            slot: 'blockCount',
            align: 'center',
            show: this.clientEnvironmentId == '4'
          },
          {
            width: 150,
            prop: 'singlePrice',
            label: '单价',
            slot: 'singlePrice',
            headerSlot: 'headerSinglePrice',
            align: 'center'
          },

          {
            width: 100,
            prop: 'totalPrice',
            label: '合计',
            slot: 'totalPrice',
            align: 'center'
          },

          {
            minWidth: 120,
            prop: 'customerMark',
            label: '客户代号',
            slot: 'customerMark',
            show: this.isCustomerMark,
            align: 'center'
          },
          {
            minWidth: 120,
            prop: 'entrustedEnterpriseId',
            label: '受托企业',
            slot: 'entrustedEnterpriseId',
            show: this.isCustomerMark,
            align: 'center'
          },
          {
            width: 160,
            prop: 'customerExpectDeliveryDeadline',
            label: this.contractBookType == 1 ? '客户期望交期' : '交付日期',
            slot: 'customerExpectDeliveryDeadline',
            headerSlot: 'headerCustomerExpectDeliveryDeadline',
            align: 'center'
          },
          {
            width: 120,
            prop: 'singleWeight',
            label: '单重',
            slot: 'singleWeight',
            // headerSlot: 'headerSingleWeight',
            align: 'center'
          },
          {
            width: 100,
            prop: 'totalWeight',
            label: '总重',
            slot: 'totalWeight',
            align: 'center'
          },
          {
            width: 100,
            prop: 'weightUnit',
            label: '重量单位',
            slot: 'weightUnit',
            align: 'center'
          },
          {
            width: 120,
            prop: 'productCategoryName',
            label: '类型',
            slot: 'productCategoryName',
            align: 'center'
          },
          {
            width: 120,
            prop: 'batchNo',
            label: '批次号',
            slot: 'batchNo',
            align: 'center'
          },
          {
            width: 120,
            prop: 'productBrand',
            label: '牌号',
            slot: 'productBrand',
            align: 'center'
          },
          {
            width: 120,
            prop: 'modelType',
            label: '型号',
            slot: 'modelType',
            align: 'center'
          },
          {
            width: 120,
            prop: 'specification',
            label: '规格',
            slot: 'specification',
            align: 'center'
          },
          {
            width: 120,
            prop: 'imgCode',
            align: 'center',
            label: '图号/件号',
            showOverflowTooltip: true
          },
          {
            width: 120,
            prop: 'produceType',
            align: 'center',
            label: '属性类型',
            showOverflowTooltip: true,
            formatter: (row, column) => {
              if(row.produceType){
                return row.produceType.map(item=>{
                  return lbjtList[item]
                }).toString()
              }
          
            }
          },
          // {
          //   width: 120,
          //   prop: 'approvalNumber',
          //   align: 'center',
          //   label: '批准文号',
          //   showOverflowTooltip: true
          // },
          {
            width: 120,
            prop: 'packingSpecification',
            align: 'center',
            label: '包装规格',
            showOverflowTooltip: true
          },

          {
            width: 160,
            prop: 'produceDeliveryDeadline',
            label: '生产交付交期',
            slot: 'produceDeliveryDeadline',

            show: this.contractBookType == 1 ? true : false,
            align: 'center'
          },

          {
            width: 200,
            prop: 'guaranteePeriod',
            label: '质保期',
            slot: 'guaranteePeriod',
            align: 'center'
          },
          {
            width: 200,
            prop: 'guaranteePeriodDeadline',
            label: '质保期截止日期',
            slot: 'guaranteePeriodDeadline',
            show: this.isGuaranteePeriod,
            align: 'center'
          },

          {
            width: 220,
            prop: 'customerReqFiles',
            label: '客户需求',
            slot: 'customerReqFiles',
            align: 'center'
          },
          {
            width: 130,
            prop: 'technicalAnswerName',
            label: '技术答疑人',
            slot: 'technicalAnswerName',
            align: 'center'
          },
          {
            width: 220,
            prop: 'technicalParams',
            label: '技术参数',
            slot: 'technicalParams',
            align: 'center'
          },
          {
            width: 240,
            prop: 'technicalDrawings',
            label: '技术图纸',
            slot: 'technicalDrawings',
            align: 'center'
          },
          {
            width: 240,
            prop: 'technologyRouteName',
            label: '工艺路线',
            slot: 'technologyRouteName',
            show: this.contractBookType == 1 ? true : false,
            align: 'center'
          },
          {
            width: 240,
            prop: 'industryArtFiles',
            label: '工艺附件',
            slot: 'industryArtFiles',
            align: 'center'
          },
          {
            width: 240,
            prop: 'otherFiles',
            label: '其他附件',
            slot: 'otherFiles',
            align: 'center'
          },
          {
            width: 220,
            prop: 'remark',
            label: '备注',
            slot: 'remark',
            align: 'center'
          },
          {
            columnKey: 'action',
            label: '操作',
            width: 120,
            align: 'center',
            resizable: false,
            slot: 'action',
            fixed: 'right',
            showOverflowTooltip: true
          }
        ];
      }
    },

    methods: {
      // 返回列表数据
      getTableValue() {
        let comitDatasource = this.form.datasource;

        return comitDatasource;
      },

      //修改回显
      async putTableValue(data) {
        let productList = data.redressProductList;
        if (productList) {
          console.log( this.form.datasource,' this.form.datasource')
          this.form.datasource = productList;
        }
      }
    }
  };
</script>
<style lang="scss" scoped>
  .headbox {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .amount {
      font-size: 14px;
      font-weight: bold;
      padding-right: 30px;
    }
  }

  .time-form .el-form-item {
    margin-bottom: 0 !important;
  }

  ::v-deep .period {
    display: flex;

    .borderleftnone {
      .el-input--medium .el-input__inner {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
      }
    }

    .borderrightnone {
      .el-input--medium .el-input__inner {
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
      }
    }
  }

  ::v-deep .time-form tbody > tr:hover > td {
    background-color: transparent !important;
  }

  ::v-deep .time-form .el-table tr {
    background-color: #ffffff;
  }

  .pricebox {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    font-weight: bold;
  }
</style>
