<template>
  <div class="app-container">
    <van-nav-bar
      title="审批历史"
      fixed
      placeholder
      left-arrow
      @click-left="onClickLeft"
    />
    <div class="main_box2">
      <van-row v-for="(item,index) in historyList" :key="index">
        <van-col :span="4">
          <p class="index">{{index+1}}</p>
          <div class="indexBorder" :class="{'indexCenter':index==0 ? false : true}">
            <p class="ssT" v-if="index>0"></p>
            <p class="yq"></p>
            <p class="ss" v-if="historyList.length != index+1"></p>
          </div>
        </van-col>
        <van-col :span="20">
          <van-cell :title="item.activityName" center :border="false">
            <template #default>
              <p style="color: #666666;">{{ item.assigneeName }}</p>
            </template>
          </van-cell>

          <van-cell center :border="false">
            <template #title>
              <p style="color: #999999;">{{ item.endTime }}</p>
            </template>
            <template #default>
              <p style="color: #999999;">{{ item.durationInMillis }}</p>
            </template>
          </van-cell>

          <p class="bq">审批意见：{{ item.comment }}</p>
        </van-col>
      </van-row>
    </div>
  </div>
</template>

<script>
  import request from "@/utils/request";
  export default {
    name: "programmeDetail",
    data() {
      return {
        showBankType:false,
        showPayeeType:false,
        showPicker:false,
        form:{},

        bankType:'',
        payeeType:'',
        value:'',
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 999,
          processInstanceId: null,
          activityName: null,
          assignee: null,
        },
        bankTypeOptions:[],
        payeeTypeOptions:[],
        historyList: [],
      };
    },
    created() {
      this.handleViewHistoryList()
    },
    methods: {
      handleViewHistoryList() {
        this.queryParams.processInstanceId = this.$route.query.id;
        this.getHistoryList();
      },
      getHistoryList: function () {
        this.loading = true;
        return request({
          url: "/activiti/process/listHistory",
          method: "post",
          data: this.queryParams,
        })
          .then((response) => {
            this.historyList = response.rows;
            this.historyList.forEach((row) => {
              row.startTime = this.format(row.startTime, "yyyy-MM-dd HH:mm:ss");
              row.endTime = this.format(row.endTime, "yyyy-MM-dd HH:mm:ss");
              row.durationInMillis = this.formatTotalDateSub(
                row.durationInMillis / 1000
              );
            });
            this.total = response.total;
            this.loading = false;
          })
          .then(() => {});
      },
      format(time, format) {
        var t = new Date(time);
        var tf = function (i) { return (i < 10 ? '0' : '') + i };
        return format.replace(/yyyy|MM|dd|HH|mm|ss/g, function (a) {
          switch (a) {
            case 'yyyy':
              return tf(t.getFullYear());
              break;
            case 'MM':
              return tf(t.getMonth() + 1);
              break;
            case 'mm':
              return tf(t.getMinutes());
              break;
            case 'dd':
              return tf(t.getDate());
              break;
            case 'HH':
              return tf(t.getHours());
              break;
            case 'ss':
              return tf(t.getSeconds());
              break;
          }
        })
      },
      /**
       * 计算出相差天数
       * @param secondSub
       */
      formatTotalDateSub (secondSub) {
        var days = Math.floor(secondSub / (24 * 3600));     // 计算出小时数
        var leave1 = secondSub % (24*3600) ;                // 计算天数后剩余的毫秒数
        var hours = Math.floor(leave1 / 3600);              // 计算相差分钟数
        var leave2 = leave1 % (3600);                       // 计算小时数后剩余的毫秒数
        var minutes = Math.floor(leave2 / 60);              // 计算相差秒数
        var leave3 = leave2 % 60;                           // 计算分钟数后剩余的毫秒数
        var seconds = Math.round(leave3);
        return days + "天" + hours + "时" + minutes + "分" + seconds + '秒';
      }
    },
  }
</script>

<style scoped lang="scss">
  .app-container {
    padding: 2% 2%;
  }
  .van-row{
    display: flex;
    flex-wrap: wrap;
  }
  .main_box2{
    width: 100%;
    margin: 0 auto;
    background: #ffffff;
    border-radius: 6PX;
    overflow: hidden;
    margin-top: 10PX;
    margin-bottom: 20PX;
    box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.16);
    .van-col{
      position: relative;
    }
    .van-col--20{
      padding: 12PX 0;
    }
    .van-row:nth-child(2n){
      background: rgba(29,111,233,0.1);
    }
    /deep/ .van-cell{
      background: transparent;
      padding: 0 10Px;
    }
    .bq{
      display: inline-block;
      padding: 0PX 10PX;
      line-height: 0.64rem;
      border-radius: 5PX;
    }
    .index{
      background: #1D6FE9;
      color: #ffffff;
      text-align: center;
      width: 20PX;
      height: 20PX;
      line-height: 20PX;
      border-radius: 50%;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%,-50%);
    }
    .indexCenter{
      top: 0!important;
    }
    .van-row:first-child{
      .van-col:first-child{
        .indexBorder {
          top: calc(50% - 5px);
        }
      }
    }
    .indexBorder{
      width: 10PX;
      position: absolute;
      right: 0;
      top: 0;
      height: 100%;
      .yq{
        height: 10PX;
        width: 10PX;
        background: #C9C9C9;
        border-radius: 50%;
      }
      .ss{
        height: calc(50% - 5PX);
        width: 2PX;
        background: #C9C9C9;
        position: relative;
        left: 4PX;
      }
      .ssT{
        height: calc(50% - 5PX);
        width: 2PX;
        background: #C9C9C9;
        position: relative;
        left: 4PX;
      }
    }
  }
</style>
