<!--
 * @Description:
 * @Author: 空白格
 * @Date: 2022-08-25 16:39:06
 * @LastEditors: 空白格
 * @LastEditTime: 2022-08-25 17:10:46
 * @FilePath: \veterans_client_web\src\components\ViewPdf\index.vue
 * @Copyright: Copyright (c) 2016~2022 by 空白格, All Rights Reserved.
-->
<template>
  <div>
    <el-dialog
      title="PDF 预览"
      :visible.sync="dialogVisible"
      :close-on-click-modal="false"
      width="500"
      top="10vh"
    >
      <div class="tools">
        <el-button type="text" @click="FirstPage()">
          <el-tooltip
            class="item"
            effect="light"
            content="第一页"
            placement="top"
            ><i class="el-icon-d-arrow-left"></i>
          </el-tooltip>
        </el-button>
        <el-button type="text" @click="changePdfPage(0)">
          <el-tooltip
            class="item"
            effect="light"
            content="上一页"
            placement="top"
            ><i class="el-icon-arrow-left"></i>
          </el-tooltip>
        </el-button>
        <el-button type="text" @click="changePdfPage(1)">
          <el-tooltip
            class="item"
            effect="light"
            content="下一页"
            placement="top"
            ><i class="el-icon-arrow-right"></i>
          </el-tooltip>
        </el-button>
        <el-button type="text" @click="lastPage()">
          <el-tooltip
            class="item"
            effect="light"
            content="最后一页"
            placement="top"
            ><i class="el-icon-d-arrow-right"></i>
          </el-tooltip>
        </el-button>

        <el-button
          type="text"
          @click="setIsExit()"
          v-show="!isExit"
          style="margin-right: 10px"
        >
          <el-tooltip
            class="item"
            effect="light"
            content="页码选择"
            placement="top"
            ><i class="el-icon-setting"></i>
          </el-tooltip>
        </el-button>

        <el-tooltip
          class="item"
          effect="light"
          content="页码选择"
          placement="top"
          v-show="isExit"
        >
          <el-select
            v-model="value"
            placeholder="请选择"
            @change="pageSelect"
            size="mini"
          >
            <el-option
              v-for="item in pageCount"
              :key="item"
              :label="'第 ' + item + ' 页'"
              :value="item"
            >
            </el-option>
          </el-select>
        </el-tooltip>
        <el-button type="text" @click="scaleD()">
          <el-tooltip class="item" effect="light" content="放大" placement="top"
            ><i class="el-icon-zoom-in"></i>
          </el-tooltip>
        </el-button>
        <el-button type="text" @click="scaleX()">
          <el-tooltip class="item" effect="light" content="缩小" placement="top"
            ><i class="el-icon-zoom-out"></i>
          </el-tooltip>
        </el-button>
        <el-button type="text" @click="clock()">
          <el-tooltip
            class="item"
            effect="light"
            content="顺时针旋转"
            placement="top"
            ><i class="el-icon-refresh-right"></i>
          </el-tooltip>
        </el-button>
        <el-button type="text" @click="counterClock()">
          <el-tooltip
            class="item"
            effect="light"
            content="逆时针旋转"
            placement="top"
            ><i class="el-icon-refresh-left"></i>
          </el-tooltip>
        </el-button>
        <el-button type="text" @click="downPDF">
          <el-tooltip class="item" effect="light" content="下载" placement="top"
            ><i class="el-icon-download"></i>
          </el-tooltip>
        </el-button>
        <el-button type="text" @click="printPDF">
          <el-tooltip class="item" effect="light" content="打印" placement="top"
            ><i class="el-icon-printer"></i>
          </el-tooltip>
        </el-button>
        <p class="total">
          <el-tooltip
            class="item"
            effect="light"
            content="当前页"
            placement="top"
            ><b style="color: #f56c6c; cursor: pointer">{{
              currentPage
            }}</b></el-tooltip
          >&nbsp;/&nbsp;
          <el-tooltip
            class="item"
            effect="light"
            content="总页数"
            placement="top"
            ><b style="color: #67c23a; cursor: pointer">{{
              pageCount
            }}</b></el-tooltip
          >
        </p>
      </div>
      <div class="main">
        <pdf
          ref="pdf"
          id="pdf"
          :src="src"
          :page="currentPage"
          :rotate="pageRotate"
          @num-pages="pageCount = $event"
          @page-loaded="currentPage = $event"
          @loaded="loadPdfHandler"
        ></pdf>
      </div>
    </el-dialog>
  </div>
</template>

<script>
// pdf预览
import pdf from "vue-pdf";
export default {
  name: "ViewPdf",
  components: {
    pdf,
  },
  data() {
    return {
      value: 1,
      dialogVisible: false,
      src: "",
      currentPage: 0, // pdf文件页码
      pageCount: 0, // pdf文件总页数
      scale: 100,
      pageRotate: 0,
      isExit: false,
    };
  },
  methods: {
    /**
     * 打开弹框
     * @date 2022-08-25
     * @param {any} url
     * @returns {any}
     */
    openDialog(url) {
      this.src = url;
      this.dialogVisible = true;
    },
    // pdf加载时
    loadPdfHandler() {
      this.value = this.currentPage = 1; // 加载的时候先加载第一页
    },
    // 第一页
    FirstPage() {
      this.value = this.currentPage = 1;
      this.isExit = false;
    },
    // 最后一页
    lastPage() {
      this.value = this.currentPage = this.pageCount;
      this.isExit = false;
    },
    // 改变PDF页码,val传过来区分上一页下一页的值,0上一页,1下一页
    changePdfPage(val) {
      if (val === 0 && this.currentPage > 1) {
        this.currentPage--;
      }
      if (val === 1 && this.currentPage < this.pageCount) {
        this.currentPage++;
      }
      this.value = this.currentPage;
      this.isExit = false;
    },
    // 页码选择
    pageSelect() {
      this.currentPage = this.value;
      this.isExit = false;
    },
    setIsExit() {
      this.isExit = true;
    },
    //放大
    scaleD() {
      this.scale += 5;
      this.$refs.pdf.$el.style.width = parseInt(this.scale) + "%";
    },
    //缩小
    scaleX() {
      if (this.scale === 100) {
        return;
      }
      this.scale += -5;
      this.$refs.pdf.$el.style.width = parseInt(this.scale) + "%";
    },
    // 顺时针
    clock() {
      this.pageRotate += 90;
    },
    // 逆时针
    counterClock() {
      this.pageRotate -= 90;
    },
    downPDF() {
      var url = this.src;
      var tempLink = document.createElement("a");
      tempLink.style.display = "none";
      tempLink.href = url;
      tempLink.setAttribute("download", this.src);
      if (typeof tempLink.download === "undefined") {
        tempLink.setAttribute("target", "_blank");
      }
      document.body.appendChild(tempLink);
      tempLink.click();
      document.body.removeChild(tempLink);
    },
    printPDF() {
      this.$refs.pdf.print();
    },
  },
};
</script>

<style scoped>
.btn {
  margin: 20px 0px;
}
.main {
  border: 2px solid #dcdfe6;
  height: 65vh;
  overflow: auto;
}
.tools {
  display: flex;
  justify-content: center;
}
.total {
  width: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.main::-webkit-scrollbar {
  width: 6px;
}
/* 修改 滚动条的 下面 的 样式 */
.main::-webkit-scrollbar-track {
  background-color: white;
  -webkit-border-radius: 2em;
  -moz-border-radius: 2em;
  border-radius: 2em;
}
/* 修改 滑块 */
.main::-webkit-scrollbar-thumb {
  background-color: #dcdfe6;
  -webkit-border-radius: 2em;
  -moz-border-radius: 2em;
  border-radius: 2em;
}
:deep(.el-dialog) {
  font-family: "楷体";
}
:deep(.el-dialog__header) {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #303133;
}
:deep(.el-dialog__title) {
  color: white;
}
:deep(.el-dialog__headerbtn .el-dialog__close) {
  color: white;
}
:deep(.el-dialog__body) {
  padding: 20px;
}
:deep(.el-select ){
  width: 95px;
  height: 28px;
  margin: 5px 20px 0px 20px;
}
</style>
