<template>
  <div class="app-container">
    <el-steps :space="200" :active="active1" finish-status="success" v-if="info.tApprove.hiddendangerLevel === 2">
      <el-step :title="$t('记录人')"></el-step>
      <el-step :title="$t('执行人')"></el-step>
      <el-step :title="$t('验证人')"></el-step>
    </el-steps>
    <el-steps :space="200" :active="active2" finish-status="success" v-if="info.tApprove.hiddendangerLevel === 3">
      <el-step :title="$t('记录人')"></el-step>
      <el-step :title="$t('确认')"></el-step>
      <el-step :title="$t('执行人')"></el-step>
      <el-step :title="$t('验证人')"></el-step>
    </el-steps>
    {{info.processId}}
    <el-table :data="historyList" border v-loading="historyLoading" style="width: 100%;">
      <el-table-column prop="taskName" header-align="center" align="center" :label="$t('流程进度')"></el-table-column>
      <el-table-column prop="userName" header-align="center" align="center" :label="$t('姓名')"></el-table-column>
      <el-table-column prop="taskCreateTime" header-align="center" align="center" :label="$t('开始时间')"></el-table-column>
      <el-table-column prop="taskEndTime" header-align="center" align="center" :label="$t('结束时间')"></el-table-column>
      <el-table-column prop="comment" header-align="center" align="center" :label="$t('审批意见')"></el-table-column>
    </el-table>
  </div>
</template>

<script>
  import { getHistorylist } from "@/api/ehs/approvedanger";

  export default {
    name: "approveDetail",
    props: ['info'],
    data () {
      return {
        // 遮罩层
        historyLoading: false,
        //流转列表
        historyList: [],
        // 查询参数
        queryParams: {
          processId: null,
        },
        //流程图显示进度
        active1: 0,
        active2: 0
      }
    },
    mounted() {
      this.getHistory();
      this.stepInfo();
    },
    methods: {
      /** 查询流转列表 */
      getHistory() {
        this.historyLoading = true
        this.queryParams.processId = this.info.processId;
        getHistorylist(this.queryParams).then(response => {
          this.historyList = response.rows;
          this.historyLoading = false
        });
      },
      /** 流程图显示 */
      stepInfo() {
        if (this.info.tApprove.hiddendangerLevel === 2) {
          if (this.info.taskName === this.$t('验证人')) { this.active1 = 2; }
          else if (this.info.taskName === this.$t('执行人')) { this.active1 = 1; }
          else if (this.info.taskName === this.$t('记录人')) { this.active1 = 0; }
        }else if (this.info.tApprove.hiddendangerLevel === 3) {
          if (this.info.taskName === this.$t('验证人')) { this.active2 = 3; }
          else if (this.info.taskName === this.$t('执行人')) { this.active2 = 2; }
          else if (this.info.taskName === this.$t('确认')) { this.active2 = 1; }
          else if (this.info.taskName === this.$t('记录人')) { this.active2 = 0; }
        }
      }
    }
  }
</script>
