<template>
  <div  class="contain">
    <div class="table-wrap" >
      <el-table :data="fileTable" ref="tableRef"
          :cell-style="cellStyle"
          height="100%"
          highlight-current-row
          size="mini" stripe border >
        <el-table-column type="index" label="序号" width="50"  show-overflow-tooltip>
        </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" fixed="right" >
          <template  slot-scope="scope">
            <el-button @click="editRowFile(scope.row, scope.$index)"
              v-if="scope.row.status "
              type="text" >变更</el-button>
            <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>
    <dig-file
      @change="setData"
      :index="fileIndex"
      ref="digFileRef"
      :bus-id="id"
      :generateField="true"
      :edit-file-type="false"
      :editFile="cgtype =='businessEditor'"
      :editRemark="cgtype =='businessEditor'"
      :editTplType="cgtype =='changeDocument'"
      :editDealMain="cgtype =='changeDocument'"
      :editFileDate="cgtype =='changeDocument'"
      :editVersion="cgtype =='changeDocument'"
      :editSignMain="cgtype =='changeDocument'"
      :editOrg="cgtype =='changeDocument'"
    >
    </dig-file>
  </div>
</template>

<script>
  import digFile  from '@/pages/customer/public/components/dig-file.vue'
  export default{
    name: 'document-tab',
    components:{
      digFile,
    },
    created(){
      this.doQueryFile();
    },
    mounted(){
    },
    methods:{
      setData(data, index){
        this.fileTable.splice(index, 1, data);
      },
      doQueryFile(){
        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;
              data.forEach(item=>{
                if(item.fileType){//资质文件
                  this.fileTable.push(item);
                }
              })
              this.initTable = JSON.parse(JSON.stringify(this.fileTable));
             }
           }.bind(this),
           error: function (res) {
             this.$message.error( res.body.msg || res.msg);
           }.bind(this)
        })
      },
      editRowFile(row, i){
        this.fileIndex = i;
        this.inRowAddFile = true;
        this.$refs.digFileRef.openTitle = '变更文件';
        this.$refs.digFileRef.paramForm = JSON.parse(JSON.stringify(row));
        this.$refs.digFileRef.initForm = JSON.parse(JSON.stringify(this.initTable[i]));
        this.$refs.digFileRef.openType = 'edit';
        this.$refs.digFileRef.visible = true;
      },
      handleView(row, i){
        this.$refs.digFileRef.openTitle = '预览文件';
        this.$refs.digFileRef.paramForm = JSON.parse(JSON.stringify(row));
        this.$refs.digFileRef.openType = 'view';
        this.$refs.digFileRef.visible = true;
      },
      async handleDownload(row){
        let param = {
          fileId: row.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) {
              this.$common.downloadByXHR(res.data, row.fileName)
            }
          }.bind(this),
          error: function (res) {
            this.$message.error(res.body.msg || res.msg );
          }.bind(this)
        })
      },
      formatter(row, column, cellValue, index){
        if(column.property == 'fileSize'){
          return (row.fileSize / 1024).toFixed(2) + ' KB';
        } else if(column.property == 'status'){
          return row.status ? '有效' : '无效';
        }
        else {
          return cellValue;
        }
      },
      cellStyle({row, column, rowIndex, columnIndex}){
        if(column.property == 'status'){
          return 'color: #0077FA';
        }
      },

    },
    computed: {
      uid(){
        return this.$common.getUrlParams('bid') || 'admin';
      }
    },
    props: ["id", "cgtype"],
    data(){
      return{
        initTable: [],
        fileTable: [],
        fileIndex: 0, //上传文件所处索引
        inRowAddFile: false, //在行添加文件

        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: 'signMainPartKey', 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: 'updater', 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">
  .contain {
    .ls-search-form {
      border-top: none;
      padding: 0;
      .el-col  .btn{
        flex: 1;
        display: flex;
        justify-content: flex-end;
      }

    }
  }
</style>
