<template>
  <div class="upload-card">
    <el-upload
      :action="action"
      :headers="headers"
      :on-preview="handlePreview"
      :on-success="handleSuccess"
      :on-remove="handleRemove"
      :on-exceed="handleExceed"
      :on-change="handleChange"
      :before-upload="beforeUpload"
      :before-remove="beforeRemove"
      :file-list="fileList"
      :auto-upload="true"
      multiple
      :limit="10"
      :disabled="readonly"
    >
      <el-button
        v-show="!readonly"
        size="mini"
        type="primary"
      >点击上传</el-button>
      <span
        slot="tip"
        class="el-upload__tip m-l-10"
      >只能上传图片、word、excel、ppt、pdf，且文件不能超过10MB。</span>
    </el-upload>
    <el-dialog
      :title="'图片预览 : ' + imgPreview.name"
      top="10vh"
      width="60%"
      :visible.sync="showImgPreviewDialog"
      append-to-body
    >
      <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%"
      :visible.sync="showPdfPreviewDialog"
      append-to-body
    >
      <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 { getToken } from '@/utils/auth'
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: {
    value: {
      type: Array,
      default() {
        return []
      }
    },
    dirName: {
      type: String,
      default: process.env.VUE_APP_MODULE_CODE
    },
    readonly: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      showImgPreviewDialog: false,
      imgPreview: { url: '', name: '' },
      showPdfPreviewDialog: false,
      pdfPreview: { url: '', name: '' },
      showOfficePreviewDialog: false,
      officePreview: { url: '', name: '' },
      attachments: [...this.value],
      fileList: this.value.map(t => {
        return { name: t.name, url: t.url }
      })
    }
  },
  // watch: {
  //   value(newVal) {
  //     this.attachments = [...newVal];
  //     this.fileList = newVal.map(t => {
  //       return { name: t.name, url: t.url };
  //     });
  //   }
  // },
  computed: {
    action() {
      return process.env.VUE_APP_BASE_API + '/api/files/' + this.dirName
    },
    headers() {
      var tokenName = process.env.VUE_APP_Token_Name
      var headers = {}
      if (tokenName) {
        headers[tokenName] = getToken()
      } else {
        headers['Authorization'] = 'Bearer ' + getToken()
      }
      return headers
    }
  },
  methods: {
    reload(files) {
      this.attachments = [...files]
      this.fileList = files.map(t => {
        return { name: t.name, url: t.url }
      })
    },
    beforeUpload(file) {
      var reg = /\.(png|jpg|gif|jpeg|webp|xls|xlsx|doc|docx|pdf|ppt|pptx)$/i
      if (!reg.test(file.name)) {
        this.$message.error(`无效的文件格式 : ${file.name}`)
        return false
      }
      if (file.size > 10 * 1024 * 1024) {
        this.$message.error(`文件太大 : ${file.name}`)
        return false
      }
      return true
    },
    handleChange(file) {
      // var reg = /\.(png|jpg|gif|jpeg|webp|xls|xlsx|doc|docx|pdf|ppt)$/;
      // if (!reg.test(file.name)) {
      //   this.$message.warning(`无效的文件格式 : ${file.name}`);
      //   return false;
      // }
      // return true;
    },
    handleRemove(file, fileList) {
      if (file.url || file.response) {
        var url = file.url || file.response.url
        this.attachments = this.attachments.filter(t => t.url !== url)
        this.$emit('input', this.attachments)
      }
    },
    handleSuccess(response, file, fileList) {
      console.dir(response)
      this.attachments.push(response)
      this.$emit('input', this.attachments)
    },
    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)
      }
    },
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 10 个文件，本次选择了 ${
          files.length
        } 个文件，共选择了 ${files.length + fileList.length} 个文件`
      )
    },
    beforeRemove(file, fileList) {
      // return this.$confirm(`确定移除 ${file.name}？`);
    }
  }
}
</script>

<style lang="scss" scoped>
// .upload-card {
// ::v-deep .el-upload-list {
//   width: 300px;
// }
// ::v-deep .el-upload--picture-card {
//   width: 128px;
//   height: 128px;
//   line-height: 128px;
// }
// ::v-deep .el-upload-list__item {
//   width: 128px;
//   height: 128px;
// }
// }
</style>
