<template>
  <el-dialog
    title="选择物品清单"
    :visible.sync="visible"
    v-if="visible"
    :before-close="handleClose"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    append-to-body
    width="75%"
  >
    <ele-pro-table
      ref="table"
      :columns="columns"
      :datasource="allList"
      :selection.sync="selection"
      row-key="id"
      height="calc(100vh - 450px)"
      :cache-key="tableKey"
      :row-click-checked="true"
      :row-click-checked-intelligent="false"
      @update:selection="handleSelectionChange"
      :pageSize="20"
    >
      <!-- <template v-slot:engrave="{ row, $index }">
        <el-input size="mini" v-model="row.engrave" @click.native.stop />
      </template> -->
    </ele-pro-table>

    <div class="btns">
      <el-button type="primary" size="small" @click="selected">选择</el-button>
      <el-button size="small" @click="handleClose">关闭</el-button>
    </div>
  </el-dialog>
</template>

<script>
  export default {
    data() {
      return {
        visible: false,
        allSelection: [],
        allList: [],
        selection: [],
        tableKey: 'batchChooseGoodsKey',
        itemData: {},
        index: '',
        clientEnvironmentId: this.$store.state.user.info.clientEnvironmentId
      };
    },

    computed: {
      columns() {
        return [
          {
            width: 45,
            type: 'selection',
            columnKey: 'selection',
            align: 'center',
            reserveSelection: true
          },
          {
            columnKey: 'index',
            label: '序号',
            type: 'index',
            width: 50,
            align: 'center'
          },
          {
            prop: 'categoryCode',
            label: '编码',
            showOverflowTooltip: true
          },
          {
            prop: 'name',
            label: '名称',
            showOverflowTooltip: true
          },
          {
            prop: 'extInfo.engrave',
            label: '刻码',
            slot: 'extInfo.engrave',
            showOverflowTooltip: true,
            show: this.itemData.singleReport == 1 ? true : false
          },
          {
            prop: 'modelType',
            label: '型号',
            showOverflowTooltip: true
          },
          {
            prop: 'specification',
            label: '规格',
            showOverflowTooltip: true
          },
          {
            prop: 'brandNum',
            label: '牌号',
            showOverflowTooltip: true
          },
          {
            prop: 'feedQuantity',
            label: '数量',
            showOverflowTooltip: true
          }
        ];
      }
    },

    methods: {
      handleClose() {
        this.visible = false;
      },

      open(item, allList, list, index) {
        this.visible = true;

        this.allSelection = list || [];
        this.index = index;
        this.itemData = item;

        const mySelectedIds = new Set(this.allSelection.map((it) => it.id));

        console.log(allList, list, 'this.allList12');

        this.allList = allList.filter((it) => {
          if (mySelectedIds.has(it.id)) return true;

          return !it.selected;
        });

        console.log(this.allList, list, 'this.allList34');

        this.$nextTick(() => {
          this.$refs.table.clearSelection();

          this.allSelection.forEach((sel) => {
            const row = this.allList.find((it) => it.id === sel.id);
            if (row) {
              this.$refs.table.toggleRowSelection(row, true);
            }
          });
        });
      },

      handleSelectionChange(list) {
        this.allSelection = list;
      },

      selected() {
        if (this.allSelection.length == 0) {
          return this.$message.warning('请至少选择一条数据');
        }

        this.allSelection = this.allSelection.map((item) => {
          item.selected = true;
          return item;
        });

        this.$emit('chooseData', this.allSelection, this.index);
        this.handleClose();
      }
    }
  };
</script>

<style scoped>
  .btns {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    padding: 10px 0;
  }
</style>
