<template>
  <div style="width:400px;">
    <el-table border fit :data="list" height="200">
      <el-table-column type="index" label="序号" width="50" align="center" />
      <el-table-column prop="name" label="文件名称" min-width="120" align="center" />
      <el-table-column prop="size" label="文件大小" align="center">
        <template slot-scope="{ row }">{{ (row.size / 1000000).toFixed(2) }}MB</template>
      </el-table-column>
      <el-table-column label="操作" width="100" align="center">
        <template slot-scope="{ row }">
          <el-button type="text" size="mini" @click="handlePreview(row)">[预览]</el-button>
          <el-button type="text" size="mini" @click="handleDownload(row)">[下载]</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog :title="'图片预览 : ' + imgPreview.name" top="10vh" width="60%" append-to-body :visible.sync="showImgPreviewDialog">
      <el-image :src="imgPreview.url" fit="contain">
        <div slot="placeholder" class="image-slot">
          加载中
          <span class="dot">...</span>
        </div>
      </el-image>
    </el-dialog>
    <el-dialog :title="'PDF预览 : ' + pdfPreview.name" top="5vh" width="60%" append-to-body :visible.sync="showPdfPreviewDialog">
      <div>
        <pdf-viewer :src="pdfPreview.url" />
      </div>
    </el-dialog>
    <el-dialog :title="'文件预览 : ' + officePreview.name" top="5vh" width="60%" :visible.sync="showOfficePreviewDialog" append-to-body>
      <div>
        <office-viewer :src="officePreview.url" />
      </div>
    </el-dialog>
  </div>
</template>

<script>
import PdfViewer from '@/components/Pdf/PdfViewer.vue'
import OfficeViewer from '@/components/Office/OfficeViewer'
import { isPicFile, isPdfFile, isOfficeFile } from '@/utils/validate'

export default {
  components: { PdfViewer, OfficeViewer },
  props: {
    list: {
      type: Array,
      default: function() {
        return []
      }
    }
  },
  data() {
    return {
      showImgPreviewDialog: false,
      imgPreview: { url: '', name: '' },
      showPdfPreviewDialog: false,
      pdfPreview: { url: '', name: '' },
      showOfficePreviewDialog: false,
      officePreview: { url: '', name: '' }
    }
  },
  methods: {
    handlePreview(file) {
      if (isPicFile(file.name)) {
        this.imgPreview = {
          url: file.url || file.response.url,
          name: file.name
        }

        this.showImgPreviewDialog = true
      } else if (isPdfFile(file.name)) {
        this.pdfPreview = {
          url: file.url || file.response.url,
          name: file.name
        }

        this.showPdfPreviewDialog = true
      } else if (isOfficeFile(file.name)) {
        this.officePreview = {
          url: file.url || file.response.url,
          name: file.name
        }
        this.showOfficePreviewDialog = true
      } else {
        window.open(file.url || file.response.url)
      }
    },
    handleDownload(file) {
      window.open(file.url)
    }
  }
}
</script>
