/**
* @Description:
* @author wx
* @date 2023/03/30
*/
<template>
  <div class="process-info-com">
    <dee-form
      read-only
      :form-data="formData"
      :form="clickItem"
    />
    <templateXml :item="clickItem" @clickTaskNode="clickTaskNode" @getTaskNodes="getTaskNodes" />
    <el-collapse v-model="taskActNames" @change="handleChange">
      <el-collapse-item title="节点参与者列表" name="1">
        <dee-up-table
          ref="multipleTable"
          table-height="auto"
          :columns="tableColums"
          :data="tableData"
          :row-class-name="tableRowClassName"
        />
      </el-collapse-item>
      <el-collapse-item title="已执行/执行中任务" name="2">
        <dee-up-table
          table-height="auto"
          :columns="taskTableColums"
          :data="taskTableData"
          :row-class-name="tableRowClassName"
        />
      </el-collapse-item>
    </el-collapse>
  </div>
</template>

<script>
import templateXml from './templateXml'
import { getParticipantListByInstId, getInstTaskHisTory, getParticipantPlugin } from '@/api/workflow/userSettings'
import { getAllUsers } from '@/api/workflow/userSystem'
import view from './view'
export default {
  name: 'ProcessInfo',
  components: { templateXml },
  mixins: [view],
  props: {
    clickItem: {
      type: Object,
      default: null
    }
  },
  data() {
    return {
      taskActNames: ['1'],
      tableData: [],
      taskTableData: [],
      allTypeObj: [],
      clickTaskNodeKey: '',
      tasksIndexObj: null
    }
  },
  computed: {},
  watch: {
    clickItem: {
      deep: true,
      immediate: true,
      handler: function(val) {
        if (val && val.id) {
          this.getParticipantListByInstId()
        }
      }
    },
    tasksIndexObj: {
      immediate: true,
      handler: function(val) {
        if (val && this.tableData.length) {
          this.tableData = this.tableData.map(item => {
            item.taskIndex = val[item.taskKey]
            return item
          }).sort((a, b) => {
            return a.taskIndex - b.taskIndex
          })
        }
      }
    }
  },
  created() {
    getParticipantPlugin().then(res => {
      res.items.forEach(r => {
        this.$set(this.allTypeObj, r.name, r.label)
      })
    })
  },
  mounted() {},
  methods: {
    getTaskNodes(tasksIndexObj) {
      this.tasksIndexObj = tasksIndexObj
    },
    getParticipantListByInstId() {
      getParticipantListByInstId(this.clickItem.id).then(res => {
        let allUserIds = []
        this.tableData = res.items ? res.items.map((r, index) => {
          let assignIds = []
          const pluginName = []
          const pluginShowContent = []
          r.dxWfParticipantInfoVOList.forEach(el => {
            assignIds = assignIds.concat(el.participantList || [])
            pluginName.push(el.participantInfoExtVO.pluginName)
            pluginShowContent.push(el.participantInfoExtVO.pluginShowContent)
          })
          r.taskIndex = this.tasksIndexObj ? this.tasksIndexObj[r.taskKey] : index + 1
          r.pluginName = pluginName
          r.pluginShowContent = pluginShowContent.join(',')
          r.assignIds = assignIds

          allUserIds = allUserIds.concat(assignIds)
          return r
        }).sort((a, b) => {
          return a.taskIndex - b.taskIndex
        }) : []

        if (allUserIds.length) {
          this.getUsers(allUserIds)
        }

        this.getInstTaskHisTory()
      })
    },
    getInstTaskHisTory() {
      getInstTaskHisTory(this.clickItem.id).then(data => {
        this.taskTableData = data.items.content ? data.items.content.map(x => {
          const findItem = this.tableData.find(item => item.taskKey === x.taskDefinitionKey)
          x.taskName = x.aliasName || x.name
          x.pluginName = findItem.pluginName
          return x
        }) : []
      })
    },
    getUsers(allUserIds) {
      const params = {
        'indices': [
          'USERS'
        ],
        'pageFrom': 1,
        'pageSize': 100,
        'openProps': [
          {
            'name': 'userAccounts',
            'pageFrom': 1,
            'pageSize': 9999
          }
        ],
        'sortItem': [
          {
            'fieldName': 'modifyTime',
            'sortOrder': 'desc'
          }
        ],
        'keyWord': null,
        'searchItems': {
          'operator': 'AND',
          'items': []
        }
      }

      if (allUserIds && allUserIds.length) {
        params.searchItems.children = [
          {
            'items': [
              {
                'fieldName': 'id',
                'operator': 'IN',
                'value': allUserIds
              }
            ]
          }
        ]
      }
      getAllUsers(params).then(res => {
        const items = res.items.content
        const userListOptions = items.map(item => {
          return {
            label: item.userName,
            value: item.id,
            style: { display: 'block' }
          }
        })
        this.tableData.forEach((x, index) => {
          if (x.assignIds.length) {
            const assignName = x.assignIds.map(r => {
              return userListOptions.find(y => y.value + '' === r + '').label
            })
            this.$set(this.tableData[index], 'assignName', assignName.join(','))
          }
        })
      })
    },
    clickTaskNode(taskNodeKey) {
      this.clickTaskNodeKey = taskNodeKey
    },
    tableRowClassName({ row, rowIndex }) {
      if (row.taskKey === this.clickTaskNodeKey || row.taskDefinitionKey === this.clickTaskNodeKey) {
        return 'workflow-theme-row'
      }
      return ''
    },
    handleChange(val) {
    }
  }
}

</script>
<style lang='scss'>
.process-info-com{
    .el-collapse-item__header{
      font-weight: bold;
    }
}
</style>