<template>
  <div class="approval-history">
    <van-steps :active="active" direction="vertical" active-color="#F2F3F5">
      <van-step v-for="(item, index) in opinions" :key="index">
        <!-- <h3 :class="index==opinions.length-1 ? getStatusType(item,index):'text_color'"> -->
        <h3
          :class="judge(active,index) ? '':'text_color'"
          :style="{'color':judge(active,index) ?item.nodeColor?item.nodeColor:'#969799':''}"
        >
          <span v-if="item.batch">
            <span v-if="item.qualifiedExecutor&&item.status == 'pending'">
              {{ getName(item.qualifiedExecutor) }}
            </span>
            <span v-else-if="item.qualifiedExecutor&&item.status != 'pending'">
              {{ getName(item.qualifiedExecutor) }}
            </span>
            <span v-else>
              未设置执行人
            </span>
          </span>
          <span v-else>
            <span v-if="item.auditor">
              {{ item.auditorName }}
            </span>
            <span v-else-if="item.qualifiedExecutor">
              {{ getName(item.qualifiedExecutor) }}
            </span>
            <span v-else>
              未设置执行人
            </span>
          </span>
          <!-- <span class="task-name"> -->
          <span>
            【{{ item.taskName }}】
          </span>
          <van-tag :style="{'color':judge(active,index) ?item.nodeColor:''}" plain>
            {{ item.statusName }}
          </van-tag>
        </h3>

        <p v-if="item.opinion" class="opinion" :class="index==opinions.length-1 ?'':'text_color'">
          {{ item.opinion +active }}
        </p>
        <p v-if="item.completeTime" class="time">
          到达: {{ item.createTime|dateFormat('yyyy-MM-dd HH:mm:ss') }}<br>
          完成: {{ item.completeTime|dateFormat('yyyy-MM-dd HH:mm:ss') }}
        </p>
        <div slot="active-icon" class="ibps-active-icon_bg">
          <div class="ibps-active-icon-inside_bg" :style="{'background-color':item.nodeColor?item.nodeColor:'#969799'}" />
          <div class="ibps-active-icon-inside-vague_bg" :style="{'background-color':item.nodeColor?item.nodeColor:'#969799'}" />
        </div>
        <div v-if="judge(active,index)" slot="inactive-icon" class="ibps-active-icon_bg">
          <div class="ibps-active-icon-inside_bg" :style="{'background-color':item.nodeColor?item.nodeColor:'#969799'}" />
          <div class="ibps-active-icon-inside-vague_bg" :style="{'background-color':item.nodeColor?item.nodeColor:'#969799'}" />
        </div>

      </van-step>
    </van-steps>
  </div>
</template>

<script>
import { flowHistory } from '@/api/platform/bpmn/bpmInst'

export default {
  filters: {
    statusType(status) {
      if (status === 'pending') {
        return 'danger'
      }
      return 'success'
    }
  },
  props: {
    taskId: String,
    instId: String,
    bizKey: String,
    init: Boolean
  },
  data() {
    return {
      active: -1,
      opinions: []
    }
  },
  mounted() {
    if (this.init) {
      this.getFormData()
    }
  },
  methods: {
    getFormData() {
      const params = {
        bizKey: this.bizKey,
        taskId: this.taskId,
        instId: this.instId
      }
      if (this.$utils.isEmpty(this.instId)) {
        params.ignoreInstIdNull = true
      }

      flowHistory(params).then(response => {
        this.opinions = response.data
        this.setActive()
      })
    },
    getName(obj) {
      if (!obj) return ''
      const name = []
      for (var i = 0; i < obj.length; i++) {
        name.push(obj[i].executor)
      }
      return name.join(',')
    },
    getStatusType({ status }, index) {
      return 'status-' + status
    },
    setActive() {
      let index = -1
      this.opinions.forEach((o, i) => {
        if (o.status === 'pending') {
          if (this.active < 0) { this.active = i }
        } else if (o.status) {
          index = i
        }
      })
      if (this.active < 0) { this.active = index }
    },
    judge(val, val2) {
      return val >= val2
    }
  }
}
</script>
<style lang="scss">
.approval-history {
  .text_color{
    color: #999999!important;
  }
  h3 {
    margin: 0;
    font-size: inherit;
    font-weight: normal;
  }

  .task-name{
    color: #1E4A8D;
  }
  .opinion {
    color: #333;
    padding: 10px 0;
  }
  .time {
    color: #999999 ;
    font-size: 12px;
  }
  .status-pending {
    color: #f55353 !important;
  }
  .status-submit {
    color: #f89801 !important;
  }
  .status-resubmit {
    color: #e8d367 !important;
  }
  .status-agree {
    color: #58bc5b !important;
  }

  .status-oppose {
    color: #2886c6 !important;
  }
  .status-reject {
    color: #700101 !important;
  }
  .status-rejectToStart {
    color: #a54e4e !important;
  }
  .status-recover {
    color: #569296 !important;
  }

  .status-recoverToStart {
    color: #58a7cb !important;
  }

  .status-sign_pass {
    color: #6fa547 !important;
  }
  .status-sign_no_pass {
    color: #afab3d !important;
  }
  .status-abandon {
    color: #026670 !important;
  }
  .status-manual_end {
    color: #bc79b8 !important;
  }

  .status-complete {
    color: #5b6956 !important;
  }
  .status-suspend {
    color: #c33a1f !important;
  }

  .status-skip {
    color: #C33A1F !important;
  }
}
</style>
