<template>
  <div class="app-container">
    <div v-if="fileData" class="doc-header">
      <div class="info">
        <div class="cover">
          <doc-icon :type="fileData.fileType" :width="32" :height="32" :src="fileData.screenshot" />
          <!-- <img src="" alt=""> -->
        </div>
        <div class="content">
          <div class="name">{{ fileData.fileName }}</div>
          <div class="row">
            <span class="date">时间：{{ fileData.saveTime | formatTime }}</span>
            <span class="size">大小：{{ fileData.fileSize | fileSize }}</span>
          </div>
        </div>
      </div>
      <div><el-button type="primary" @click="onDownload">下载</el-button></div>
    </div>
    <div class="doc-content">
      <img v-if="fileType === 'image'" :src="fileData.ossUrl" alt="">
      <video v-else-if="fileType === 'video'" :src="fileData.ossUrl" controls />
      <div v-else class="other">
        <doc-icon type="icon-other" :width="64" :height="64" />
        <div class="name">{{ fileData.fileName }}</div>
        <el-button size="small" type="primary" @click="onDownload">下载并打开</el-button>
      </div>
    </div>
  </div>
</template>
<script>
import DocIcon from '@/views/components/DocIcon'
import { fetchFileDetail } from '@/api/doc'
import { downloadWithUrl } from '@/utils/tools'
export default {
  components: {
    DocIcon
  },
  filters: {
    fileSize(size) {
      size = Math.round(size / 1024)
      if (size < 1024) return size + 'KB'
      size = Math.round(size / 1024)
      if (size < 1024) return size + 'MB'
      return Math.round(size / 1024) + 'GB'
    }
  },
  data() {
    return {
      fileId: '',
      fileData: {}
    }
  },
  computed: {
    fileType() {
      const mime = this.fileData.mime
      if (!mime) return 'other'
      if (mime.indexOf('image') > -1) return 'image'
      if (mime.indexOf('video') > -1) return 'video'
      return 'other'
    }
  },
  created() {
    this.fileId = this.$route.query.id
    this.fetchFileDetail()
  },
  methods: {
    async fetchFileDetail() {
      try {
        const res = await fetchFileDetail({ fileId: this.fileId })
        this.fileData = res.data
      } catch (error) {
        console.log(error)
      }
    },
    // 下载文件
    async onDownload() {
      const confirmText = '文件'
      const text = await this.$confirm(`确认下载所选${confirmText}?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(() => {
        this.exportClubList = []
        this.$message.info('已取消操作')
      })
      if (text !== 'confirm') return
      let notification = null
      notification = this.$notify({
        title: '提示',
        message: `正在下载${confirmText}，请勿重复操作！`,
        duration: 0
      })
      // 下载链接
      let downUrl = ''
      const target = this.fileData
      if (target.packageType > 0) {
        downUrl = `${process.env.VUE_APP_BASE_API}/download/file?ossName=${target.ossName}&fileName=${encodeURIComponent(target.fileName)}`
      } else {
        downUrl = `${process.env.VUE_APP_BASE_API}/database/path/package/zip?fileId=${target.id}&fileName=${encodeURIComponent(target.fileName)}`
      }
      const options = {
        headers: {
          'X-Token': this.$store.getters.token
        }
      }
      downloadWithUrl(downUrl, target.fileName, options)
        .catch((err) => {
          console.log(err)
          this.$message.error(`下载${confirmText}失败`)
        })
        .finally(() => {
          notification.close()
        })
    }
  }
}
</script>
<style lang="scss" scoped>
.app-container {
  padding-top: 40px;
}
.doc-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 64px;

  .info {
    display: flex;
    align-items: center;

    .cover {
      img {
        display: block;
        width: 48px;
        height: 48px;
        background: skyblue;
      }
    }

    .content {
      margin-left: 24px;
      .name {
        font-size: 16px;
        color: #282828;
        margin-bottom: 8px;
      }
      .date,
      .size {
        font-size: 14px;
        color: #999999;
      }

      .size {
        margin-left: 32px;
      }
    }
  }
}

.doc-content {
  padding-top: 80px;
  display: flex;
  justify-content: center;
  img,
  video {
    display: block;
    height: 560px;
    // background: #000;
  }

  .other {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin-top: 200px;

    .name {
      font-size: 16px;
      color: #666666;
      margin: 16px 0 24px;
    }
  }
}
</style>
