<template>
<div class="ls-apploval-log ">
  <div class="ls-row">
    <div class="row-header title">
      <img class="icon-img"
           src="@/assets/images/icon/icon-msg.png" />
      <span>审批记录</span>
    </div>
  </div>
  <div class="process-contain">
    <table v-if="approveLogList.length">
      <tr v-for="(item, index) in approveLogList"
          :key="index"
          class="contain-box">
        <!-- 图片 用户名-->
        <td class="photo">
          <div><img src="@/assets/images/photo.png" /></div>
          <div class="name">{{ item.createUserName }}</div>
        </td>
        <!-- 流程线-->
        <td class="line">
          <div class="cir"></div>
          <!-- <div class="cover" v-show="index == 0"></div> -->
        </td>
        <!-- 审批流程-->
        <td class="apploval-process">
          <div class="process-title">{{ item.activityName }}({{ item.actionName }})</div>
          <div class="date">{{ item.createDate }}</div>
          <div class="msg"
               v-html="item.msg"></div>
        </td>
      </tr>
    </table>
    <van-empty v-else
               description="暂无数据！" />
  </div>
</div>
</template>

<script>

export default {
  name: 'apploval-log',

  created () {
    this.processId = this.$common.getUrlParams('processId')
    this.getData();
  },

  methods: {

    getData: function () {
      this.$axios.post({
        domain: 'crmUrl',
        url: 'process.getCommentList',
        data: { processId: this.processId },
        requestType: 'body',
        isShow: true,
        success: function (res) {
          if (res.errorCode === 200) {
            this.approveLogList = res.data || [];
            this.approveLogList.forEach(item=>{
              item.msg = this.formatComment(item.msg);
            })
          } else {
            this.$toast({ type: 'fail', message: res.msg })
          }
        }.bind(this),
        error: function (err) {
          this.$toast({ type: 'fail', message: err, duration: 3000 })
        }.bind(this)
      })
    },

    formatComment (val) {
      if (val) {
        if (val.indexOf('aws-form-opinion-history-list-delegator') != -1) {
          var str = val.match('(<br>|<span).+</span>')[0]
          if (str) {
            return val.replace(str, '')
          }
        }
      }
      return val
    }

  },
  data () {
    return {
      processId: '',
      approveLogList: []
    }
  }
}
</script>

<style type="text/css" scoped lang="scss">

.ls-apploval-log {
  background-color: #fff;
  margin-bottom: 20px;
  .process-contain {
    padding: 20px;
    border-top: 1px solid #e7e7e7;

    table {
      width: 100%;

      .contain-box {
        display: flex;
      }
      .photo {
        width: 120px;
        padding: 20px;
        padding-left: 0;
        text-align: center;
        font-size: 24px;
        img {
          width: 68px;
          height: 68px;
          border-radius: 50%;
        }
        .name{
          word-break: break-all;
        }
      }
      .line {
        position: relative;
        width: 4px;
        background: #e7e7e7;

        border-right: 1px solid #f4f4f4;
        .cir {
          position: absolute;
          top: 26px;
          right: -5px;
          width: 12px;
          height: 12px;
          background-color: #008cee;
          border-radius: 50%;
        }
        .cover {
          width: 2px;
          height: 26px;
          position: absolute;
          top: 0;
          right: 2px;
          background-color: #fff;
        }
      }
      .apploval-process {
        flex: 1;
        padding: 10px 20px;

        .process-title {
          font-size: 26px;
          font-weight: bold;
        }
        .date {
          padding: 10px 0;
          font-size: 22px;
          font-weight: 400;
          color: #999;
        }
        .msg {
          display: flex;
          align-items: center;
          margin-top: 5px;
          background: #ecf5ff;
          border-radius: 4px;
          padding: 20px;
          font-size: 24px;
          font-weight: 400;
          color: #666666;
        }
      }
    }
  }
  .no-data {
    margin: 20px auto;
    text-align: center;
  }
}
</style>
