<template>
  <div  class="contain">
    <div  class="table" >
      <el-table :data="qlfFileTable"
        :cell-style="cellStyle"
        ref="tableRef"
        highlight-current-row
        size="mini" stripe border >
        <el-table-column type="index" label="序号" width="50" >
        </el-table-column>
        <el-table-column  v-for="(item, index) in colunms" :key="index"
          :prop="item.prop"
          :label="item.label"
          :fixed="item.fixed"
          :formatter="formatter"
          :min-width="item.width"
          :show-overflow-tooltip="item.tooltip"
        >
        </el-table-column>
        <el-table-column label="操作" min-width="120"  >
          <template  slot-scope="scope">
            <el-button @click="handleView(scope.row)"  type="text" >预览</el-button>
            <el-button @click="handleDownload(scope.row)"  type="text" >下载</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
  export default{
    name: 'document-tab',
    created(){

      this.initQlfFileList();
    },
    methods:{

      async initQlfFileList(){
        let FilelistPromise = this.getAttachFilelist();
        let fileList = await FilelistPromise || [];

         fileList.forEach(item=>{
           if(item.fileType){//资质文件
            this.qlfFileTable.push(item);
           }
         })

      },
      getAttachFilelist(){
        return new Promise((resolve, reject)=>{
           this.$ajax.post({
             domain: 'crmCmUrl',
             url: 'attachFiles.getAttachFilelist',
             data: {
               busId: this.id
             },
             requestType: 'body',
             showLoad: false,
             success: function (res) {
               if (res.errorCode === 200) {
                let data = res.data;
                resolve(data);
               }
             }.bind(this),
             error: function (res) {
               this.$message.error( res.body.msg || res.msg);
               reject(res);
             }.bind(this)
           })
         }).catch((err)=>{
           console.log(err.data);
        })
      },
      //获取文件 url
      getFileUrl(name, fileId){
        return new Promise((resolve, reject)=>{
          let param = {
            fileId: fileId,
            busSystem: 'cloud-crm-project',
            busModel: 'cloud-crm-project',
            uid: this.uid,
          };
          this.$ajax.post({
            domain: 'attachUrl',
            url: 'downLoadFile',
            data: param,
            requestType: 'form',
            showLoad: true,
            success: function (res) {
              if (res.errorCode === 200) {
                  resolve(res.data);
              }
            }.bind(this),
            error: function (res) {
              reject(res);
              this.$message({
                type: 'error',
                message: res.body.msg || res.msg
              })
            }.bind(this)
          })
        })
      },
      async handleView(row){
        if(row.suffix === 'msg'){
          this.$message('请下载文件后再打开');
          return;
        }
        let fileUrl = await this.getFileUrl(row.fileName, row.fileId);
        fileUrl=this.$ajax.setDynamicProtocol(fileUrl);
        let index =  location.href.lastIndexOf('/');
        let url =  location.href.substring(0, index);
        url = url + '/preview?fileUrl=' + fileUrl + '&fileId=' + row.fileId+"&fileName=" +row.fileName;
        window.open(url);
      },
      async handleDownload(row){
        let fileUrl = await this.getFileUrl(row.fileName, row.fileId);
            fileUrl=this.$ajax.setDynamicProtocol(fileUrl);
        this.$common.downloadByXHR(fileUrl, row.fileName)
      },
      formatter(row, column, cellValue, index){
        if(column.property == 'fileSize'){
          return (row.fileSize / 1024).toFixed(2) + ' KB';
        }else if(column.property == 'status'){
          if(column.property == 'status'){
            return row.status == 1?'有效':'无效';
          }
        }else if(column.property == 'fileIndate'){
          if(row.fileIndate && row.isFlag == 0){
            return row.fileIndate + '至' + row.fileIndateEnd;
          } else if(row.isFlag == 1){
            return '永久';
          }
        }
        else {
          return cellValue;
        }
      },
      cellStyle({row, column, rowIndex, columnIndex}){
        if(column.property == 'status' ){
         return 'color: #0077FA';
        }
      },

    },
    props: ["id"],
    data(){
      return{
        qlfFileTable: [],

        colunms: [//表格列
          { prop: 'qualificationFileTypeKey', label: '资质文件', width: 120, fixed: false, tooltip: true},
          { prop: 'fileName', label: '文件名称', width: 100, fixed: false, tooltip: true},
          { prop: 'fileVersion', label: '版本',   width: 100, fixed: false,  tooltip: true },
          { prop: 'signMainPart', label: '签订主体',   width: 100, fixed: false,  tooltip: true },
          { prop: 'dealMainPartKey', label: '交易主体',   width: 100, fixed: false,  tooltip: true },
          { prop: 'signer', label: '签署人',   width: 100, fixed: false,  tooltip: true },
          { prop: 'fileIndate', label: '文件有效期',   width: 100, fixed: false,  tooltip: true },
          { prop: 'creater', label: '上传人',   width: 100, fixed: false,  tooltip: true },
          { prop: 'createTime', label: '上传时间',   width: 100, fixed: false,  tooltip: true },
          { prop: 'remark', label: '备注信息',   width: 100, fixed: false,  tooltip: true },
          { prop: 'status', label: '状态',   width: 100, fixed: false,  tooltip: true },
        ],

      }
    }
  }
</script>

<style scoped lang="scss">

</style>
