<!--
 * @Description: pdf预览弹框
 * @Author: Rockery
 * @Date: 2021-12-13 17:40:22
 * @LastEditors: Rockery
 * @LastEditTime: 2021-12-22 16:59:19
 * @FilePath: \party_construct_web\src\components\RocVuePdfPage\index.vue
 * @Copyright: Copyright (c) 2016~2021 Rockery(1113269755@qq.com)
-->

<template>
  <div class="rocvuepdfpage">
    <el-row>
      <el-col :span="24">
        <div class="rocvuepdfpage-title">
          <div>
            <img :src="require('@/assets/logo/home-main-title-logo.png')" @error="imgViewerOnerror" />
          </div>
          <div>PDF文件预览</div>
        </div>
      </el-col>
      <el-col :span="24">
        <div class="rocvuepdfpage-line"></div>
      </el-col>
      <el-col :span="24">
        <div v-loading="loadedRatio != 1">
          <el-row>
            <el-col :span="24">
              <div class="rocvuepdfpage-btngroup">
                <el-button-group>
                  <el-button size="mini" @click="handleHomePage">首 页</el-button>
                  <el-button
                    type="primary"
                    icon="el-icon-arrow-left"
                    size="mini"
                    @click="prePage"
                  >上一页</el-button>
                  <el-button type="primary" size="mini" @click="nextPage">
                    下一页
                    <i class="el-icon-arrow-right el-icon--right"></i>
                  </el-button>
                  <el-button size="mini" @click="handleLastPage">尾 页</el-button>
                </el-button-group>
              </div>
            </el-col>
            <el-col :span="24">
              <div class="rocvuepdfpage-page">当前页码：{{ pageNum }} / 总页码：{{ numPages || '---' }}</div>
            </el-col>

            <el-col :span="24">
              <div class="rocvuepdfpage-container" v-show="loadedRatio === 1">
                <vue-pdf
                  :src="pdfUrl"
                  ref="vuePdfRef"
                  :page="pageNum"
                  @num-pages="numPages = $event"
                  @progress="loadedRatio = $event"
                  @page-loaded="pageNum = $event"
                  @loaded="loadPdfHandler"
                  @link-clicked="pageNum = $event"
                ></vue-pdf>
              </div>
              <template v-if="loadedRatio !== 1">
                <div class="rocvuepdfpage-nodata">文件预览失败</div>
              </template>
            </el-col>
          </el-row>
        </div>
      </el-col>
    </el-row>
    <div class="pagefooter-btngroup">
      <el-button
        type="rocpartyprimaryplainbtn"
        icon="el-icon-circle-close"
        @click="handlePageCloseClick"
      >关 闭</el-button>
    </div>
  </div>
</template>

<script>
import vuePdf from 'vue-pdf';
import CMapReaderFactory from 'vue-pdf/src/CMapReaderFactory.js';

export default {
  name: 'Rocvuepdfpage',
  components: {
    'vue-pdf': vuePdf
  },
  props: {
    pdfUrl: {
      type: String,
      required: true,
      default: ''
    }
  },
  data() {
    return {
      numPages: null, // pdf 总页数
      pageNum: 1,
      loadedRatio: 0 // 当前页面的加载进度，范围是0-1 ，等于1的时候代表当前页已经完全加载完成了
    };
  },
  computed: {
    currentPdfUrl() {
      return vuePdf.createLoadingTask({ url: this.pdfUrl, CMapReaderFactory });
    }
  },
  methods: {
    /**
     * pdf加载时
     */
    loadPdfHandler(e) {
      // 加载的时候先加载第一页
      this.pageNum = 1;
    },
    /**
     * 首页按钮事件
     */
    handleHomePage() {
      this.pageNum = 1;
    },
    /**
     * 上一页按钮事件
     */
    prePage() {
      let page = this.pageNum;
      page = page > 1 ? page - 1 : this.numPages;
      this.pageNum = page;
    },
    /**
     * 下一页按钮事件
     */
    nextPage() {
      let page = this.pageNum;
      page = page < this.numPages ? page + 1 : 1;
      this.pageNum = page;
    },
    /**
     * 尾页按钮事件
     */
    handleLastPage() {
      this.pageNum = this.numPages;
    },
    /**
     * 对话框关闭事件
    */
    handlePageCloseClick() {
      this.$emit("close", false);
    }
  }
}
</script>

<style lang="scss" scoped>
.rocvuepdfpage {
  &-title {
    display: flex;
    align-items: center;
    margin-bottom: 5px;

    div {
      &:first-child {
        height: 37px;
        line-height: 37px;
      }

      &:last-child {
        margin-left: 15px;
        height: 37px;
        font-size: 26px;
        font-weight: 400;
        color: #4f4f4f;
        line-height: 37px;
        letter-spacing: 1px;
      }

      img {
        width: 34px;
        height: 34px;
      }
    }
  }

  &-line {
    width: 100%;
    height: 1px;
    background: #d8dce5;
    margin-bottom: 15px;
  }

  &-btngroup {
    text-align: center;
  }

  &-page {
    margin: 10px 0;
    text-align: center;
    color: #409eff;
  }

  &-container {
    position: relative;
    overflow: auto;
    width: 100%;
    height: 650px;
  }

  &-nodata {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 200px;
    font-size: 22px;
    color: #747474;
    opacity: 0.8;
  }
}
</style>