<template>
<div class="show-code" v-if="isShow">
  <div class="cover" @click="onClose"></div>
  <div class="main">
    <!-- ellipsis_2 -->
    <div class="canInfo" id="canInfo" v-loading="loading">
      <div class="name">{{bigdataSpu.subTitle}}</div>
      <div class="divtxt label" v-if="bigdataSpu.labelTitle"><span class="tit">材质：</span><span class="txt">{{bigdataSpu.labelTitle}}</span></div>
      <div class="divtxt spec" v-if="canInfo.specParams"><span class="tit">规格：</span><span class="txt">{{canInfo.specParams}}</span></div>
      <div class="divtxt models"><span class="tit">型号：</span>
      <!-- <div class=""><span class="txt" v-for="(item,index) in canInfo.models"
        :key="item">{{item}}<span v-if="index<canInfo.models.length-1">，</span></span>
      </div></div> -->
      <div class=""><span class="txt">{{canInfo.model}}</span>
      </div></div>
      <div id="qrcodeImg" class="qcodeImg">
        <canvas width="266" height="266" style="display: none;"></canvas>
        <img style="display: block;" v-if="code" :src="code">
        <div class="nocode" v-else>商品信息缺失，无法生成二维码！</div>
        <!--<div class="price">全国统一零售价：<span class="price0">¥{{canInfo.productPrice}}</span></div>-->
      </div>
    </div>
    <div class="updown">
      <el-button type="primary" size="medium" @click="downloadFun" :loading="loading2">保存吊牌</el-button>
    </div>

  </div>
</div>
</template>

<script>
import QRCode from 'qrcode'
import html2Canvas from "html2canvas";
 export default {
   components:{
     html2Canvas,
     QRCode
   },
   data(){
     return {
       code: '',
       canInfo:{},
       isShow:false,
       dataURL:'',
       loading:true,
       loading2:false,
       bigdataSpu:{}
     }
   },
    created(){
    },
    methods: {
      getCanvcasInfo(data,bigdata){
        this.isShow=true
        this.loading =true
        // this.$axios.get("/products/getTagInfo",{
        //   params:{
        //     spuId:id
        //   }
        // }).then(res => {
        //   let { data, code,message } = res.data;
        //   if (code == 200) {
        //     this.canInfo = data;
        //     this.getQRcode()
        //   }else{
        //     this.$message.error(message)
        //   }
        // });
        this.bigdataSpu =bigdata
        this.canInfo = data;
        this.getQRcode()
      },
       creatImg(obj) {
        var opts = {
          scale: 2,
          // dpi:300,
          useCORS: true,
          // logging:true,
          // allowTaint:true
          // timeout:1000,//加载延时
          onclone(document) {
             let e = document.querySelector('#canInfo')
             e.style.display = 'block'
          },
        };
        html2Canvas(obj, opts).then(canvas => {
          // console.log('canvas--',canvas)

          this.dataURL = canvas.toDataURL("image/png");
          // this.dataURL = pageData
          // console.log('this.dataURL---',this.dataURL)

        })
     },
     downloadFun(){
       let that =this
       that.loading2 = true
       // 在生成截图前，先把滚动条置顶，因为html2canvas是根据body进行截图，解决截取不全的问题
       window.pageYOffset = 0;
       document.documentElement.scrollTop = 0
       document.body.scrollTop = 0
       that.creatImg(document.getElementById("canInfo"));

       setTimeout(() => {
          let imgData = this.dataURL
          that.downloadFile(that.canInfo.spuId +'-'+ that.canInfo.model + '.png',imgData)
          that.loading2 =false
          that.isShow = false
      }, 1000);
     },
     downloadFile(fileName, content){
       let aLink = document.createElement('a');
        let blob = this.base64ToBlob(content); //new Blob([content]);

        let evt = document.createEvent("HTMLEvents");
        // console.log("点击下载",evt)
        evt.initEvent("click", true, true);//initEvent 不加后两个参数在FF下会报错  事件类型，是否冒泡，是否阻止浏览器的默认行为
        aLink.download = fileName;
        aLink.href = URL.createObjectURL(blob);

        // aLink.dispatchEvent(evt);
        aLink.click()
     },
     //base64转blob
      base64ToBlob(code) {
        let parts = code.split(';base64,');
        let contentType = parts[0].split(':')[1];
        // console.log('parts[1]---',parts[1])
        let raw = window.atob(parts[1]);
        let rawLength = raw.length;
        // console.log('aaa--',contentType,raw)
        let uInt8Array = new Uint8Array(rawLength);

        for (let i = 0; i < rawLength; ++i) {
          uInt8Array[i] = raw.charCodeAt(i);
        }
        return new Blob([uInt8Array], {type: contentType});
      },

      onClose(){
        // this.$emit("handleShowCode")
        this.isShow = false
      },
      getQRcode(){
        let that = this
        this.code =''
        if(that.canInfo.skuCodePath){
            QRCode.toDataURL(that.canInfo.skuCodePath,{
              width: 266,
              height: 266,
            })
              .then(url => {
                that.code = url
                that.loading =false

              })
              .catch(err => {
                console.error(err)
              })
        }else{
          // this.$message.warning('商品信息缺失，无法生成二维码！')
          that.loading =false
        }
      }
    }
  }

</script>

<style scoped lang="scss">
img {
  border: none;
}
.show-code {
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  z-index: 9999;
  display: block;
  .cover {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.6);
  }
  .main {
    width: 466px;
    // height: 60%;
    position: absolute;
    top: 10%;
    left: 50%;
    transform: translateX(-50%);
    overflow: hidden;
  }
  .canInfo{
      background: #fff;
      height: 100%;
      width: 100%;
      height: 680px;
      max-height: 680px;
      padding: 40px;
      font-size: 14px;
       color: #000;
       box-sizing: border-box;
       line-height: 28px;
       overflow: hidden;
       >div{
         margin-bottom: 10px;
         &.divtxt{
            display: flex;
            .tit{
              width: 50px;
              min-width: 50px;
              display: inline-flex;
              justify-content: flex-end;
            }
         }
       }
      .name{
        font-size: 18px;
        color: #101010;
        font-weight: bold;
        margin-bottom: 20px;
        max-height: 56px;
        overflow:hidden;
      }
      .price{
            font-size: 16px;
          .price0{
            font-size: 36px;
            font-weight: bold;
            margin-top: 10px;
          }
          .tx{
            font-size: 16px;
          }
      }
      .models{
        max-height: 84px;
        overflow: hidden;
        .s1{
          margin-right: 10px;
        }
      }
      .spec{
        max-height: 56px;
        overflow: hidden;
      }
      .label{
        max-height: 28px;
        overflow: hidden;
      }
      .overF{
           overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            /*! autoprefixer: off */
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            /* autoprefixer: on */
      }
      .qcodeImg{
        text-align: center;
        position: absolute;
        top: 310px;
        left: 50%;
        transform: translateX(-50%);
        img{
          margin: 0 auto;
        }
        .nocode{
          width: 266px;
          height: 266px;
          border:1px solid #ccc;
          text-align: center;
          display: flex;
          align-items: center;
          justify-content: center;
          margin: 0 auto;
          color: red;
          box-sizing: border-box;
        }
      }
  }
  .updown{
    text-align: center;
    margin-top: 20px;
  }
}

</style>
