<!--  -->
<template>
  <div
    :id="id"
    :class="['img-box', 'pdfBox-con-' + order]"
    :style="style"
  ></div>
</template>

<script>
import { addWatermark } from "./../../utils/addWatermark";
import PDFObject from 'pdfobject'
import UUID from "./../../utils/uuid";
import IS from "./../../utils/is"
export default {
  // import引入的组件需要注入到对象中才能使用
  name: "pdfBox",
  components: {},
  props: {
    url: { type: String },
    order: { type: [String, Number] },
    setEvent: { type: Function },
    isShowWatermark:{type:Boolean, default:true}, // 是否显示水印 默认：true
  },
  data() {
    // 这里存放数据
    return {
      style: { height: "100%", width: "100%" },
      id: ""
    };
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {
    url: {
      handler(val) {
        // console.log('pdfBox 000=>',val,PDFObject, document.getElementById('pdfBox'));
        if (val) {
          const { url, order, $watermarkConfig } = this;
          let order_ = order
          if (IS.isNullOrUnDef(order_) || IS.isEmpty(order_)) {
            order_ = this.getKey(val)
          }
          this.id = 'pdfBox_' + order_
          this.$nextTick(async () => {
            // console.log('pdfBox 111=>',val,PDFObject, document.getElementById('pdfBox'));
            // document.getElementsByClassName('pdfBox-con-' + order).forEach(item => {
            //   PDFObject.embed(val, item)
            // })
            const ll = document.getElementsByClassName("pdfBox-con-" + order_);
            // console.log("pdf==========1================>",ll,ll.length);
            if(this.isShowWatermark === true){
              try {
                const res = await addWatermark(val,this,$watermarkConfig);
                for (let i = 0; i < ll.length; i++) {
                  // console.log(ll[i])
                  PDFObject.embed(res.url, ll[i]);
                }
              } catch (error) {
                for (let i = 0; i < ll.length; i++) {
                  // console.log(ll[i])
                  PDFObject.embed(val, ll[i]);
                }
              }
            }else{
              // const ll = document.getElementsByClassName("pdfBox-con-" + order_);
              for (let i = 0; i < ll.length; i++) {
                PDFObject.embed(val, ll[i]);
              }
            }
            // console.log(
            //   "$$$$$$$$$$$$$$$$$$$$",
            //   document.getElementsByClassName("pdfBox-con-" + order),
            //   res
            // );
            // document.getElementsByClassName("pdfBox-con-" + order).forEach((item) => {
            //     PDFObject.embed(res.url, item);
            //   });
            
          });
        }
      },
      deep: true,
      immediate: true,
    },
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  // 方法集合
  methods: {
    getKey(str){
      return  UUID('MDUUID',str+'')
    },
  },
};
</script>
<style lang="less" scoped></style>
