<template>
  <el-form ref="form" :model="form" :rules="rules">
    <ele-pro-table
      ref="table"
      :needPage="false"
      :columns="columns"
      :datasource="form.datasource"
      class="time-form"
      max-height="300"
      :cache-key="cacheKeyUrl"
    >
      <template v-slot:toolbar>
        <div class="headbox">
          <div>
            <el-button
              size="small"
              type="primary"
              icon="el-icon-plus"
              class="ele-btn-icon"
              @click="handParent('')"
              >选择</el-button
            >
          </div>
        </div>
      </template>
    </ele-pro-table>

    <EquipmentDialog
      ref="equipmentRefs"
      @choose="handleMainChoose"
      :type="2"
      :treeIds="['9']"
    />
  </el-form>
</template>

<script>
  import dictMixins from '@/mixins/dictMixins';
  import EquipmentDialog from './equipmentDialog';
  import { getCode } from '@/api/login';
  export default {
    mixins: [dictMixins],
    components: {
      EquipmentDialog
    },

    props: {
      dataList: {
        type: Array,
        default: () => []
      }
    },
    data() {
      return {
        form: {
          datasource: this.dataList,
          discountTotalPrice: 0
        },
        rules: {},
        cacheKeyUrl: ''
      };
    },

    computed: {
      columns() {
        return [
          {
            label: '样品编码',
            prop: 'sampleCode',
            width: '150',
            align: 'center'
          },
          {
            label: '编码',
            prop: 'categoryCode',
            width: '150',
            align: 'center'
          },
          {
            label: '名称',
            prop: 'categoryName',
            width: '150',
            align: 'center'
          },
          {
            label: '规格',
            prop: 'specification',
            width: '150',
            align: 'center'
          },
          {
            label: '牌号',
            prop: 'brandNum',
            width: '150',
            align: 'center'
          },
          {
            prop: 'modelType',
            label: '型号',
            align: 'center',
            width: '150'
          },
          {
            prop: 'batchNo',
            label: '批次号',
            align: 'center',
            width: '150'
          },
          {
            prop: 'weight',
            label: '重量',
            align: 'center',
            width: '150'
          },
          {
            prop: 'weightUnit',
            label: '重量单位',
            align: 'center',
            width: '150'
          },
          {
            prop: 'disposeTime',
            label: '处置时间',
            align: 'center',
            width: '180'
          }
          // { label: '批次号', prop: 'batchNo', align: 'center', width: 120 },
          // { label: '发货条码', prop: 'barcodes', align: 'center' },
          // { label: '包装编码', prop: 'packageNo', align: 'center' },
          // { label: '计量数量', prop: 'measureQuantity', align: 'center' },
          // { label: '计量单位', prop: 'measureUnit', align: 'center' },
          // { label: '物料代号', prop: 'materielDesignation', align: 'center' },
          // { label: '客户代号', prop: 'clientCode', align: 'center' },
          // { label: '刻码', prop: 'engrave', align: 'center' },
          // { prop: 'specification', label: '规格', align: 'center', width: 100, showOverflowTooltip: true },
          // { prop: 'brandNum', label: '牌号', align: 'center', width: 100, showOverflowTooltip: true },
          // { prop: 'modelType', label: '型号', align: 'center', width: 100, showOverflowTooltip: true },
          // { label: '重量', prop: 'weight', align: 'center' },
          // { label: '重量单位', prop: 'weightUnit', align: 'center' },
          // { label: '仓库', prop: 'warehouseName', align: 'center' },
          // { label: '货区', prop: 'areaName', align: 'center' },
          // { label: '货架', prop: 'goodsShelfName', align: 'center' },
          // { label: '货位', prop: 'goodsAllocationName', align: 'center' },
          // { label: '生产日期', prop: 'productionDate', align: 'center' },
          // { label: '采购日期', prop: 'purchaseDate', align: 'center' }
        ];
      }
    },
    methods: {
      handParent() {
        this.$refs.equipmentRefs.open();
      },

      async handleMainChoose(val) {
        console.log(val, '主数据根据来源得到产品');
        if (!val) return;
        const newData = {};
        this.form.datasource = [];
        val.sampleCode = await this.getSampleCode();
        newData.sampleCode = val.sampleCode;
        newData.categoryId = val.id;
        newData.categoryCode = val.code;
        newData.categoryName = val.name;
        newData.batchNo = val.batchNo;
        newData.brandNum = val.brandNum;
        newData.measureUnit = val.measuringUnit;
        newData.weight = val.netWeight;
        newData.weightUnit = val.weightUnit;
        newData.specification = val.specification;
        newData.modelType = val.modelType;
        this.form.datasource.push(newData);

        this.$emit('changesMainNumberModal', this.form.productNumber, newData);
      },

      getProductDetails(productId) {},

      async getSampleCode() {
        return await getCode('sample_code');
      }
    },
    watch: {
      dataList: {
        handler(newVal, oldVal) {
          this.form.datasource = this.dataList;
          console.log(this.form.datasource);

          // console.log(newVal,oldVal);
        }
      }
    }
  };
</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>
