<template>
  <div class="subprocesstrigger">
    <div class="left">
      <el-row :gutter="10">
        <el-col :span="5">
          <el-scrollbar class="left_tree_wrapper">
            <el-tree
              :props="props"
              ref="asyncTree"
              node-key="id"
              :data="treelist"
              default-expand-all
              :expand-on-click-node="false"
              class="filter-tree elTree"
            >
              <div slot-scope="{ node, data }" class="custom-tree-node">
                <p
                  class="grow"
                  :title="node.label"
                  @click="nodeClick(node, data)"
                >
                  {{ node.label }}
                </p>
              </div>
            </el-tree>
          </el-scrollbar>
        </el-col>
        <el-col :span="19">
          <el-scrollbar class="left_tree_wrapper">
            <el-form :model="form">
              <el-form-item label="逻辑判断:">
                <el-radio-group v-model="subform.comtype" disabled>
                  <el-radio label="Y"
                    >满足<span style="color:#ea3c40"> 所有 </span
                    >条件或者子组合</el-radio
                  >
                  <el-radio label="N"
                    >满足<span style="color:#ea3c40"> 任一 </span>
                    条件或者子组合</el-radio
                  >
                </el-radio-group>
              </el-form-item>
            </el-form>
            <el-table
              v-loading="loading"
              :data="content"
              class="margin-t10"
              v-if="childProcessInfo.type !== 'gatewayNetwork'"
              stripe
              border
              :header-cell-style="{ background: '#E1EAFD !important' }"
              highlight-current-row
            >
              <el-table-column
                label="触发条件"
                show-overflow-tooltip
                prop="formfield"
              >
                <!-- <template slot-scope="scope">
                  <el-input clearable v-model="scope.row.formfield"> </el-input>
                </template> -->
              </el-table-column>
              <el-table-column
                label="条件类型"
                show-overflow-tooltip
                prop="callordername"
              >
                <template slot-scope="scope">
                  <el-select clearable v-model="scope.row.result" disabled>
                    <el-option
                      v-for="item in tjoptions"
                      :key="item.value"
                      :label="item.text"
                      :value="item.value"
                    >
                    </el-option>
                  </el-select>
                </template>
              </el-table-column>
              <el-table-column
                label="条件结果"
                show-overflow-tooltip
                prop="conditionresult"
              >
                <!-- <template slot-scope="scope">
                  <el-input clearable v-model="scope.row.conditionresult">
                  </el-input>
                </template> -->
              </el-table-column>
              <el-table-column
                label="子流程名称"
                show-overflow-tooltip
                prop="processrefername"
              >
                <!-- <template slot-scope="scope">
                  <el-select
                    clearable
                    v-model="scope.row.processrefername"
                    value-key="id"
                    @change="chageProcessname($event, scope.row)"
                  >
                    <el-option
                      v-for="item in subProcessoptin"
                      :key="item.id"
                      :label="item.activityname"
                      :value="item"
                    >
                    </el-option>
                  </el-select>
                </template> -->
              </el-table-column>
              <el-table-column
                label="循环发起"
                show-overflow-tooltip
                prop="notificationmode"
              >
                <!-- <template slot-scope="scope">
                  <el-input disabled v-model="scope.row.notificationmode">
                  </el-input>
                </template> -->
              </el-table-column>
              <el-table-column
                label="控制字段"
                show-overflow-tooltip
                prop="controlfield"
              >
                <!-- <template slot-scope="scope">
                  <el-input clearable v-model="scope.row.controlfield">
                  </el-input>
                </template> -->
              </el-table-column>
              <el-table-column label="操作" width="120">
                <template slot-scope="scope">
                  <el-tooltip content="查看">
                    <el-button type="text" @click="editItem(scope.row, scope)"
                      >查看</el-button
                    >
                  </el-tooltip>
                </template>
              </el-table-column>
            </el-table>
            <el-table
              :data="content"
              class="margin-t10"
              v-if="childProcessInfo.type === 'gatewayNetwork'"
              stripe
              :header-cell-style="{ background: '#E1EAFD !important' }"
              highlight-current-row
            >
              <el-table-column
                label="子流程名称"
                show-overflow-tooltip
                prop="requestmethod"
                disabled
              >
                <template slot-scope="scope">
                  <el-select
                    clearable
                    v-model="scope.row.processrefername"
                    value-key="id"
                    @change="chageProcessname($event, scope.row)"
                    disabled
                  >
                    <el-option
                      v-for="item in subProcessoptin"
                      :key="item.id"
                      :label="item.activityname"
                      :value="item"
                    >
                    </el-option>
                  </el-select>
                </template>
              </el-table-column>
              <el-table-column
                label="是否循环发起"
                show-overflow-tooltip
                prop="notificationmode"
              >
                <!-- <template slot-scope="scope">
                  <el-input disabled v-model="scope.row.notificationmode">
                  </el-input>
                </template> -->
              </el-table-column>
              <el-table-column
                label="完成率%"
                disabled
                show-overflow-tooltip
                prop="percentofcomplete"
              >
                <!-- <template slot-scope="scope">
                  <el-input clearable v-model="scope.row.percentofcomplete">
                  </el-input>
                </template> -->
              </el-table-column>
              <el-table-column label="操作" width="120">
                <template slot-scope="scope">
                  <el-tooltip content="查看">
                    <el-button type="text" @click="editItem(scope.row, scope)"
                      >查看</el-button
                    >
                  </el-tooltip>
                </template>
              </el-table-column>
            </el-table>
            <div class="footer">
              <!-- <el-button type="primary">
                添加规则
              </el-button>
              <el-button type="primary">
                提交
              </el-button> -->
            </div>
          </el-scrollbar>
        </el-col>
      </el-row>
    </div>
    <configralestion
      @confim="handleconfim"
      v-if="isshow"
      :rightList="rightList"
      :datalist="datalist"
      :relation="relationList"
      ref="configralestion"
      v-model="configdialogVisible"
    />
  </div>
</template>

<script>
import {
  getListByPid,
  loaddragform,
  getConditionList,
  getDictionaryOption
} from '../../../api/childProcessDialog'
import configralestion from './configralestion.vue'
export default {
  name: 'subProcessTrigger',
  components: {
    configralestion
  },
  data() {
    return {
      loading: false,
      isshow: false,
      relationList: [],
      checkconnect: '',
      checkindex: '',
      rightdatalist: [],
      CheckNode: '', //当前选中的组合id
      editid: '', // 编辑的时候的id
      subProcessoptin: [],
      options: [],
      tjoptions: [],
      subform: {
        comtype: 'Y',
        resource: '1'
      },
      leftList: [],
      leftList2: [],
      rightList2: [],
      rightList: [],
      content: [],
      configdialogVisible: false,
      form: { name: '' },
      datalist: {},
      treelist: [
        {
          name: '根组合',
          id: '',
          children: []
        }
      ],
      props: {
        label: 'name'
      }
    }
  },
  props: {
    processinfoid: {
      type: String
    },
    treeData: {
      type: Object
    },
    childProcessInfo: {
      type: Object
    },
  },
  created() {
    this.getListByPid()
    this.treelist[0].id = this.treeData.id
    // this.getloaddragform()
    this.getDictionaryOptionlist()
    this.getConditionList()
  },
  methods: {
    handleconfim(val) {
      this.content[this.checkindex].subprocessRelationDtoList = val
      // this.content[this.checkindex].subprocessRelationDtoList.forEach(item => {
      //   this.$set(item, 'id', this.checkconnect.row.id)
      //   this.$set(item, 'pid', this.checkconnect.row.pid)
      // })
    },
    editItem(val, item) {
      this.isshow = false
      this.rightList = []
      this.checkindex = item.$index
      this.checkconnect = item
      if (val.processreferid) {
        // loaddragform(this.processinfoid, '').then(res => {
        // loaddragform(val.processreferid, '').then(res => {  
        //   this.datalist = res
        // })
        loaddragform(val.processreferid, '').then(res => {
          if (res) {
            this.datalist = res
            this.relationList = val.subprocessRelationDtoList
            this.forEachNodeData(res)
            if (this.rightList.length > 0) {
              if (this.datalist) {
                this.isshow = true
                setTimeout(() => {
                  this.configdialogVisible = true
                }, 100)
              }
            }
          }
        })
      } else {
        if (this.datalist) {
          this.isshow = true
          setTimeout(() => {
            this.configdialogVisible = true
          }, 100)
        }
      }
    },
    chageProcessname(val, item) {
      loaddragform(val.processreferid, '').then(res => {
        if (res.data) {
          this.forEachNodeData(res.data)
        }
      })
      item.processreferid = val.processreferid
      item.processrefername = val.activityname
      item.notificationmode = val.circle
    },
    getConditionList() {
      this.loading = true
      getConditionList(
        this.CheckNode.id ? this.CheckNode.id : this.treelist[0].id
      ).then(res => {
        if (!res) {
          return false
        } else {
          if (res.subProcessList) {
            this.subProcessoptin = res.subProcessList
            this.content = res.subprocessConditionDtoList
            this.subform.comtype = res.comtype
            for (let i = 0; i <= this.content.length; i++) {
              for (let j = 0; j <= this.subProcessoptin.length; j++) {
                if (
                  this.content[i] &&
                  this.subProcessoptin[j] &&
                  this.content[i].processreferid ==
                    this.subProcessoptin[j].processreferid
                ) {
                  this.content[i].notificationmode = this.subProcessoptin[
                    j
                  ].circle
                  this.content[i].processrefername = this.subProcessoptin[
                    j
                  ].activityname
                }
              }
            }
            this.loading = false
          }
        }
      })
    },
    getDictionaryOptionlist() {
      getDictionaryOption({
        dictionaryen: '条件逻辑'
      }).then(res => {
        this.tjoptions = res
      })
    },
    forEachNodeData(node, list) {
      if (node.nodeTabLists) {
        node.nodeTabLists.forEach(tab => {
          this.forEachNodeData(tab, this.rightList)
        })
      }
      if (node.nodeTableLists) {
        node.nodeTableLists.forEach((table, index) => {
          if (table.inputType === 'subtable') {
            let child = table.nodeTableLists.map(el => {
              return {
                fieldName: el.fieldName,
                fieldShowName: el.fieldShowName,
                id: el.fieldName + '-' + el.id,
                type: 'source',
                fieldType: 'String'
              }
            })
            let child2 = table.nodeTableLists.map(el => {
              return {
                fieldName: el.fieldName,
                fieldShowName: el.fieldShowName,
                id: el.fieldName + '-' + el.id + '-2',
                type: 'source',
                fieldType: 'String'
              }
            })
            this.rightList.push({
              fieldName: table.fieldName,
              fieldShowName: table.fieldShowName,
              id: table.fieldName + '-' + table.id,
              type: 'source',
              fieldType: 'String',
              child: child,
              isPlumb: false
            })
            this.rightList2.push({
              fieldName: table.fieldName,
              fieldShowName: table.fieldShowName,
              id: table.fieldName + '-' + table.id + '-2',
              type: 'source',
              fieldType: 'String',
              child: child2,
              isPlumb: false
            })
          } else {
            this.rightList.push({
              fieldName: table.fieldName,
              fieldShowName: table.fieldShowName,
              id: table.fieldName + '-' + table.id,
              type: 'source',
              fieldType: 'String'
            })
            this.rightList2.push({
              fieldName: table.fieldName,
              fieldShowName: table.fieldShowName,
              id: table.fieldName + '-' + table.id + '-2',
              type: 'source',
              fieldType: 'String'
            })
            this.forEachNodeData(table, list)
          }
        })
      }
    },
    getloaddragform() {
      loaddragform(this.processinfoid, '').then(res => {
        this.datalist = res.data
      })
    },
    nodeClick(node, data) {
      this.CheckNode = data
      this.getConditionList()
    },
    getListByPid() {
      // getListByPid(this.treeData.id, !!this.treeData.version ? this.treeData.version : '1.0').then(res => {
      getListByPid(this.treeData.id, '1.0').then(res => {
        console.log(res, '222222')
        if (!res) return false
        this.treelist[0].children = res
        console.log(this.treelist)
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.left_tree_wrapper.el-scrollbar {
  // height: 450px !important;
  .custom-tree-node {
    width: calc(100% - 24px);
    display: flex;
    align-items: center;
    box-sizing: border-box;
    p {
      max-width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
}
.left {
  display: flex;
  justify-content: space-between;
  flex-direction: column;
}
.custom-tree-node {
  height: 100%;
  position: relative;
  max-width: 200px;
  .opertionBtn {
    position: absolute;
    right: 40px;
    top: 2px;
    bottom: 0;
    min-width: 30px;
    display: flex;
    // display: none;
    opacity: 0;
    justify-content: space-between;
    align-items: center;
    i {
      display: inline-block;
      height: 14px;
      padding: 0;
      margin: 0;
      &:hover {
        background: none;
        font-weight: bold;
      }
    }
  }
  &:hover {
    .opertionBtn {
      // display: flex;
      opacity: 1;
    }
  }
}
.footer {
  text-align: right;
  margin-top: 30px;
  height: 10px;
}
</style>
