<template>
  <div>
    <p class="row_title">
      审批
      <span class="row_tips">多人审批时，以最后一人为准</span>
    </p>
    <div class="examine_steps">
      <el-steps direction="vertical" :space="50">
        <el-step v-for="(item, index) in process" :key="index" style="margin-bottom: 5px;display: -webkit-box;">
          <template slot="icon">
            <userImage width="36px" height="36px" fontSize="14" :img_url="item.img_url" :user_name="item.name"></userImage>
          </template>
          <template slot="title">
            <div>
              <div class="flex-box-ce" style="color: #303133;font-size:14px;margin-top:-2px;">
                <div class="flex-1">
                  <WWOpenData type="userName" :openid="item.name"></WWOpenData>
                  <span style="margin: 0 5px;">
                    <span v-if="item.remark == '待审核'" class="yellow" style="font-size:13px">待审批</span>
                    <span v-else-if="item.remark == '审核通过'" class="green" style="font-size:13px">审批通过</span>
                    <span v-else-if="item.remark == '审核驳回'" class="red" style="font-size:13px">审批驳回</span>
                    <span v-else>{{ item.remark }}</span>
                  </span>
                  <strong style="font-weight: 500;">
                    <span class="green point" v-show="item.review_point > 0">+{{ item.review_point }}</span>
                    <span class="red point" v-show="item.review_point < 0">{{ item.review_point }}</span>
                  </strong>
                </div>
                <span class="fontColorF" style="font-size:12px;">{{ item.time }}</span>
              </div>
            </div>
          </template>
          <template slot="description" style="">
            <div class="fontColorB" style="margin: 5px 0;">{{ item.review_remark }}</div>
          </template>
        </el-step>
      </el-steps>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Steps',
  props: {
    process: {
      type: Array,
      default: () => {
        return [];
      }
    }
  },
  data() {
    return {};
  },
  methods: {}
};
</script>

<style scoped="scoped" lang="scss">
.row_title {
  position: relative;
  margin: 0 0 20px 0;
  padding-top: 12px;
  font-size: 16px;
  color: #303133;
  line-height: 22px;
}
.row_title:before {
  position: absolute;
  top: 0;
  content: ' ';
  width: 100%;
  border-top: 1px #f8f8f8 solid;
}
.el-row {
  margin-bottom: 10px;
  font-size: 14px;
  .el-col-4 {
    color: #606266;
  }
}
</style>
