<template>
  <ele-modal
    width="70vw"
    :visible.sync="visible"
    :close-on-click-modal="true"
    append-to-body
    custom-class="ele-dialog-form"
    title="选择工艺路线"
  >
    <el-form label-width="120px">
      <el-row>
        <el-col :span="6">
          <el-form-item label="工艺路线编码" prop="routingCode">
            <el-input v-model="searchData.routingCode"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="工艺路线名称" prop="routingName">
            <el-input v-model="searchData.routingName"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="工艺路线版本" prop="routingVersion">
            <el-input v-model="searchData.routingVersion"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="工序编号" prop="taskInstanceCode">
            <el-input v-model="searchData.taskInstanceCode"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="工序名称" prop="taskInstanceName">
            <el-input v-model="searchData.taskInstanceName"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="产品编码" prop="categoryCode">
            <el-input v-model="searchData.categoryCode"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="产品名称" prop="categoryName">
            <el-input v-model="searchData.categoryName"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <div class="ele-form-actions">
            <el-button type="primary" @click="search">搜索</el-button>
            <el-button @click="reset">重置</el-button>
          </div>
        </el-col>
      </el-row>
    </el-form>

    <ele-pro-table
      :columns="columns"
      :datasource="datasource"
      :selection.sync="selection"
      ref="table"
      height="45vh"
      :initLoad="false"
      row-key="id"
    ></ele-pro-table>

    <div slot="footer">
      <el-button type="primary" @click="confirm">确定</el-button>
      <el-button @click="cancel">返回</el-button>
    </div>
  </ele-modal>
</template>

<script>
  import { getProduceList } from '@/api/factoryModel';
  export default {
    data () {
      return {
        visible: false,
        isUpdate: false,
        selection: [],
        searchData: {
          routingCode: '',
          routingName: '',
          routingVersion: '',
          taskInstanceCode: '',
          taskInstanceName: '',
          categoryCode: '',
          categoryName: ''
        },
        columns: [
          {
            columnKey: 'selection',
            type: 'selection',
            width: 45,
            align: 'center',
            reserveSelection: true
          },
          {
            label: '工艺路线编码',
            prop: 'routingCode'
          },
          {
            label: '工艺路线名称',
            prop: 'routingName'
          },
          {
            label: '工艺路线版本',
            prop: 'routingVersion'
          },
          {
            label: '工序编号',
            prop: 'taskInstanceCode'
          },
          {
            label: '工序组名称',
            prop: 'taskInstanceName'
          },
          {
            label: '产品编码',
            prop: 'categoryCode'
          },
          {
            label: '产品名称',
            prop: 'categoryName'
          }
        ],
        memo: []
      };
    },
    methods: {
      open (memo) {
        this.memo = memo.slice(0);

        this.visible = true;
        this.$nextTick(() => {
          this.$refs.table.reload();
        });
      },
      datasource ({ page, limit }) {
        return getProduceList({
          pageNum: page,
          size: limit,
          ...this.searchData
        }).then((res) => {
          if (this.memo.length) {
            this.$nextTick(() => {
              const items = res.list.filter((i) => {
                const index = this.memo.findIndex((p) => p == i.id);
                if (index > -1) {
                  this.memo.splice(index, 1);
                  return true;
                }
                return false;
              });
              if (items?.length) {
                this.$refs.table.setSelectedRows(items);
              }
            });
          }
          return res;
        });
      },
      cancel () {
        this.$refs.table.clearSelection();
        this.searchData = {};
        this.visible = false;
      },
      confirm () {
        if (!this.selection?.length) {
          return this.$message.error('请选择数据');
        }

        this.$emit('success', this.selection);

        this.cancel();
      },
      search () {
        this.$refs.table.reload();
      },
      reset () {
        this.searchData = {};
        this.$refs.table.reload();
      }
    }
  };
</script>
