<template>
    <div>
    <headerTitle title="关联产品" ></headerTitle>
    <ele-pro-table ref="table" :needPage="false" :columns="columns" :datasource="datasource" class="time-form"
      :toolkit="[]">
      <!-- 表头工具栏 -->
      <template v-slot:toolbar>
        <el-button
              size="small"
              type="primary"
              icon="el-icon-plus"
              class="ele-btn-icon"
              @click="handParent('', -1)"
            >
              新增
            </el-button>
      </template>
      <!-- 操作列 -->
      <template v-slot:action="scope">
        <el-popconfirm  class="ele-action" title="确定要删除吗？" @confirm="remove(scope.$index)">
          <template v-slot:reference>
            <el-link type="danger" :underline="false" icon="el-icon-delete">
              删除
            </el-link>
          </template>
        </el-popconfirm>
      </template>
    </ele-pro-table>

    <product-list
      ref="productListRef"
      classType="1"
      :is-get-inventory-total="true"
      @changeParent="changeParent"
    
    ></product-list>
</div>
</template>

<script>
  import productList from '@/BIZComponents/product-list.vue';
 
  export default {

    components:{
        productList
    },
    data() {
        return {
            datasource: [],
            columns: [
            {
            width: 50,
            label: '序号',
            type: 'index',
            columnKey: 'index',
            align: 'center',
            fixed: 'left'
          },
          {
            prop: 'productCategoryName',
            label: '类型',
            slot: 'productCategoryName',
            align: 'center'
          },
          {
            prop: 'productCode',
            label: '编码',
            slot: 'productCode',
            align: 'center'
          },
          {
            prop: 'productName',
            label: '名称',
            slot: 'productName',
            headerSlot: 'headerProductName',
            align: 'center',
            fixed: 'left'
          },
          {
            prop: 'specification',
            label: '规格',
            slot: 'specification',
            align: 'center'
          },
          {
            prop: 'productBrand',
            label: '牌号',
            slot: 'productBrand',
            align: 'center'
          },
          {
            prop: 'modelType',
            label: '型号',
            slot: 'modelType',
            align: 'center'
          },
          {
          columnKey: 'action',
          label: '操作',
          width: 80,
          align: 'left',
          resizable: false,
          slot: 'action',
          showOverflowTooltip: true
        }]
        }
    },
    methods:{
      //选择产品回调
      changeParent(obj, idx) {
        obj.forEach((item, index) => {
          let i = idx == -1 ? index : idx;
          let row = {};
          row.key = this.datasource.length + 1;
          let parasm = idx == -1 ? row : this.datasource[i];
          this.$set(parasm, 'productId', item.id);
          this.$set(parasm, 'productCategoryId', item.categoryLevelId);
          this.$set(parasm, 'productCategoryName', item.categoryLevelPath);
          this.$set(parasm, 'productCode', item.code);
          this.$set(parasm, 'productName', item.name);
          this.$set(parasm, 'specification', item.specification);
          this.$set(parasm, 'productBrand', item.brandNum);
          this.$set(parasm, 'modelType', item.modelType);
          if (idx == -1) {
            this.datasource.push(row);
          }
        });
      },

      //选择产品
      handParent() {
        this.$refs.productListRef.open('',-1);
      },
      //删除选中产品
      remove(index) {
        this.datasource.splice(index, 1);
        this.setSort();
      },

      // 重新排序
      setSort() {
        this.datasource.forEach((n, index) => {
          n.key = index + 1;
        });
      },

      // 初始化数据
      initData() {
        this.datasource = [];
      },

      // 返回列表数据
      getTableValue() {
        let comitDatasource = this.datasource;
        if (comitDatasource.length === 0) return [];
        return comitDatasource;
      },

      //修改回显
      putTableValue(data) {
        this.datasource = data;
      }
    }
  }
</script>