<!--
  @description: 流程追踪
  @Modifier: haofengxian
  @routerPath:
  @date: 2020-5-29-14:36
-->
<template>
  <el-dialog
    append-to-body
    :visible.sync="dialogVisible"
    title="流程追踪"
    width="1060px"
    custom-class="el-dialog__body-p8 el-dialog_table"
  >
    <section>
      <!--流程图-->
      <el-card class="box-card">
        <el-row type="flex" class="row-bg">
          <img :src="flowUrl" alt="design">
        </el-row>
      </el-card>
      <!--监督信息-->
      <el-card v-if="informList.length !== 0" class="box-card">
        <div slot="header" class="clearfix">
          <span>监督信息</span>
        </div>
        <el-row>
          <el-col v-for="(inform, index) in informList" :key="index" :span="6">
            <div class="fl">
              <img src="@/assets/img/work/inform_people.png" height="20" width="20" style="vertical-align: middle">
              <span class="readUserName">{{ inform.readUserName }}</span>
              <span v-if="inform.state === '01'" class="status state01">已读</span>
              <span v-if="inform.state === '00'" class="status state00">未读</span>
            </div>
          </el-col>
        </el-row>
      </el-card>
      <!--流程信息-->
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>流程信息</span>
        </div>
        <el-row type="flex" class="row-bg">
          <el-timeline :time-width="200" :reverse="true">
            <el-timeline-item
              v-for="(flow, index) in flowList"
              :key="index"
              :timestamp="flow.endDate"
              placement="top"
            >
              <el-card v-if="index === 0 || flowList[index].teviewType === '01'">
                <p>
                  {{ flow.createUserRname }} 在 [{{ flow.createDate }}] 进入 [提交] 环节
                </p>
                <p>
                  提交信息: [提交至"{{ flowList[index].lowerUser }}"审核]
                </p>
                <p />
                <p>
                  任务历时: [{{ getTime(flow.createDate, flow.endDate) }}]
                </p>
                <p>
                  结束时间: [{{ flow.endDate }}]
                </p>
              </el-card>
              <el-card v-if="index !== 0 && flowList[index].teviewType !== '01'">
                <p>
                  {{ flow.processUserRname }} 在 [{{ flow.createDate }}] 进入 [{{ flow.processNodeName
                  }}] 环节
                </p>
                <p v-if="flowList[index].teviewType==='02' && flowList[index].lowerUser!==''">
                  同意信息: [提交至"{{ flowList[index].lowerUser }}"处理]
                </p>
                <p v-if="flowList[index].teviewType==='03'">
                  撤回信息: [撤回至"{{ flowList[index].lowerUser }}"处理]
                </p>
                <p v-if="flowList[index].lowerUser===''">
                  结束信息: [审批结束]
                </p>
                <p v-if="flowList[index].teviewType==='00'">
                  驳回信息: [驳回至"{{ flowList[index].lowerUser }}"处理]
                </p>
                批复意见: [{{ flow.comment }}]
                <p />
                <p>
                  任务历时: [{{ getTime(flow.createDate, flow.endDate) }}]
                </p>
                <p>
                  结束时间: [{{ flow.endDate }}]
                </p>
              </el-card>
            </el-timeline-item>
          </el-timeline>
        </el-row>
      </el-card>
    </section>
  </el-dialog>
</template>

<script>
/* api*/
import { findProIdByBizId, historyFlowList, informListByProcessInstanceId } from '@/api/work/work'

export default {
  name: 'TracingFlowDialog',
  data() {
    return {
      dialogVisible: false, // 弹框是否打开状态
      iframeUrl: '', // iframe 动态嵌入编辑查看页面url地址
      flowUrl: '', // 流程跟踪图片路径
      flowList: [], // 流程审批信息
      informList: []
    }
  },
  methods: {
    getTime: function(beginTime, endTime) {
      return this.$options.methods.difference(beginTime, endTime)
    },
    difference: function(beginTime, endTime) {
      beginTime = beginTime.replace(/\-/g, '/')
      endTime = endTime.replace(/\-/g, '/')
      var dateBegin = new Date(beginTime)
      var dateEnd = new Date(endTime)
      var dateDiff = dateEnd.getTime() - dateBegin.getTime()// 时间差的毫秒数
      var dayDiff = Math.floor(dateDiff / (24 * 3600 * 1000))// 计算出相差天数
      var leave1 = dateDiff % (24 * 3600 * 1000) // 计算天数后剩余的毫秒数
      var hours = Math.floor(leave1 / (3600 * 1000))// 计算出小时数
      // 计算相差分钟数
      var leave2 = leave1 % (3600 * 1000) // 计算小时数后剩余的毫秒数
      var minutes = Math.floor(leave2 / (60 * 1000)) // 计算相差分钟数
      // 计算相差秒数
      var leave3 = leave2 % (60 * 1000) // 计算分钟数后剩余的毫秒数
      var seconds = Math.round(leave3 / 1000)
      return dayDiff + '天' + hours + '小时' + minutes + '分钟' + seconds + '秒'
    },
    // 父组件查看--打开弹框-初始化数据
    // 00为其它列表查看流程追踪 01为待办/办结列表查看（取实例化id方式不同processInstanceId）
    openDialogInitData(id, type) {
      let processInstanceId = '' // 实例化id
      if (type === '01') {
        processInstanceId = id
        this.init(processInstanceId) // 获取审批流程信息
        this.initDiagramView(processInstanceId) // 流程图查看
      } else {
        this.getFindProIdByBizId(id)
      }
      this.dialogVisible = true
    },
    // 其它列表查看流程追踪 根据主键id 获取流程实例化id
    getFindProIdByBizId(id) {
      findProIdByBizId(id).then(res => {
        const { data: { data }} = res
        this.init(data) // 获取审批流程信息
        this.initDiagramView(data) // 流程图查看
      })
    },
    // 审批流程信息
    init(processInstanceId) {
      historyFlowList(processInstanceId).then(res => {
        const data = res.data
        if (data.header.ret === '0') {
          this.flowList = data.data
        }
      })
      informListByProcessInstanceId(processInstanceId).then(res => {
        const data = res.data
        if (data.header.ret === '0') {
          this.informList = data.data
        }
      })
    },
    // 流程图查看
    initDiagramView(processInstanceId) {
      this.flowUrl = `/bidprocurement/common-workclow/process/diagram-view?processInstanceId=${processInstanceId}&version=${Date.now()}`
    }
  }
}
</script>

<style scoped lang="less">
  .readUserName{
    vertical-align: middle;
    margin: 0 5px;
  }
  .status{
    vertical-align: middle;
    border-radius: 10px;
    font-size: 12px;
    padding: 1px 10px;
    text-align: center;
    &.state00 {
      background-color: #daecfe;
      color: #3498FA;
    }
    &.state01 {
      background-color: #f2f2f2;
      color: #C4C4C4;
    }
  }
</style>
