<!-- 用户编辑弹窗 -->
<template>
  <div>
    <div class="ele-body">

      <ele-pro-table ref="table" :needPage="false" :columns="columns" :datasource="datasource" row-key="id">
        <!-- 表头工具栏 -->
        <template v-slot:toolbar>
          <el-button size="small" type="primary" icon="el-icon-plus" class="ele-btn-icon" @click="showAddLog">
            添加工序
          </el-button>
        </template>

        <template v-slot:orderNum="{ row }">

          <el-input v-model="row.orderNum" placeholder="请输入排序"></el-input>

        </template>

        <!-- 操作列 -->
        <template v-slot:action="{ row }">
          <el-link type="primary" :underline="false" icon="el-icon-edit" @click="openEdit(row)">
            修改
          </el-link>
          <!-- <el-link :type="row.id ? 'primary' : 'info'" :underline="false" icon="el-icon-setting"
            @click="openSetting(row)">
            配置工艺参数
          </el-link> -->
          <el-popconfirm class="ele-action" title="删除数据操作立即生效！！！确定要删除当前工序吗？" @confirm="remove(row)">
            <template v-slot:reference>
              <el-link type="danger" :underline="false" icon="el-icon-delete">
                删除
              </el-link>
            </template>
          </el-popconfirm>
        </template>
      </ele-pro-table>



    </div>


    <ele-modal width="1720px" :visible="addDialog" :append-to-body="true" :close-on-click-modal="true"
      @update:visible="closeAdd">
      <Production :tableData="tableData" ref="ProductionCom" />
      <template v-slot:footer>
        <el-button @click="closeAdd">取消</el-button>
        <el-button type="primary" :loading="loading" @click="addParamrter">
          添加
        </el-button>
      </template>
    </ele-modal>
    <!-- 编辑弹窗 -->
    <user-edit :visible.sync="showEdit" :controlList="controlList" :data="current" @done="reload" ref="userEdit" />
    <!-- 配置工艺参数 -->
    <user-setting :visible.sync="showSetting" :data="current" ref="userSetting" />
  </div>
</template>

<script>
import route from '@/api/technology/route';
import Production from './production';
import UserEdit from './production/components/user-edit.vue';
import UserSetting from './production/components/user-setting.vue';
import control from '@/api/technology/control';
export default {
  components: { Production, UserEdit, UserSetting },
  props: {

    // 修改回显的数据
    taskInfo: Object,
    isEdit: Boolean

  },
  data() {
    return {

      // 表格列配置
      columns: [


        {
          prop: 'orderNum',
          label: '排序',
          align: 'center',
          slot: 'orderNum',
          minWidth: 120
        },
        {
          prop: 'code',
          label: '工序编码',
          // sortable: 'custom',
          showOverflowTooltip: true,
          align: 'center',
          minWidth: 110
        },


        {
          prop: 'name',
          label: '工序名称',
          showOverflowTooltip: true,
          align: 'center',
          minWidth: 110
        },
        {
          align: 'center',
          prop: 'controlName',
          label: '工序控制码',
          showOverflowTooltip: true,
          minWidth: 110
        },
        {
          prop: 'workCenterName',
          label: '所属工作中心',
          align: 'center',
          showOverflowTooltip: true,
          minWidth: 110
        },

        {
          columnKey: 'action',
          label: '操作',
          width: 260,
          align: 'center',
          resizable: false,
          slot: 'action',
          showOverflowTooltip: true
        }
      ],

      tableList: [],

      loading: false,
      addDialog: false,
      showSetting: false,
      showEdit: false,
      current: {},
      removeList: [],
      tableData: [],
      controlList: [],

      visible: true,


    };
  },

  methods: {
    addParamrter() {
      // console.log(this.$refs.ProductionCom?.selection);
      let arr = this.$refs.ProductionCom.selection;

      let arrM = arr.map((item, index) => {
        return { ...item.detail };
      });
      arrM.forEach((element) => {
        if (element.id) {
          this.$set(element, 'sourceTaskId', element.id);
          delete element.id;
        }
      });

      this.$refs.table.setData([...arrM, ...this.$refs.table.getData()]);
      this.$emit('taskList', this.$refs.table.getData())
      this.closeAdd();
    },
    showAddLog() {
      this.tableData = this.$refs.table.getData();
      this.addDialog = true;
    },
    /* 打开编辑弹窗 */
    openEdit(row) {
      this.getControlList()
      this.current = row;
      this.showEdit = true;
      this.$refs.userEdit.$refs.form &&
        this.$refs.userEdit.$refs.form.clearValidate();
    },

    getControlList() {
      control.list().then(res => {
        this.controlList = res.list
      })
    },
    /*配置工艺参数 */
    openSetting(row) {
      if (!row.id) {
        this.$message.warning('新增的数据需要保存之后才能配置工艺参数');
        return;
      }
      this.current = row;
      this.showSetting = true;
    },

    /*关闭选择参数*/
    closeAdd() {
      this.$refs.ProductionCom.$refs.table.setSelectedRows([]);
      this.addDialog = false;
    },
    /* 刷新表格 */
    reload() {
      this.$refs.table.reload();
    },
    remove(row) {
      const data = this.$refs.table.getData();
      if(row.id) {
        this.removeList.push(row.id)
      }
   
      this.$refs.table.setData(data.filter((d) => this.isEdit ?  d.id !== row.id : d.sourceTaskId !== row.sourceTaskId));

      this.$emit('taskList', this.$refs.table.getData())
      this.$emit('remove', this.removeList)
    },
    /* 表格数据源 */

    datasource({ page, limit, where, order }) {
      return []
    },

    async getList() {
      this.removeList =[]
      if (this.isEdit) {
        const res = await route.taskinstanceList({
          routingId: this.taskInfo.id,
          isDetail: true,
          pageNum: 1,
          size: -1
        });

        let arr = res.list.map((it) => {
          it.detail.orderNum = it.orderNum

          return it.detail
        });
        this.$refs.table.setData([...arr]);
      }
    },


    getTaskList() {
      this.$emit('taskList', this.$refs.table.getData())
    },

  },


};
</script>

<style lang="scss" scoped>
.btn_box {
  width: 100%;
  margin-top: 10px;



}
</style>
