<template> <!--子組件-->
    <div class="posterpopup">
        <van-popup v-model="popupVisible" @closed="closePopup">
            <div id="imageWrapper1">
                <img
                    class="posterpopup-img"
                    :src="popupObj.posterurl || popupObj.photourl"
                />
                <div class="qrcode1" ref="qrcode" id="imageWrapper">
                    <qrcode
                        :url="qrUrl"
                        colorDark="#000"
                        colorLight="#fff"
                        :wid="wid"
                        :hei="wid"
                        :imgwid="imgwid"
                        :imghei="imgwid"
                    ></qrcode>
                </div>
            </div>
            <div class="posterpopup-img1" v-if="posterUrl">
                <img :src="posterUrl" id="posterUrl" />
            </div>
            <div class="posterpopup-wrap">
                <img src="@/assets/image/download.png" alt="" />
                <div class="wrap-text">長(zhǎng)按保存圖片</div>
            </div>
        </van-popup>
    </div>
</template>

<script>
import qrcode from "vue_qrcodes";
import html2canvas from "html2canvas";
export default {
    name: "PosterPopup",
    props: {
        popupVisible: false,
        popupObj: {
            type: Object,
            default: {},
        },
        qrUrl: "",
    },
    components: {
        qrcode,
    },
    data() {
        return {
            imgwid: 30, // 二維碼logo寬度
            wid: 80, // 二維碼寬度
            wrapWid: 80, // 外邊框?qū)挾?
            posterUrl: "",
            controllShow: true,
        };
    },
    methods: {
        closePopup() {
            this.posterUrl = ''
            this.$emit("closePopup");
        },
        toSaveImage() {
            // 保存圖片
            this.$nextTick(async () => {
                var imageWrapper = document.getElementById("imageWrapper1");
                try {
                    let canvas = await html2canvas(imageWrapper, {
                        height: imageWrapper.offsetHeight,
                        width: imageWrapper.offsetWidth,
                        backgroundColor: null,
                        useCORS: true,
                        allowTaint: true,
                        scrollX: 0,
                        scrollY: 0,
                        dpi: window.devicePixelRatio * 2,
                        //  dpi: 300
                    });
                    this.controllShow = false;
                    this.posterUrl = canvas.toDataURL("image/png");
                    this.$Toast.clear();
                } catch (err) {}
            });
        },
        dataURLToBlob(dataurl) {
            let arr = dataurl.split(",");
            let mime = arr[0].match(/:(.*?);/)[1];
            let bstr = atob(arr[1]);
            let n = bstr.length;
            let u8arr = new Uint8Array(n);
            while (n--) {
                u8arr[n] = bstr.charCodeAt(n);
            }
            return new Blob([u8arr], { type: mime });
        },
    },
    watch: {
        popupVisible(newVal, oldVal) {
            if (newVal) {
                this.$Toast.loading({
                    message: "海報(bào)生成中，請(qǐng)稍等",
                    duration: 0,
                    className: "zIndex",
                });
                this.$nextTick(() => {
                    this.toSaveImage();
                });
            } else {
                this.controllShow = true;
                this.$Toast.clear();
            }
        },
    },
};
</script>


<style lang="scss" scoped>
.posterpopup {
    .van-popup {
        background-color: transparent;
        overflow-y: hidden;
        width: 568px;
        height: 90vh;
    }
    #imageWrapper1 {
        position: absolute;
        min-width: 568px;
        min-height: 990px;
    }
    .posterpopup-img {
        width: 568px;
        height: 100%;
    }
    .posterpopup-img1 {
        width: 568px;
        height: 990px;
        & img {
            width: 100%;
            height: 13.2rem;
        }
    }
    .posterpopup-wrap {
        position: absolute;
        width: 302px;
        height: 70px;
        bottom: 50px;
        left: 50%;
        transform: translateX(-50%);
        // margin-top: 100px;
        margin: 39px auto 0;
        & > img {
            width: 100%;
            height: 100%;
        }
        .wrap-text {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            right: 30px;
            font-size: 30px;
            color: #fff;
        }
    }
    #imageWrapper {
        position: absolute;
        right: 30px;
        bottom: 35px;
    }
    #posterUrl {
        position: absolute;
        z-index: 2002;
        top: 0;
        left: 0;
        right: 0;
        bottom: 90px;
        margin: 0 auto;
        width: 568px;
    }
}
</style>

<!---->
<posterPopup :popupVisible="popupVisible" :popupObj="popupObj" @closePopup="closePopup" :qrUrl="qrUrl"></posterPopup>