<template>
  <div
    class="attachment-item"
    @click.self="downloadAttachment(file.url, file.fileName)"
  >
    <div class="info">
      <div>
        <svg-icon
          :type="extensionValidate(file.extension)"
          style="font-size: 18px; vertical-align: middle;"
        />
        <span class="file-name">{{ file.fileName }}</span>
      </div>
      <span
        class="size"
      >{{
        parseInt((file.fileSize / 1024).toString()).toLocaleString()
      }}
        KB</span>
    </div>
    <div class="action">
      <div v-if="!unpaid">
        <span
          v-if="canReview"
          class="download"
          @click.self="preview(file.url)"
        >{{ $t("post.preview") }}</span>
        <span
          class="download"
          @click.self="downloadAttachment(file.url, file.fileName)"
        >{{ $t("post.download") }}</span>
      </div>
      <span v-else>{{ $t("post.paidAfterDownload") }}</span>
    </div>
    <!--TODO 放在外面-->
    <el-dialog
      v-loading="loading"
      :visible.sync="dialogVisible"
      :show-close="false"
      top="5vh"
      width="800px"
      element-loading-background="transparent"
    >
      <div class="dialog-cont">
        <img :src="previewData.image" alt="" class="img">
      </div>
      <div slot="footer" class="pagination">
        <el-button
          :class="{ hidden: previewPage === 1 }"
          type="primary"
          size="medium"
          @click="prev"
        >{{ $t("post.prev") }}</el-button>
        <div class="pages">{{ previewPage }} / {{ previewTotal }}</div>
        <el-button
          :class="{ hidden: parseInt(previewPage) >= parseInt(previewTotal) }"
          size="medium"
          type="primary"
          @click="next"
        >{{ $t("post.next") }}</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import service from '@/api/request';
import handleError from '@/mixin/handleError';
import { extensionList } from '@/constant/extensionList';
const previewList = ['DOC', 'DOCX', 'PDF', 'PPT', 'TXT', 'XLS', 'XLSX']; // 支持预览的文件格式
export default {
  name: 'AttachmentList',
  mixins: [handleError],
  props: {
    file: {
      type: Object,
      default: () => {}
    },
    isPaid: {
      type: Boolean,
      default: false
    },
    price: {
      type: [Number, String],
      default: 0
    },
    isPaidAttachment: {
      type: Boolean,
      default: false
    },
    attachmentPrice: {
      type: [Number, String],
      default: 0
    }
  },
  data() {
    return {
      dialogVisible: false,
      previewData: {},
      previewUrl: '',
      previewPage: 1,
      previewTotal: 1,
      loading: false
    };
  },
  computed: {
    forums() {
      return this.$store.state.site.info.attributes || {};
    },
    unpaid() {
      return (
        (parseFloat(this.price) > 0 && !this.isPaid)
        || (parseFloat(this.attachmentPrice) > 0 && !this.isPaidAttachment)
      );
    },
    canReview() {
      return (
        this.forums
        && this.forums.qcloud
        && this.forums.qcloud.qcloud_cos
        && this.forums.qcloud.qcloud_cos_doc_preview
        && this.isPreviewType(this.file.extension)
        && ((parseFloat(this.price) === 0
          && parseFloat(this.attachmentPrice) > 0
          && this.isPaidAttachment)
          || (parseFloat(this.price) > 0 && this.isPaid))
        && this.file.isRemote
      );
    }
  },
  methods: {
    downloadAttachment(url) {
      if (this.unpaid) return;
      if (process.client) window.open(url, '_self');
    },
    extensionValidate(extension) {
      return extensionList.indexOf(extension.toUpperCase()) > 0
        ? extension.toUpperCase()
        : 'UNKNOWN';
    },
    isPreviewType(extension) {
      return previewList.indexOf(this.extensionValidate(extension)) !== -1;
    },
    preview(url) {
      this.previewUrl = url;
      this.getPreviewData();
    },
    getPreviewData() {
      this.dialogVisible = true;
      this.loading = true;
      service({
        url: `${this.previewUrl}&page=${this.previewPage}`,
        method: 'get'
      }).then(
        res => {
          this.loading = false;
          if (
            res.status === 200
            && res.data
            && res.data.data
            && +res.data.data['X-Total-Page'] > 0
          ) {
            this.previewData = res.data.data;
            this.previewTotal = res.data.data['X-Total-Page'];
          } else {
            this.dialogVisible = false;
          }
        },
        e => {
          this.dialogVisible = false;
          this.loading = false;
          this.handleError(e);
        }
      );
    },
    prev() {
      this.previewPage -= 1;
      this.getPreviewData();
    },
    next() {
      this.previewPage += 1;
      this.getPreviewData();
    }
  }
};
</script>

<style lang="scss" scoped>
@import "@/assets/css/variable/color.scss";
.attachment-item {
  cursor: pointer;
  margin-top: 10px;
  padding: 8px 10px;
  width: 100%;
  min-height: 60px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: 5px;
  border: 1px solid $border-color-base;
  > .info {
    > .size {
      color: #b7b7b7;
      font-size: 12px;
      margin-left: 25px;
    }

    .file-name {
      max-width: 550px;
      display: inline-block;
      vertical-align: middle;
      line-height: 18px;
      margin-left: 5px;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
    }
  }

  > .action {
    .download {
      font-size: 14px;
      margin-left: 10px;
      color: #343434;
    }
  }
  &:hover {
    background: #f7fbff;
    border: 1px solid #e5f2ff;
    .download {
      color: $color-blue-base;
    }
  }
}

.pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  .hidden {
    visibility: hidden;
  }
  .pages {
    color: $font-color-grey;
  }
}
::v-deep .el-dialog__header {
  padding: 0;
}
.dialog-cont {
  overflow-y: auto;
  height: calc(100vh - 10vh - 130px);
  .img {
    max-width: 100%;
  }
}
</style>
