<template>
  <el-dialog
    :visible.sync="dialogVisible"
    title="流程预演"
    width="80%"
    :close-on-click-modal="false"
    :before-close="closeFromDialog"
    append-to-body
  >
    <el-table
      :data="nodePathData.pathList"
      style="width: 100%"
      header-cell-class-name="nodePath-header-row"
      row-class-name="nodePath-row"
      size="medium"
    >
      <el-table-column
        type="index"
        width="50"
        align="center"
        label="序号"
      ></el-table-column>
      <el-table-column
        prop="nodeName"
        width="280"
        show-overflow-tooltip
        align="left"
        label="节点名称"
      ></el-table-column>
      <el-table-column
        prop="type"
        width="220"
        label="流转方式"
        align="left"
        show-overflow-tooltip
      ></el-table-column>
      <el-table-column
        prop="users"
        label="默认处理人"
        show-overflow-tooltip
        align="left"
        width="280"
      ></el-table-column>
    </el-table>
  </el-dialog>
</template>

<script>
  import req from '@/utils/request.js'
  import { Base64 } from 'js-base64'
  export default {
    name: 'NodePath',
    components: {},
    props: {
      instId: {
        type: String,
        default: '',
      },
      nodeId: {
        type: String,
        default: '',
      },
      formData: {
        type: [String, Object],
        default: '',
      },
    },
    data() {
      return {
        nodePathData: {},
        currentExecutors: [],
        currentPathIndex: 1,
        dialogVisible: false,
      }
    },
    created() {},
    methods: {
      closeFromDialog() {
        this.dialogVisible = false
      },
      //获取当前实例的审批路径
      showNodePath(proInstId) {
        this.dialogVisible = true
        const instId = this.instId ? this.instId : proInstId
        let _this = this
        let url = `${window.context.bpmRunTime}/runtime/instance/v1/previewProcess`
        let params = {}
        params.instId = instId
        params.nodeId = this.nodeId
        params.formData = Base64.encode(JSON.stringify(this.formData))
        req.post(url, params).then((data) => {
          _this.analysisPath(data)
        })
      },
      analysisPath(data) {
        if (data && data.pathList) {
          data.pathList.forEach((item) => {
            if (item.nodeType == 'userTask') {
              item.type = '审批：串行'
            } else if (item.extraProp == 'parallel') {
              item.type = '会签：并行'
            } else if (item.extraProp == 'sequential') {
              item.type = '会签：串行'
            } else if (item.nodeType == 'serviceTask') {
              item.type = '服务：并行'
            }
            if (!item.myExcutorId) {
              item.myExcutorId = ''
              item.myExcutorName = ''
              item.myExecutors = []
            }
            if (item.excutor) {
              item.users = item.excutor.name
            } else if (item.excutorList) {
              let users = ''
              item.excutorList.forEach((excutor) => {
                if (users) {
                  users += ','
                }
                users += excutor.name
              })
              item.users = users
            }
          })
        }
        this.nodePathData = data
      },
      // handleAppointChange(path){
      //   if(path.appoint && !path.myExcutorId){
      //     let myExcutorId = '';
      //     let myExcutorName = '';
      //     let myExecutors = [];
      //     if(path.excutor){
      //       myExcutorId = path.excutor.id;
      //       myExcutorName = path.excutor.name;
      //       myExecutors.push({id:path.excutor.id,fullname:path.excutor.name});
      //     }else if(path.excutorList){
      //       path.excutorList.forEach(excutor =>{
      //         myExecutors.push({id:excutor.id,fullname:excutor.name});
      //         if(myExcutorId){
      //           myExcutorId += ',';
      //           myExcutorName += ',';
      //         }
      //         myExcutorId += excutor.id;
      //         myExcutorName += excutor.name;
      //       })
      //     }
      //     path.myExcutorId = myExcutorId;
      //     path.myExcutorName = myExcutorName;
      //     path.myExecutors = myExecutors;
      //   }
      // },
      userDialog(index) {
        this.currentPathIndex = index
        this.$refs.eipUserDialog.showDialog(
          this.nodePathData.pathList[index].myExecutors
        )
      },
      selectUser(data) {
        let myExcutorId = ''
        let myExcutorName = ''
        let myExecutors = []
        if (data && data.length > 0) {
          data.forEach((item) => {
            myExecutors.push({ id: item.id, fullname: item.fullname })
            if (myExcutorId) {
              myExcutorId += ','
              myExcutorName += ','
            }
            myExcutorId += item.id
            myExcutorName += item.fullname
          })
        }
        this.$set(
          this.nodePathData.pathList[this.currentPathIndex],
          'myExcutorId',
          myExcutorId
        )
        this.$set(
          this.nodePathData.pathList[this.currentPathIndex],
          'myExcutorName',
          myExcutorName
        )
        this.$set(
          this.nodePathData.pathList[this.currentPathIndex],
          'myExecutors',
          myExecutors
        )
      },
      //返回当前审批推演路径
      getNodePathList() {
        var returnList = []

        for (var i = 0, n; (n = this.nodePathData.pathList[i++]); ) {
          var m = { ...n }
          // 已经被跳过的节点，不保存到后台
          if (n.hasSkip) {
            continue
          }
          if ('signTask' == n.nodeType || 'serviceTask' == n.nodeType) {
            for (var j = m.excutorList.length; j--; ) {
              if (m.excutorList[j] && m.excutorList[j].hasSkip) {
                m.excutorList.splice(j, 1)
              }
            }
          }
          if (!m.excutor && m.excutorList && m.excutorList.length > 0) {
            m.excutor = m.excutorList
          }
          if (m.excutor && m.excutor.constructor.name != 'String') {
            m.excutor = JSON.stringify(m.excutor)
          }
          delete m.excutorList
          delete m.users
          delete m.myExecutors
          returnList.push(m)
        }
        return returnList
      },
    },
  }
</script>

<style lang="scss" scoped>
  .el-table ::v-deep th.nodePath-header-row {
    background-color: #fafafa;
    font-size: 13px;
  }

  .el-table ::v-deep tr.nodePath-row {
    font-size: 13px;
    color: #606266;
  }
</style>