<template>
  <div class="wrapper">
      <!-- //存放生成的图片 -->
        <div class="post" v-show="canvasImg">
            <img id="post" crossorigin="anonymous" :src="canvasImg" />
        </div>
      <div v-show="!canvasImg" id="captureId" class="bg-maskBox" ref="imageDom">
        <!-- <img class="bg-box" style="width:100%;" src="@/assets/fenxiangbg.png" alt=""> -->
        <div class="er-box">
                <div class="er-text">长按扫描二维码<br />订制我的专属</div>
                <span class="er-text2">贴贴人</span>
        </div>
        
        <div class="er-code"><img :src="qrCode" alt=""></div>
        <div class="zhua-box">
            <img src="@/assets/zhua.png" alt="">
        </div>
        <div class="name-box">
            <img class="name-box-img" src="@/assets/mingzikuang.png" alt="">
            <div class="name-text">
                <img class="name-img" :src="saveLogoStatus.avatar" alt="">
                <span>{{saveLogoStatus.username}}</span>
            </div>
        </div>
        <div class="baipi-box">
            <img :src="saveLogoStatus.curr_attire_img1" alt="">
        </div>
      </div>
        <div class="btn-box">
             <!-- @click="retreat()" -->
            <div class="left-box">
                <span>长按图片保存</span>
                <img src="@/assets/fanhui1.png" alt="">
            </div>
             <!-- @click="goOpen()" -->
            <div  class="right-box" @click="retreat">
                <img src="@/assets/fanhui2.png" alt="">
                <span>返回</span>
            </div>
        </div>
  </div>
</template>

<script>
import overlay from '@/components/Overlay.vue'
import html2canvas from 'html2canvas'
// import axios from 'axios';
export default {
   components: {
       overlay
   },
   props: {},
   data() {
       return {
           show:false,
           newShow:false,
           saveLogoStatus:{},
           dataURL:'',
           canvasImg:'',
           getUrlImg:'',
           qrCode: '',
       };
   },
   watch: {
   },
   computed: {
   },
   methods: {
        // html转换为img图片
        htmlToimg() {
            let that =this
            return new Promise(function (resolve, reject) {
                setTimeout(()=>{
                    let dom = document.getElementsByClassName("bg-maskBox")[0];
                    let width = dom.offsetWidth;
                    let height = dom.offsetHeight;
                    let canvas = document.createElement("canvas");
                    let scale = 2; //数值大一点也可以，就是会影响生成图片的速度
                    //画布实际宽度和高度
                    canvas.width = width * scale;
                    canvas.height = height * scale;
                    // 浏览器中被渲染的高度和宽度
                    canvas.style.width = width * scale + "px";
                    canvas.style.height = height * scale + "px";
                    canvas.getContext("2d");
                    let opts = {
                        useCORS: true,
                        //backgroundColor: "transparent", //去掉白边
                        backgroundColor:"rgba(255, 255, 255, 0)",//背景透明
                        scrollX: 0,
                        scrollY: 0,
                        scale: scale,
                        canvas: canvas,
                        dpi: window.devicePixelRatio,
                    };
                    html2canvas(dom, opts).then((canvas) => {
                        canvas.toBlob((blob) => {
                        var imgUrl = canvas.toDataURL("image/png", 1); // 获取生成的图片的url
                        that.canvasImg = imgUrl
                        });
                    });
                    resolve()
                },200)
            })

        },


       retreat(){
           this.$router.back();
        //    this.$router.push(
        //         {path: '/save'},
        //     )
       },
       goOpen(imgsrc,name){
            this.downloadIamge(imgsrc,name)
        },
        downloadIamge(imgsrc, name) {
            let image = new Image();
            image.setAttribute("crossOrigin", "anonymous");
            image.onload = function() {
                let canvas = document.createElement("canvas");
                canvas.width = image.width;
                canvas.height = image.height;
                let context = canvas.getContext("2d");
                context.drawImage(image, 0, 0, image.width, image.height);
                let url = canvas.toDataURL("image/png"); //得到图片的base64编码数据
                let a = document.createElement("a"); // 生成一个a元素
                let event = new MouseEvent("click"); // 创建一个单击事件
                a.download = name || "海报"; // 设置图片名称没有设置则为默认
                a.href = url; // 将生成的URL设置为a.href属性
                a.dispatchEvent(event); // 触发a的单击事件
            };
            image.src = imgsrc;
        },

       showClose(val){
           this.show = val
       },
       pop(){
           this.show = true
       },
       newPop(){
           this.newShow = true
       },
       newClone(){
           this.newShow = false
       }
   },
   created() {
       this.imgSRC = window.location.href
       this.saveLogoStatus = window.localStorage.getItem('userinfo') ? JSON.parse(window.localStorage.getItem('userinfo')) : {}
       this.qrCode = this.saveLogoStatus.assets.qr_code
   },
   mounted() {
        // this.active = localStorage.getItem('active') ? JSON.parse(localStorage.getItem('active')) : {}
        this.htmlToimg()
   }
};
</script>
<style scoped lang="scss">
.wrapper{
    width: 750px;
    display: block;
    height: 100%;
    overflow: hidden;
    .post{
        #post{
            width: 750px;
            position: relative;
            // position: absolute;
            
        }

    }
        .btn-box{
            background: #000000;
            opacity: 0.8;
            position: absolute;
            display: flex;
            width: 750px;
            justify-content: space-between;
            padding: 60px 0;
            bottom: 0;
            z-index: 99;
            .left-box{
                display: flex;
                margin-left: 65px;
                opacity: 1;
                height: 83px;
                align-items: center;
                img{
                    margin: 0 auto;
                    display: block;
                    width: 43px;
                    height: 55px;
                }
                span{
                    height: 55px;
                    line-height: 55px;
                    font-weight: 800;
                    color: #FFFFFF;
                    font-size: 42px;
                    margin-right: 18px;
                }
            }
            .right-box{
                position: relative;
                margin-right: 37px;
                img{
                    margin: 0 auto;
                    display: block;
                    width: 150px;
                    height: 83px;
                }
                span{
                    width: 150px;
                    height: 83px;
                    position: absolute;
                    text-align: center;
                    top: 0;
                    line-height: 83px;
                    font-size: 36px;
                    font-weight: 800;
                    color: #FFFFFF;
                }
            }
        }
    #captureId{
        position: absolute;
        top: 0;
        background: url('../assets/fenxiangbg.png');
        background-repeat: no-repeat;
        background-size: 100%;
        width: 750px;
        height:1624px;
        // .bg-box{
        //     position: absolute;
        // }
        .er-code{
            right: 45px;
            top: 20px;
            position: absolute;
            z-index: 1;
            width: 110px;
            height: 110px;
            background: #FFFFFF;
            border-radius: 24px;
            img{
                position: absolute;
                top: 10px;
                left: 10px;
                width: 90px;
                height: 90px;
            }
        }
        .er-box{
            font-weight: 500;
            color: #FFFFFF;
            line-height: 26px;
            position: absolute;
            z-index: 2;
            text-align: right;
            top: 28px;
            right: 173px;
            .er-text{
                font-size: 18px;
            }
            .er-text2{
                font-weight: bold;
                font-size: 30px;
            }
        }

        .zhua-box{
            position: absolute;
            width: 100%;
            z-index: 1;
            img{
                width: 537px;
                margin: 0 auto;
                display: block;
            }
        }
        .name-box{
            position: absolute;
            width: 100%;
            z-index: 1;
            top: 422px;
            .name-box-img{
                width: 375px;
                margin: 0 auto;
                display: block;
            }
            .name-text{
                z-index: 99;
                position: absolute;
                top: 0;
                width: 100%;
                display: flex;
                text-align: center;
                justify-content: center;
                align-items: center;
                .name-img{
                    width: 52px;
                    // height: 52px;
                    border-radius: 50%;
                }
                span{
                    max-width: 268px;
                    overflow: hidden;
                    text-align: left;
                    text-overflow:ellipsis;
                    white-space: nowrap;
                    margin-left: 5px;
                    font-size: 30px;
                    font-weight: 400;
                    color: #000000;
                    line-height: 90px;
                }
            }
        }
        .baipi-box{
            position: absolute;
            width: 100%;
            z-index: 1;
            top: 464px;
            img{
                width: 620px;
                margin: 0 auto;
                display: block;
            }
        }
    }


    .new-pop{
        width: 640px;
        border-radius: 70px;
        text-align: center;
        background: rgba(0,0,0,.7);
        .content{
            padding-top: 50px;
            padding-bottom: 39px;
            width: 640px;
            background: #FFFFFF;
            border-radius: 70px;
            font-size: 40px;
            
            font-weight: 800;
            color: #000000;
            .new-img{
                height: 660px;
                overflow: auto;
                margin: 39px auto;
                img{
                    width: 552px;
                    height: 660px;
                    background: #BFBFBF;
                }
            }
        }
        .new-clone{
            img{
                width: 66px;
                height: 136px;
            }
        }
    }
}
</style>