<template>
  <div class="FlowChartShow">
    <div class="flowDisplay">
      <div class="title">
        <span></span>
        <p>
          流程进度 - <span class="status" :style="processStyle">{{processStatusName}}</span>
        </p>
      </div>
      <div id="myFlowDesignerDiv" ></div>
    </div>
    <div class="approvalHistory">
      <div class="title">
        <span></span>
        <p>
          审批历史
        </p>
      </div>
      <div class="approval">
        <Timeline>
            <TimelineItem color="green" v-for="(item,index) in approvalHistory" :key="index">
                <Icon type="iconbj_round" slot="dot" class="approval" v-if="item.status === 2"></Icon>
                <Icon type="iconbj_round" slot="dot" class="success" v-if="item.status === 0"></Icon>
                <Icon type="iconbj_round" slot="dot" class="back" v-if="[1,-1,-3,5,33].indexOf(item.status) >= 0"></Icon>
                <div class="approvalItem" v-if="item.nodeType !== 1 && item.nodeType !== 2 && item.status !== -3">
                  <div class="approvalItemTitle">
                    <p v-if="item.status === 2">待 {{item.nodeName}} 审核</p>
                    <p v-if="item.status === 0">
                      {{item.nodeName}} <span style="color:#09A155">{{item.statusName}}</span>
                    </p>
                    <p v-if="item.status === 1">
                      {{item.nodeName}} <span style="color:#ED4014">驳回</span>至 {{item.backNodeName}}
                    </p>

                    <p v-if="item.status === -1">
                      {{item.nodeName}} 关闭
                    </p>

                    <p v-if="item.status === -3">
                      {{item.nodeName}} 已撤销
                    </p>
                    <p v-if="Number(item.status) === 5" style="color:#ED4014">
                      条件不符
                    </p>
                    <p v-if="Number(item.status) === 33" style="color:#ED4014">
                      {{item.nodeName}}审核 节点报错
                    </p>
                    <p>
                      <span v-if="item.status === 2">已等待{{item.elapsedTime}}</span>
                      <span v-if="item.status !== 2">耗时{{item.elapsedTime}}</span>
                      <i class="iconfont iconios-arrow-up" v-if="item.flag" @click="folding(item)"></i>
                      <i class="iconfont iconios-arrow-down" v-if="!item.flag" @click="folding(item)"></i>
                    </p>
                  </div>
                  <div class="approvalItemContent" v-show="item.flag" >
                    <Table border :columns="columns" :data="item.approvalLists"  v-if="item.nodeType !== undefined"></Table>
                    <!-- 连线报错 -->
                    <div v-if="Number(item.status) === 5" class="linksError">
                      <p>流程报错:<span>{{item.errorType}}</span></p>
                      <p>错误简述:<span>{{item.errorMsg}}</span></p>
                      <p>人工干预:<span>{{item.actType}}至{{item.manualNode}}审核</span></p>
                    </div>
                    <!-- 节点报错 -->
                    <div v-if="Number(item.status) ===33" class="linksError">
                      <p>流程报错:<span>{{item.errorType}}</span></p>
                      <p>错误简述:<span>{{item.errorMsg}}</span></p>
                      <p>人工干预:<span>更改节点审批人为 {{item.approvalName}}</span></p>
                    </div>
                  </div>
                </div>

                <div class="approvalItem" v-if="item.nodeType === 1">
                  开始进入审批
                </div>

                <div class="approvalItem" v-if="item.nodeType === 2">
                  审批结束
                </div>

                <div class="approvalItem" v-if="item.status === -3">
                  发起人{{item.initiatorName}}已撤销流程
                </div>
            </TimelineItem>
        </Timeline>
      </div>
    </div>

  </div>
</template>
<script>
import '../../utils/go'
import FlowDisplay from '../../utils/flow-display';
import {
     addGenflowshow
    } from "@/api/activiti/definition";
export default {
  name:'FlowChartShow',
  props:{
    instanceId:{
      type:[Number,String]
    }
  },
  data(){
    return {
      data:{},
      myDiagram:{},
      myDisplay:{},
      flowTableShow:false,
      approvalHistory:[
        // {
        //   flag:true,  //控制审批详情展示
        //   status:3,  //状态
        //   statusName:'同意',  //状态中文名
        //   elapsedTime: '23h34m',  //消耗时间
        //   nodeName:'总经理',  //审批人
        //   backNodeName:'开始节点', //驳回节点名称
        //   approvalLists:[
        //     {
        //       approvalName:'张敏',
        //       approvalOperation:'同意',
        //       approvalStatus:0,  //审批人操作状态：0同意；1驳回
        //       approvalOpinions: '可以,没问题'
        //     },
        //     {
        //       approvalName:'张敏',
        //       approvalOperation:'待审批',
        //       approvalStatus:3,  //审批人操作状态：0同意；1驳回
        //       approvalOpinions: '可以,没问题'
        //     }
        //   ]
        // }
      ],
      columns:[
        {
            title: '审批人',
            key: 'approvalName',
            render:(h,params) => {
              return h('p',{
                style:{
                  'display':'flex',
                  'align-items':'center'
                }
              },[
                h('i',{
                  class:`iconfont ${params.row.approverType === 2?'iconios-people':'iconios-person'}`,
                  style:{
                    'margin-right':'5px'
                  }
                },null),
                h('span',{

                },params.row.approvalName),
              ])
            }
        },
        {
            title: '审批操作',
            key: 'approvalOperation',
            render:(h,params) => {
              // 同意
              if(params.row.approvalStatus === 0){
                return h('span',{
                  style:{
                    color:'#09A155'
                  }
                },params.row.approvalOperation)
              }
              // 驳回
              if(params.row.approvalStatus === 1){
                return h('span',{
                  style:{
                    color:'#ED4014'
                  }
                },params.row.approvalOperation)
              }

              // 关闭

              if(params.row.approvalStatus === -1 || params.row.approvalStatus === -3){
                return h('span',{
                  style:{
                    color:'#ED4014'
                  }
                },params.row.approvalOperation)
              }

              // 待审批
              if(params.row.approvalStatus === 2){
                return h('span',{

                },params.row.approvalOperation)
              }



            }
        },
        {
            title: '审批意见',
            key: 'approvalOpinions'
        }
      ],
      processStatus:null,  //流程状态
      processStatusName:'',  //流程状态中文
      processStyle:{},  //流程进度样式
      showNodes:'', //所以经过的节点
    }
  },
  mounted () {
    this.$nextTick(() => {
      this.getChartInfo()
    })
    console.log(235)
  },
  methods:{
    // 获取流程图信息
    getChartInfo () {
      let id = this.instanceId?this.instanceId:this.$route.query.instanceId
      addGenflowshow({businessCode:id})
        .then(res => {
          if(res.resultCode === 0){
            let guiStyle = res.data.guiStyle?JSON.parse(res.data.guiStyle):{}
            let approvalHistory = res.data.guiValue?res.data.guiValue:[]
            this.myDiagram = Object.assign(this.myDiagram,guiStyle)
            this.approvalHistory = approvalHistory
            if(res.data.showNodes.indexOf(res.data.currentNode) >= 0){
              res.data.showNodes.splice(res.data.showNodes.findIndex(item => item === res.data.currentNode), 1)
            }
            res.data.showNodes.push(res.data.currentNode)
            this.showNodes = res.data.showNodes
            this.processStatus = res.data.processStatus
            switch(res.data.processStatus){
              case 0:
                this.processStyle = {
                  color:'#C8C8C8'
                };
                break;
              case 1:
                this.processStyle = {
                  color:'#FFA51F'
                };
                break;
              case 2:
                this.processStyle = {
                  color:'#ED4014'
                };
                break;
              case 3:
              case 4:
                this.processStyle = {
                  color:'#09A155'
                };
                break;
              case -1:
              case -3:
                this.processStyle = {
                  color:'#ED4014'
                };
                break;
            }
            this.processStatusName = res.data.processStatusName
            this.myDisplay = new FlowDisplay('myFlowDesignerDiv');
            this.showFlowPath(this.myDisplay,res.data.currentNode)
          }
        });

    },
    showFlowPath (myDisplay,currentNodeId) {
        var flowPath = this.getFinishedNodes(currentNodeId);
        myDisplay.loadFlow(this.myDiagram);
        // this.getErrorLinks(currentNodeId)
        // myDisplay.loadFlow(this.myDiagram);
        let isEnd = false

        if(this.processStatus === -1 || this.processStatus === -3){
          isEnd = true
        }
        myDisplay.animateFlowPath(flowPath,[], false, isEnd);
    },
    getFinishedNodes (currentNodeId) {
      let nodeArr = this.getNode()

      return nodeArr
    },
    getNode () {  //获取通过的节点key
        // currentNode
        let currentNodeKeys = []
        this.showNodes.map(item => {
          this.myDiagram.nodeDataArray.every(temp => {
            if(temp.id === item){
              currentNodeKeys.push(temp.key)
              return false
            }
            return true
          })
        })

        return currentNodeKeys.join(',')
    },
    getErrorLinks (currentNodeId) {
      let currentNodeKey = null
      this.myDiagram.nodeDataArray.every(temp => {
        if(temp.id === currentNodeId){
          currentNodeKey = temp.key
          return false
        }
        return true
      })
      this.myDisplay.diagram.findNodeForKey(String(currentNodeKey)).findLinksOutOf().each(item => {
        console.log(item)
      })
    },
    folding (item) { //控制历史折叠
      item.flag = !item.flag
    }
  }
}
</script>
<style lang="scss" scoped>
.FlowChartShow{
  width: 100%;
  height: 568px;
  padding: 16px;
  box-sizing: border-box;
  display: flex;
  flex-direction: row;

  .title{
      height: 20px;
      margin-bottom: 16px;
      display: flex;
      align-items: center;

      >span{
        display: inline-block;
        width:4px;
        height:20px;
        background:rgba(216,216,216,1);
        margin-right: 9px;
      }

      >p{
        display: inline-block;
        font-size:14px;
        font-weight:500;
        color:rgba(0,0,0,1);
        line-height:20px;

        >span.status{
          color: #09A155;
        }
      }
    }

  .flowDisplay{
    flex: 1;
    margin-right: 32px;
    display: flex;
    flex-direction: column;

    #myFlowDesignerDiv{
      flex: 1;
    }
  }

  .approvalHistory{
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;


    .approval{
      flex: 1;
      overflow: auto;
      padding-top: 2px;
    }

    .approvalItem{
      padding: 10px 8px 9px 19px;
      background:rgba(249,249,249,1);

      .approvalItemTitle{
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 9px;

        >p:last-child{
          display: flex;
          align-items: center;

          >i{
            margin-left: 13px;
            cursor: pointer;
          }
        }
      }

      .linksError{
        p{
          margin-bottom: 10px;

          >span{
            margin-left: 8px;
          }


          &:nth-last-child(2){
            display: flex;
            align-items: center;
          }

          .checkSelect{
            display: inline-block;
            flex: 1;

            .burgeon-select-selection{
              border-color: #dcdee2;
              box-shadow: none;
            }

            &:first-child{
              width: 60px;
              flex: none;
              margin-left: 8px;
              .burgeon-select-selection{
                background: #F9F9F9;
                border-top-right-radius: 0;
                border-bottom-right-radius: 0;
              }
            }

            &:last-child{
              .burgeon-select-selection{
                border-left: none;
                border-top-left-radius: 0;
                border-bottom-left-radius: 0;
              }
            }
          }
        }
      }
    }

    .burgeon-timeline-item{
          i{
            font-size: 12px;
          }

          i.success{
            color: #09A155
          }

          i.back{
            color: #ED4014
          }

          i.approval{
            color: #C8C8C8
          }
        }
  }
}

</style>
