<template>
  <div>
    <sh-table class="space-top" :key="Math.random()" ref="table" :data="list" :showPage="false" :defaultLoad="false" :empty="false">
      <sh-table-column type="index" label="序号" width="50"> </sh-table-column>
      <sh-table-column prop="fileName" label="附件名称" min-width="80" align="left"> </sh-table-column>
      <sh-table-column prop="canDownLoad" v-if="type != 'view'" label="能否下载" width="80">
        <template slot-scope="scope">
          <el-switch v-model="scope.row.canDownLoad" :disabled="!(type == 'add' || type == 'edit' || !scope.row.refId)" @change="changeDownlLoad(scope.row)" :active-value="1" :inactive-value="0">
          </el-switch>
        </template>
      </sh-table-column>

       <sh-table-column prop="uploadPerson" label="上传人" min-width="50"> </sh-table-column>

      <sh-table-column prop="fileName" label="上传时间" min-width="80"> 
          <template slot-scope="scope">
             <span>{{scope.row.uploadTime && $dayjs(scope.row.uploadTime).format('YYYY-MM-DD HH:mm:ss')}}</span> 
          </template>
      </sh-table-column>
      <sh-table-column label="操作" min-width="80">
        <template slot-scope="scope">
          <el-button @click="viewPdf(scope.row)" type="text" v-if="scope.row.fileName.toLowerCase().indexOf('.pdf') != -1">预览附件</el-button>
          <sh-view-image v-else-if="scope.row.fileName.toLowerCase().indexOf('.png') != -1 || scope.row.fileName.toLowerCase().indexOf('.jpg') != -1 || scope.row.fileName.toLowerCase().indexOf('.jpeg') != -1" :api="downloadApi" :param="{id: scope.row.id}">预览附件</sh-view-image>
          <el-button @click="downLoad(scope.row)" type="text" v-if="scope.row.canDownLoad">下载附件</el-button>
          <el-button @click="onDelete(scope.row,scope.$index)" type="text" v-if="type == 'add' || type == 'edit' || !scope.row.refId">删除</el-button>
        </template>
      </sh-table-column>
    </sh-table>
    <sh-pdf-diglog :dialogVisible.sync="dialogVisiblePdf" :param="{id: this.pdfId}" title="附件预览" />
  </div>
</template>


<script>
import { ANNEX_LIST, FILE_DOWNLOAD, ANNEX_DOWNLOAD, ANNEX_DELETE } from '@/apis/admin'
import { ShPdfDiglog } from '@/components'
import { mapState } from 'vuex'
export default {
  components: { ShPdfDiglog },
  props: {
    type: String,
    formId: String,
    tableList: Array
  },
  watch: {
    tableList: {
      handler(val) {
        if(val) {
           this.list = [...val]
        }
      },
      immediate: true
    }
  },
  computed: {
    ...mapState(['user'])
  },
  data() {
    return {
      downloadApi: ANNEX_DOWNLOAD,
      dialogVisiblePdf: false,
      pdfId: '',
      list:[]
    }
  },
  methods: {
    loadList() {
      this.$post(
        ANNEX_LIST,
        { refId: this.formId },
        data => {
          this.$emit('update:tableList', data.data)
        }
      )
    },
    onDelete(row, index) {   // 删除附件
      this.$deleteInfo(ANNEX_DELETE, { id: row.id }, '', () => {
        this.list.splice(index, 1)
        this.$emit('update:tableList', this.list)
      })
    },
    isFileType(fileName, type) {  // 判断文件类型
      let nameArr = fileName.split('.')
      let suffix = nameArr[nameArr.length - 1]
      return type.split('||').indexOf(suffix) != -1
    },
    downLoad(row) {  // 下载附件
      this.$downloadFile(ANNEX_DOWNLOAD, { id: row.id }, ((row.fileName.split("."))[0]))
    },
    changeDownlLoad(row) { // 附件是否下载
      this.$post(
        FILE_DOWNLOAD,
        {
          ids: row.id,
          canDownLoad: row.canDownLoad
        },
        data => {
          this.$message.success(data.msg)
        }
      )
    },
    viewPdf(row) {  // 预览paf
      this.pdfId = row.id
      this.dialogVisiblePdf = true
    }
  }
}
</script>