<template>
    <div ref="share">
        <van-overlay :show="show" @click="show = false" z-index="99">
            <div class="wrapper">
                <div class="img" ref="wrap" v-if="img" @click.stop="">
                    <img :src="img" />
                </div>
                <div class="content" v-if="!img" ref="post">
                    <!-- @load="loadImg" -->
                    <img crossOrigin="anonymous" :src="banners" class="detailImg" />
                    <!-- <van-image :src="detailImg" class="detailImg" fit="cover" /> -->
                    <div class="info">
                        <div class="name van-multi-ellipsis--l2">
                            {{ info.name }}
                        </div>
                        <div class="text">
                            <div class="price">
                                <img src="../assets/svgs/jiage.svg" alt="" />
                                <span>{{ info.price }}</span>
                            </div>
                            <div class="text1" v-if="info.stock">
                                <span>已售 {{ info.sale }}</span>
                                <span>剩余 {{ info.stock }}</span>
                            </div>
                        </div>
                    </div>
                    <div class="minter">
                        <div class="minter-content">
                            <van-image width="30" height="30" round :src="userImg" fit="cover" />
                            <div class="text1">{{ info.minter }}</div>
                            <div class="text2">铸造者</div>
                        </div>

                        <vue-qrcode :value="url" :options="{ width: 70, margin: 2 }" class="code"></vue-qrcode>
                    </div>
                </div>

                <div class="tips">长按图片保存</div>
            </div>
        </van-overlay>
        <div class="share" v-if="!noButton" @click="init">
            <img src="../assets/svgs/icon-share.svg" alt="" />
            <span>分享</span>
        </div>
    </div>
</template>
<script>
import vueQrcode from '@chenfengyuan/vue-qrcode';
import html2canvas from 'html2canvas';
import product from '../mixins/product';
const path = require('path');
import resolveUrl from 'resolve-url';
import axios from 'axios';
export default {
    mixins: [product],
    props: {
        info: {
            type: Object,
            default: () => {
                return {
                    pic: []
                };
            }
        },
        pageUrl: {
            type: String,
            default: 'productDetail'
        },
        noButton: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            show: false,
            share: null,
            img: '',
            detailImg: '',
            userImg: ''
        };
    },
    computed: {
        url() {
            if (this.isLogin) {
                return resolveUrl(
                    this.$baseUrl,
                    '9th/' + this.pageUrl + '?id=' + this.info.id + '&invitor=' + this.$store.state.userInfo.id
                );
            } else {
                return resolveUrl(this.$baseUrl, '9th/' + this.pageUrl + '?id=' + this.info.id);
            }
        },
        banners() {
            return this.getImg(this.changeImgs(this.info.pic || []), '', 900);
        }
    },
    components: {
        vueQrcode
    },
    watch: {
        info() {
            this.$nextTick(() => {
                this.getImgBase64(this.banners, 'detailImg');
                this.getImgBase64(this.info.minterAvatar, 'userImg');
            });
        }
    },
    methods: {
        init() {
            this.show = true;
            if (!this.img) {
                this.$toast.loading({
                    message: '加载中...',
                    forbidClick: true
                });
                this.$nextTick(() => {
                    this.getImgBase64(this.banners, 'detailImg');
                    this.getImgBase64(this.info.minterAvatar, 'userImg');
                    setTimeout(() => {
                        this.loadImg();
                    }, 1000);
                });
            }
        },
        loadImg() {
            html2canvas(this.$refs.post, {
                useCORS: true,
                allowTaint: true,
                backgroundColor: null,
                scale: 3
            }).then(canvas => {
                this.$toast.clear();
                console.log(canvas);
                // this.$refs.wrap.appendChild(canvas);
                this.img = canvas.toDataURL('image/png');
            });
        },
        getImgBase64(img2, key) {
            let img = new Image();
            img.crossOrigin = 'anonymous';
            console.log(img);
            let _this = this;
            img.onload = function () {
                let src = _this.image2Base64(img);
                _this[key] = src;
            };
            img.src = img2;
        },
        image2Base64(img) {
            let canvas = document.createElement('canvas');
            canvas.width = img.width;
            canvas.height = img.height;
            let ctx = canvas.getContext('2d');
            ctx.drawImage(img, 0, 0, img.width, img.height);
            let dataURL = canvas.toDataURL('image/png');
            return dataURL;
        }
    }
};
</script>
<style lang="less" scoped>
.wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    height: 100%;
}

.content {
    width: 80vw;
    background: #19191b;
    border-radius: 8px;
}

.img {
    img {
        width: 80vw;
        display: block;
    }
}

.info {
    padding: 12px 10px;
    .name {
        font-size: 18px;
        font-weight: bold;
        color: #ffffff;
        line-height: 24px;
    }
    .text {
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
        margin-top: 6px;

        .price {
            span {
                font-size: 32px;
                font-family: OSP-DIN, OSP;
                color: #fdfb60;
                line-height: 36px;
            }
        }
        .text1 {
            font-size: 14px;
            color: @text3;
            line-height: 24px;
            span + span {
                margin-left: 10px;
            }
        }
    }
}

.code {
    border-radius: 6px;
}

.minter {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 10px;
    border-top: 2px solid #202122;

    .minter-content {
        .text1 {
            font-size: 14px;
            color: #ffffff;
            line-height: 24px;
            margin-top: 6px;
        }
        .text2 {
            font-size: 12px;
            color: @text3;
            line-height: 22px;
        }
    }
}

.tips {
    font-size: 13px;
    color: @text3;
    line-height: 22px;
    margin-top: 16px;
}

.share {
    position: fixed;
    right: 16px;
    bottom: 20vh;
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, #fdfb60 0%, #ff8f3e 100%);
    z-index: 20;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-radius: 100px;
    justify-content: center;
    span {
        font-size: 12px;
        color: #333230;
        line-height: 17px;
    }
    img {
        display: block;
    }
}

.detailImg {
    width: 80vw;
    height: 80vw;
    display: block;
}
</style>
