<template>
  <div v-if="data && data.length > 0">
    <div class="process-header">
      <h4 class="process-header-title">审批 <span class="process-header-remark" style="font-weight: 500;">多人审批时，以最后一人为准</span></h4>
      <!-- <div class="process-header-remark">多人审批时，以最后一人为准</div> -->
    </div>
    <div class="h32 bgfff"></div>
    <van-cell v-for="(item, i) in data" :key="i" class="process-item" :border="false"
              :class="{'process-item-last': data.length == i+1}">
      <template slot="icon">
        <user_image :user_name="item.name" :id="0" :img_url="item.img_url"></user_image>
      </template>
      <template slot="title">
        <span class="process-item__name"><Wxopendata type="userName" :openid="item.name"></Wxopendata></span>
        <span class="process-item__remark" v-if="item.remark =='申请人'">
            {{item.remark}}
        </span>
        <span class="process-item__remark" v-else :class="{color_yellow:item.remark == '待审核',color_green:item.remark == '审核通过',color_red:item.remark == '审核驳回','color-FF9600': item.remark == '待处理','color-F56C6C': item.remark == '驳回'}">
          {{item.remark}}
        </span>

      </template>
      <template slot="right-icon">
        <span v-if="item.review_point > 0">+{{ item.review_point }}</span>
        <span v-else>{{ item.review_point || '' }}</span>
      </template>
      <template slot="label">
        <span class="datetime">{{item.time}}</span>
        <div v-if="item.remark != '申请人'" style="color: #323233;font-size: 0.28rem;margin-top: 0.12rem;">{{item.review_remark}}</div>
        <div class="h40"></div>
      </template>
    </van-cell>


    <div v-if="false" class="event-process__item">
      <div class="event-process__icon">
        <user_image></user_image>
      </div>
      <div class="process-item__content">
        <div>
          <span class="process-item__name">{{item.name}}</span>
          <span class="process-item__remark"
                :class="{'color-FF9600': item.remark == '待处理', 'color-F56C6C': item.remark == '驳回'}">
                {{item.remark}}</span>
        </div>
        <div class="process-item__comment">
          {{item.review_remark}}
        </div>
        <div class="process-item__time">
          <span>{{item.time}}</span>
        </div>
      </div>
      <div class="process-item__point">
        <span v-if="item.review_point > 0">+{{ item.review_point }}</span>
        <span v-else>{{ item.review_point || '' }}</span>
      </div>
      <div class="event-process__line" v-if="data.length > i+1"></div>
    </div>
  </div>
</template>

<script>
  import user_image from '@/components/common/user_image'

  export default {
    name: "approval_process",
    props: {
      data: {
        type: Array,
        default: () => {
          return []
        }
      }
    },
    components: {user_image},
    data() {
      return {}
    },
    methods: {
      getIconText(employeeName) {
        if (employeeName && employeeName.length > 2) {
          const len = employeeName.length
          return employeeName[len - 2] + employeeName[len - 1]
        }
        return employeeName
      }
    }
  }
</script>

<style scoped>
  .process-item {
    padding-top: 0;
    padding-bottom: 0;
    position: relative;
  }

  .process-item /deep/ .van-image {
    vertical-align: top;
    margin-right: 0.16rem;
  }

  .process-item:before {
    content: " ";
    width: 1px;
    border-left: 1px dashed #979797;
    position: absolute;
    left: 0.7rem;
    top: 0;
    bottom: 0;
  }

  .process-item-last:before {
    border-left: none;
  }

  .h40 {
    height: 0.4rem;
  }

  .datetime {
    font-size: 0.24rem;
  }
  .process-header{
    padding:0.32rem;
    background-color: #fff;
    position: relative;
    padding-bottom:0.16rem;
  }
  .process-header h4{margin:0;}
  .process-header:before{
    background-color: #F5F7FA;
    height: 1px;
    content: " ";
    position: absolute;
    left:0.32rem;
    right:0.32rem;
    bottom:0;
  }
  .h32{height:0.32rem;}
  .process-header-remark{font-size:0.28rem; color:#909399; line-height: 1.5;}
  .process-header-title{font-weight: bold; font-size:0.32rem; line-height: 1.5;}
  .bgfff{background-color: #fff;}
  /deep/ .img_round{margin-right:0.16rem;}
</style>
