<template>
  <el-dialog title="选择工艺路线" :visible.sync="equipmentdialog" :before-close="handleClose" :close-on-click-modal="true"
    :close-on-press-escape="false" append-to-body width="80%">
    <div>
      <el-row>
        <el-form label-width="120px" class="ele-form-search" @keyup.enter.native="search" @submit.native.prevent>
          <el-row>
            <el-col v-bind="styleResponsive ? { lg: 8, md: 12 } : { span: 6 }">
              <el-form-item label="工艺路线组编码:">
                <el-input clearable v-model.trim="where.code" placeholder="请输入" />
              </el-form-item>
            </el-col>
            <el-col v-bind="styleResponsive ? { lg: 8, md: 12 } : { span: 6 }">
              <el-form-item label="工艺路线名称:">
                <el-input clearable v-model.trim="where.name" placeholder="请输入" />
              </el-form-item>
            </el-col>
            <!-- <el-col v-bind="styleResponsive ? { lg: 6, md: 12 } : { span: 6 }">
              <el-form-item label="生产版本:">
                <el-select v-model.trim="where.produceVersionId" filterable placeholder="请选择"
                  :style="{ width: '100%' }">
                  <el-option v-for="item in versionList" :key="item.code" :label="item.code + '-' + item.name"
                    :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col> -->
            <el-col v-bind="styleResponsive ? { lg: 8, md: 12 } : { span: 6 }">
              <el-form-item label="状态:" label-width="70px">
                <el-select v-model.trim="where.status" filterable placeholder="请选择" style="width: 100%">
                  <el-option v-for="item in statusList" :key="item.value" :label="item.label" :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col v-bind="styleResponsive ? { lg: 8, md: 12 } : { span: 6 }">
              <el-form-item label="组织机构:">
                <auth-selection v-model.trim="where.deptIds" style="width: 100%"></auth-selection>
              </el-form-item>
            </el-col>
            <el-col v-bind="styleResponsive ? { lg: 6, md: 12 } : { span: 6 }">
              <div class="ele-form-actions">
                <el-button type="primary" icon="el-icon-search" class="ele-btn-icon" @click="search">
                  查询
                </el-button>
                <el-button @click="reset">重置</el-button>
              </div>
            </el-col>
          </el-row>
        </el-form>
        <el-col :span="24" class="table_col">
          <ele-pro-table ref="equiTable" :columns="columns" highlight-current-row :datasource="datasource"
            :selection.sync="selection" :current.sync="current" :pagination="pagination" @select="handleSelect"
            cache-key="systemRoleTable3" row-key="id" height="50vh" @done="setSelect">
          </ele-pro-table>
        </el-col>
      </el-row>
    </div>
    <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>
import { getList, produceroutingPage } from '@/api/classifyManage/itemInformation';
export default {
  props: {
    selectList: Array,
    type: {
      default: 1 //1多选 2单选
    }
  },
  data() {
    const defaultWhere = {
      code: '',
      name: '',
      status: 1,
      produceVersionId: ''
    };
    return {
      equipmentdialog: false,
      current: null,
      // 搜索
      where: { ...defaultWhere },
      statusList: [
        { label: '草稿', value: -1 },
        { label: '失效', value: 0 },
        { label: '生效', value: 1 }
      ],
      pagination: {
        pageSize: 20,
        currentPage: 1,
        pageSizes: [10, 20, 50, 100],
      },


      versionList: [],

      columns: [
        {
          width: 45,
          type: 'selection',
          columnKey: 'selection',
          align: 'center',
          reserveSelection: true,
          show: this.type == 1
        },

        {
          prop: 'code',
          label: '工艺路线组编码',
          showOverflowTooltip: true,
          align: 'center',
          minWidth: 110,
          slot: 'code',
        },
        {
          prop: 'name',
          label: '工艺路线名称',
          showOverflowTooltip: true,
          align: 'center',
          minWidth: 110
        },


        {
          prop: 'version',
          label: '工艺路线版本',
          align: 'center',
          showOverflowTooltip: true,
          minWidth: 110
        },

        {
          prop: 'produceVersionName',
          label: '工艺类型',
          align: 'center',
          showOverflowTooltip: true
        },

        {
          prop: 'status',
          label: '状态',
          align: 'center',
          slot: 'status',
          showOverflowTooltip: true,
          minWidth: 110
        },

        {
          slot: 'routeType',
          label: '类型',
          align: 'center',
          showOverflowTooltip: true
        },

        {
          slot: 'factoryName',
          label: '所属工厂',
          align: 'center',
          showOverflowTooltip: true
        },






      ],
      tableList: [],
      categoryLevelId: null,
      code: null,
      searchKey: '',
      selection: []
    };
  },
  computed: {
    // 是否开启响应式布局
    styleResponsive() {
      return this.$store.state.theme.styleResponsive;
    }
  },
  watch: {},
  methods: {
    async datasource({ page, limit }) {

      const params = {
        ...this.where,
        pageNum: page,
        size: 20,
      };
      const data = await produceroutingPage(params);
      this.tableList = data.list;

      this.$refs.equiTable.setData(data.list);
      return data;
    },
    open() {
      this.equipmentdialog = true;
      this.setSelect();
    },
    handleNodeClick(data) {
      this.categoryLevelId = data.id;
      this.reload();
    },
    reload() {
      this.where = { ...this.defaultWhere }
      this.search();
    },

    search() {
      this.datasource({ page: 1, limit: 20 })

    },


    handleClose() {
      this.equipmentdialog = false;
      this.code = '';
      this.$refs.equiTable.clearSelection();
    },
    reset() {
      this.code = null;
      this.reload();
    },
    // 设置选中
    setSelect() {
      // this.$nextTick(() => {
      //   this.tableList.forEach((row) => {
      //     this.selectList?.forEach((selected, index) => {
      //       if (selected.productCode === row.code) {
      //         this.$refs.equiTable.toggleRowSelection(row, true);
      //       }
      //     });
      //   });
      // });
    },
    // 取消选中
    handleSelect(selection, row) {
      this.$refs.equiTable.clearSelection();
      this.$refs.equiTable.toggleRowSelection(row, true);
      // if (!selection.find((i) => i.id === row.id)) {
      //   const index = this.selectList.findIndex(
      //     (itm) => row.code == itm.productCode
      //   );
      //   console.log(index);
      //   if (index > -1) {
      //     this.selectList.splice(index, 1);
      //   }
      // }
    },
    // 选择
    selected() {
      let list = this.type == 1 ? this.selection : [this.current]
      this.$emit('choose', JSON.parse(JSON.stringify(list)));
      this.handleClose();
    }
  }
};
</script>

<style lang="scss" scoped>
.tree_col {
  border: 1px solid #eee;
  padding: 10px 0;
  box-sizing: border-box;
  max-height: 530px;
  overflow: auto;
}

.table_col {
  padding-left: 10px;

  ::v-deep .el-table th.el-table__cell {
    background: #f2f2f2;
  }
}

.ele-form-actions {
  margin-left: 20px;
}

.pagination {
  text-align: right;
  padding: 10px 0;
}

.btns {
  text-align: center;
  padding: 10px 0;
}

.topsearch {
  margin-bottom: 15px;
}
</style>
