<template>
  <div class="info-panel">
    <div v-if="filelist.length > 1">
      <p class="bold">多选</p>
      <p class="explan">已选{{filelist.length}}个</p>
    </div>
    <div v-else>
      <p class="bold">{{file.document}}</p>
      <p class="info-text">{{file.postfix}}</p>
      <img v-if="file.postfix === 'DOC' || file.postfix === 'DOCX'"  src="../../../assets/file_icons/word.png" alt="">
      <img v-else-if="file.postfix === 'PDF'"  src="../../../assets/file_icons/PDF.png" alt="">
      <img v-else-if="file.postfix === 'MP4' || file.postfix === 'AVI'"  src="../../../assets/file_icons/video.png" alt="">
      <img v-else-if="file.postfix === 'XLS' || file.postfix === 'XLSX'"  src="../../../assets/file_icons/excel.png" alt="">
      <img v-else-if="file.postfix === 'PNG' || file.postfix === 'JPG'|| file.postfix === 'JPEG'"  src="../../../assets/file_icons/image.png" alt="">
      <img v-else-if="file.postfix === 'PPT' || file.postfix === 'PPTX'"  src="../../../assets/file_icons/PPT.png" alt="">
      <img v-else-if="file.postfix === 'TXT'"  src="../../../assets/file_icons/TXT@2x.png" alt="">
      <img v-else-if="file.postfix === 'FOLDER'"  src="../../../assets/file_icons/folder.png" alt="">
      <img v-else  src="../../../assets/file_icons/unknow.png" alt="">
      <p v-if="file.contentlength" class="info-text">大小: {{file.contentlength > 1073741824?(file.contentlength / Math.pow(1024,3)).toFixed(2)+'GB':file.contentlength > 1048576?(file.contentlength / Math.pow(1024,2)).toFixed(2)+'MB':file.contentlength > 1024?(file.contentlength / Math.pow(1024,1)).toFixed(2)+'KB':file.contentlength+'B'}}</p>
      <p v-else class="info-text">大小:0</p>
      <p class="info-text">上传人: {{file.createby}}</p>
      <p class="info-text normal-margin">上传时间: {{file.createdate}}</p>
      <tableLayout :layout="tablecols" :data="list" :custom="true">
        <template v-slot:customcol="scope">
        <p v-if="scope.column.columnname === 'appdata'">
          <span>{{scope.column.data.data.appdata}}</span>
        </p>
        <p v-if="scope.column.columnname === 'appname'">
          <span>{{scope.column.data.data.appname}}</span>
        </p>
        <p v-else>{{scope.column.data[scope.column.columnname]}}</p>
        </template>
      </tableLayout>
    </div>
  </div>
</template>

<script>

export default {
  props:['filelist'],
  data () {
    return {
      file:{},
      tablecols:[],
      list:[]
    }
  },
  methods:{
    setFileInfo (filelist) {
      if (filelist.length > 0) {
        this.file = filelist[0]
        this.queryAttachment_LinkData(filelist[0].attachmentid)
      } else {
        this.file = {}
        this.list = []
      }
    },
    async queryAttachment_LinkData (attachmentid) {
      let param = {
        "classname": "system.attachment.MediaCenter",
        "method": "queryAttachment_LinkData",
        "content": {
            "attachmentid":attachmentid
        }
      }
      const res = await this.$api.requested(param)
      this.list = res.data
    }
  },
  mounted () {
    // 获取角色表结构
    this.tablecols = this.tool.tabelCol(this.$route.name)['fileBindTable'].tablecols
  }
}

</script>
<style>
</style>
<style scoped>
.info-panel{
  height: calc(100vh - 180px);
  padding:64px 16px 16px 16px;
  border-left:1px solid #f1f2f3;
  background: #fff;
}
.bold{
  font-weight: 500;
}
.info-text{
  font-size: 14px;
  font-family: PingFang SC-Regular, PingFang SC;
  font-weight: 400;
  color: #666666;
  line-height: 25px;
  margin:8px 0;
  -webkit-background-clip: text;
}
.info-panel img{
  width: 64px;
  margin-left: -5px;
}
</style>