<template >
  <div class="approval-log" >
   <!-- <div class="top-title" v-if="processId">
      <span>审批记录</span>
    </div>-->
    <div class="table-contain">
       <el-table :data="list" ref="tableRef" highlight-current-row
        size="mini" v-loading="loading" stripe border >

         <el-table-column type="index" label="序号" width="60" show-overflow-tooltip>
         </el-table-column>

         <el-table-column v-for="(item, index) in colunms" :key="index"
               :prop="item.prop"
               :label="item.label"
               :class-name="item.prop =='msg'?'align-left':'' "
               :fixed="item.fixed"
               :align="item.align"
               :formatter="formatter"
               :show-overflow-tooltip="item.tooltip"
               :min-width="item.width">
         </el-table-column>
         <el-table-column  label="留言" min-width="100" show-overflow-tooltip>
           <template  slot-scope="scope">
             <div v-html="scope.row.msg" class="msg"></div>
           </template>
         </el-table-column>

       </el-table>
    </div>
  </div>
</template>
<script>

  export default {
    name: 'approval-log',
    props:{
      processId:{
        type: String,
        required: true
      }
    },
    mounted () {
      if (!this.processId){
        this.processId=this.$common.getUrlParams('processId');
      }
      this.refresh();
    },
    methods: {
      refresh() {
        var params = {
          'processId': this.processId
        }
        this.loading = true;
        this.$ajax.post({
          domain: 'crmCmUrl',
          url: 'process.getCommentList',
          data: params,
          requestType: 'body',
          showLoad: true,
          success: function (res) {
            if (res.success) {
              this.list = res.data;
              this.list.forEach(item=>{
                item.msg = item.msg.replace('<br><br>', '');
              })
            } else {
              this.$message({
                type: 'error',
                message: res.msg
              });
            }
            this.loading = false;
          }.bind(this),
          error: function (res) {
            this.$message({
              type: 'error',
              message: res.msg || res.msg
            });
          }.bind(this)
        });
      },
      formatter(row, column, cellValue, index){
        if(column.property == 'createUserName'){
          return row.createUserName+"/"+row.departmentName+"/"+row.createUserRoleName;
        }else {
          return cellValue;
        }
      },

    },
    data () {
      return {
        loading: false,
        //表格列
        colunms: [
           { prop: 'activityName', label: '节点名称',   width: 100, fixed: false,  tooltip: true },
           { prop: 'createUserName', label: '电子签名',   width: 120,  fixed: false,  tooltip: true },
           { prop: 'createDate', label: '签名日期',   width: 100, fixed: false,  tooltip: true },
           { prop: 'actionName', label: '操作',   width: 70,fixed: false,  tooltip: true },
           // { prop: 'msg', label: '留言',width: 300, fixed: false,  tooltip: true }
        ],
        list: [],
      }
    }
  }
</script>
<style type="text/css" scoped  lang="scss">
.approval-log{
  .top-title{
    font-size: 14px;
    font-weight: bold;
    color: #0077FA;
    margin: 15px 0;
  }
  .msg{
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
}
</style>
