<template>
  <div class="ele-body">
    <el-card shadow="never">


      <!-- 数据表格 -->
      <ele-pro-table ref="table" :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="openEdit()">
            添加工序
          </el-button>

        </template>


        <!-- 展开内容 -->
        <template v-slot:expand="{ row, $index }">

          <div style="width:100%; min-height: 60px" v-if="row.produceList">
            <ele-pro-table :toolbar="false" toolsTheme="none" ref="table2" :need-page="false"
              :datasource="row.produceList" :columns="columns2" :key="row.code + '-' + $index">



              <template v-slot:sort="{ row }">
                <el-input v-model="row.sort"></el-input>
              </template>

              <!-- 默认值 -->
              <template v-slot:defaultValue="{ row }">


                <el-input v-if="row.textType == 1 || row.textType == 4 || row.textType == 5" v-model="row.defaultValue"
                  placeholder="请输入"></el-input>
                <el-select v-if="row.textType == 2" v-model="row.defaultValue" placeholder="请选择">
                  <el-option label="TRUE" :value="'TRUE'" />
                  <el-option label="FALSE" :value="'FALSE'" />
                </el-select>

              </template>

              <!-- 上限 -->
              <template v-slot:maxValue="{ row }">
                <el-input v-if="row.textType == 3" v-model="row.maxValue" placeholder="请输入"></el-input>
              </template>
              <!-- 下限 -->
              <template v-slot:minValue="{ row }">
                <el-input v-if="row.textType == 3" v-model="row.minValue" placeholder="请输入"></el-input>
              </template>

              <!-- 单位 -->
              <template v-slot:unitName="{ row }">
                <DictSelection v-if="row.textType != 2" dictName="工艺参数单位" clearable filterable v-model="row.unitName">
                </DictSelection>
              </template>



              <!-- 操作列 -->
              <template v-slot:action="{ row }">
                <el-popconfirm class="ele-action" title="确定要删除当前参数吗？" @confirm="remove2(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>
        </template>


        <!-- 操作列 -->
        <template v-slot:action="{ row }">
          <el-link type="primary" :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>
    </el-card>

    <ProcessModal ref="processModalRef" @chooseProcess="chooseProcess"></ProcessModal>

    <ParamModal ref="paramRefs" @chooseModal="chooseModal"></ParamModal>
  </div>
</template>
  
<script>



import ProcessModal from './processModal.vue'
import ParamModal from './ParamModal.vue'

export default {
  name: 'process',
  components: {
    ProcessModal,
    ParamModal
  },
  props: {
    taskParam: Array
  },
  data() {
    return {
      // 表格列配置
      columns: [
        {
          width: 45,
          type: 'expand',
          columnKey: 'produceList',
          align: 'center',
          slot: 'expand'
        },
        {

          prop: 'code',
          label: '工序编码',
          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
        }
      ],

      // 表格列配置
      columns2: [

        {
          prop: 'sort',
          slot: 'sort',
          label: '排序',
          minWidth: 60
        },
        {
          prop: 'code',
          label: '参数编码',
          showOverflowTooltip: true,
          align: 'center',
          minWidth: 110
        },


        {
          prop: 'name',
          label: '参数名称',
          showOverflowTooltip: true,
          align: 'center',
          minWidth: 110
        },
        {
          align: 'center',
          prop: 'description',
          label: '文本描述',
          showOverflowTooltip: true,
          minWidth: 110
        },

        {
          prop: 'maxValue',
          slot: 'maxValue',
          label: '参数上限',
          align: 'center',

        },
        {
          prop: 'minValue',
          slot: 'minValue',
          label: '参数下限',
          align: 'center',

        },
        {
          prop: 'defaultValue',
          slot: 'defaultValue',
          label: '默认值',
          align: 'center',

        },

        {
          prop: 'unitName',
          slot: 'unitName',
          label: '参数单位',
          align: 'center',
          showOverflowTooltip: true
        },


        {
          columnKey: 'action',
          label: '操作',

          align: 'center',
          resizable: false,
          slot: 'action',
          showOverflowTooltip: true
        }
      ],

      processData: [],

      removeList: [],


    };
  },
  methods: {
    /*配置工艺参数 */
    openSetting(row) {
      this.current = row;
      this.$refs.paramRefs.open(row.produceList, this.current)
    },

    /* 表格数据源 */
    datasource({ page, limit, where }) {
      return []
    },


    openEdit() {
      let tableList = []
      tableList = this.$refs.table.getData()

      this.$refs.processModalRef.open(tableList)
    },

    chooseProcess(data) {

      let _arr = [...data, ...this.$refs.table.getData()]
      this.$refs.table.setData([...data, ...this.$refs.table.getData()]);


      this.$emit('chooseProcess', _arr)



    },

    chooseModal(data, current) {

      data.map((m => {
        m.parentId = current.id
        return {
          ...m,
        }
      }))

      let tableList = []
      let clonedArray = []
      tableList = this.$refs.table.getData()


      clonedArray = JSON.parse(JSON.stringify(tableList));

      clonedArray.forEach(e => {
        if (e.id == current.id) {
          if(e.hasOwnProperty('produceList')) {
            e.produceList = [...e.produceList, ...data] 
          } else {
            e.produceList = [ ...data] 
          }
      

        }
      })


      this.$refs.table.setData([...clonedArray]);
      this.$emit('chooseProcess', clonedArray)

      this.$nextTick(() => {
          this.$refs.table.toggleRowExpansionAll()
          this.$forceUpdate()
        })
    },


    /* 删除 */
    remove(row) {
      const data = this.$refs.table.getData() ?? [];
      if (row.id) {
        this.removeList.push(row.id);
        this.$refs.table.setData(data.filter((d) => d.id !== row.id));
      }

      this.$emit('chooseProcess', this.$refs.table.getData())
    },


    remove2(row) {

      const data = this.$refs.table.getData() ?? [];
      data.forEach((e) => {
        if (row.parentId == e.id) {
          e.produceList = e.produceList.filter((d) => d.id !== row.id);
        }
      })

      this.$refs.table.setData([...data])
      this.$emit('chooseProcess', data)
      this.$forceUpdate()
    }

  },

  watch: {
    async taskParam(list) {
      if (list) {
        this.$refs.table.setData(list)

      }
    }
  }
};
</script>
  