<template>
  <div class="elesign">
    <!-- pdf的预览 -->
    <pdf-preview
      ref="preview"
      :pdfUrl="url"
      @renderPdf="renderPdf"
    ></pdf-preview>

    <!-- 盖章部分 -->
    <canvas id="ele-canvas"></canvas>
    <section class="ele-control">
      <el-button
        size="small"
        icon="el-icon-plus"
        @click="addSignature"
        :disabled="hasSigna"
        >添加签章</el-button
      >
      <el-button
        type="danger"
        size="small"
        icon="el-icon-delete"
        @click="removeSignature"
        :disabled="!hasSigna"
        >删除签章</el-button
      >
      <el-button size="small" @click="getSignature" :disabled="!hasSigna"
        >获取数据</el-button
      >
    </section>
    <!-- <img src="../assets/logo.png" id="img" style="display:none" /> -->
  </div>
</template>

<script>
// import * as PDFJS from '../../../../../public/pdfjs-dist/build/pdf.js';
import PdfPreview from "@/components/PdfPreview/index.vue";
let goodtop, goodleft, boundingObject;
export default {
  name: "PdfDemo",
  components: {
    PdfPreview,
  },
  data() {
    return {
      url:
        "http://jnjymf_api.bozedu.top/data/upload/month_202212/202212201157061004_E1J4.pdf",//pdf链接地址
      // url: `http://${window.location.host}/static/doc/hello.pdf`,
      canvas: null,
      whDatas: null,
      signaData: {},
    };
  },
  computed: {
    hasSigna() {
      return !!this.canvas && !!this.canvas.getObjects()[0] ? true : false;
    },
  },
  watch: {
    whDatas: {
      handler() {
        if (!!this.whDatas) {
          this.renderFabric();
          this.canvasEvents();
        }
      },
    },
  },
  mounted() {
    // this.inintData();
  },
  methods: {
    // 设置绘图区域宽高
    renderPdf(data) {
      this.whDatas = data;
      document.querySelector(".elesign").style.width = data.width + "px";
    },

    // 生成绘图区域
    renderFabric() {
      let canvaEle = document.querySelector("#ele-canvas");
      canvaEle.width = this.whDatas.width;
      canvaEle.height = this.whDatas.height;

      this.canvas = new fabric.Canvas(canvaEle);
      let container = document.querySelector(".canvas-container");
      container.style.position = "absolute";
      container.style.top = "42px";
      // console.log(this.canvas);
    },

    // 相关事件操作哟
    canvasEvents() {
      // 拖拽边界 不能将图片拖拽到绘图区域外
      this.canvas.observe("object:moving", function (e) {
        var obj = e.target;

        if (obj.height > obj.canvas.height || obj.width > obj.canvas.width) {
          obj.setScaleY(obj.originalState.scaleY);
          obj.setScaleX(obj.originalState.scaleX);
        }
        obj.setCoords();
        if (
          obj.getBoundingRect().top - obj.cornerSize / 2 < 0 ||
          obj.getBoundingRect().left - obj.cornerSize / 2 < 0
        ) {
          obj.top = Math.max(
            obj.top,
            obj.top - obj.getBoundingRect().top + obj.cornerSize / 2
          );
          obj.left = Math.max(
            obj.left,
            obj.left - obj.getBoundingRect().left + obj.cornerSize / 2
          );
        }
        if (
          obj.getBoundingRect().top +
            obj.getBoundingRect().height +
            obj.cornerSize >
            obj.canvas.height ||
          obj.getBoundingRect().left +
            obj.getBoundingRect().width +
            obj.cornerSize >
            obj.canvas.width
        ) {
          obj.top = Math.min(
            obj.top,
            obj.canvas.height -
              obj.getBoundingRect().height +
              obj.top -
              obj.getBoundingRect().top -
              obj.cornerSize / 2
          );
          obj.left = Math.min(
            obj.left,
            obj.canvas.width -
              obj.getBoundingRect().width +
              obj.left -
              obj.getBoundingRect().left -
              obj.cornerSize / 2
          );
        }
      });
    },

    // 添加签章
    addSignature() {
      fabric.Image.fromURL(
        `http://${window.location.host}/static/imgs/dog3.png`,
        (oImg) => {
          oImg.set({
            left: this.whDatas.width / 2 - 50,
            top: this.whDatas.height / 2 - 100,
            width: 400,
            height: 400,
            angle: 10,
            scaleX: 0.6,
            scaleY: 0.6,
          });
          oImg.scale(0.5); //图片缩小一半
          this.canvas.add(oImg);
        }
      );

      // let imgElement = document.getElementById("img"); //声明我们的图片
      // let imgInstance = new fabric.Image(imgElement, {
      //   //设置图片位置和样子
      //   left: 100,
      //   top: 100,
      //   width: 200,
      //   height: 200,
      //   angle: 30, //设置图形顺时针旋转角度
      // });
      // this.canvas.add(imgInstance);
    },

    // 删除签章
    removeSignature() {
      this.canvas.remove(this.canvas.getObjects()[0]);
    },

    // 生成传给后端的数据
    getSignature() {
      let data = this.canvas.getObjects()[0];
      // console.log(data);
      this.signaData = {
        width: data.width,
        height: data.height,
        top: data.top,
        left: data.left,
        angle: data.angle,
        translateX: data.translateX,
        translateY: data.translateY,
        scaleX: data.scaleX,
        scaleY: data.scaleY,
        pageNum: this.$refs.preview.pageNum,
      };
      console.log(this.signaData);
    },
  },
};
</script>

<style lang="scss" scoped>
.helpCenter {
  background-color: #fff;

  .center {
    position: relative;
    text-align: center;
    padding-top: 20px;
    background: #fff;
  }

  .sign-wrap {
    position: absolute;

    .sign-img {
      position: relative;
    }
  }
}

.helpCenter .pdfBtn {
  width: 1200px;
  margin: 0 auto;
  background-color: #fff;
  text-align: center;
  margin-bottom: 10px;

  button {
    cursor: pointer;
    width: 100px;
    height: 30px;
  }
}

.main {
  display: flex;
  justify-content: center;
}

.side-bar {
  .side-barinfo {
    width: 300px;
    height: 100vh;
    border: 1px solid #fa0;
  }

  .signbutton {
    cursor: pointer;
  }
}

.sign-img {
  z-index: 18;
}

.sign-imginner {
  width: 200px;
  height: 200px;
  background: url("../../static/icon_pxi.png") center center;
  background-size: 200px 200px;
  z-index: 18;
  //    display: none;
}
</style>
