<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="preview(0, [img])">
                    <img :src="img" />
                </div>
                <template v-if="!img">
                    <div class="content" ref="post">
                        <!-- @load="loadImg" -->
                        <!-- <img crossOrigin="anonymous" :src="banners" class="detailImg" /> -->
                        <van-image :src="detailImg || info.showroomBg" class="detailImg" />
                        <div class="collecions">
                            <div class="users">
                                <van-image :src="userImg || info.pic" width="120" height="120" radius="8" fit="cover" />
                                <div class="users-text">
                                    <div class="name">
                                        <div>{{ info.nickname }}</div>
                                        <div>的展馆</div>
                                    </div>
                                    <div class="sub">
                                        <span>{{ info.introduction }}</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="info">
                            <div class="left">
                                <div class="name van-multi-ellipsis--l2">
                                    {{ info.introduction }}
                                </div>
                                <div class="minter-content">
                                    <van-image width="18" height="18" round :src="userImg || info.pic" fit="cover" />
                                    <div class="text1">{{ info.nickname }}</div>
                                </div>
                            </div>
                            <div class="right">
                                <div class="code-box">
                                    <vue-qrcode
                                        :value="url"
                                        :options="{ width: 60, margin: 0 }"
                                        class="code"
                                    ></vue-qrcode>
                                </div>
                                <div class="text1">扫码查看展厅</div>
                            </div>
                        </div>
                    </div>
                </template>

                <div class="btn" @click.stop="" v-if="cordova">
                    <van-button type="primary" round @click="save">点击保存到本地</van-button>
                </div>
                <div class="tips" v-else>长按图片保存</div>
            </div>
        </van-overlay>
    </div>
</template>
<script>
import vueQrcode from '@chenfengyuan/vue-qrcode';
import html2canvas from 'html2canvas';
import resolveUrl from 'resolve-url';
import axios from 'axios';
import { isBefore, format } from 'date-fns';
import { abs } from 'mathjs';
import { ImagePreview } from 'vant';
export default {
    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: '',
            cordova: window.cordova,
            shareBg: ''
        };
    },
    computed: {
        url() {
            return resolveUrl(this.$baseUrl, '9th/hall?id=' + this.info.id);
        },
        isBuy() {
            return this.info.stock && this.info.onShelf && this.info.salable;
        },
        time() {
            if (this.info.startTime) {
                if (isBefore(new Date(this.info.startTime), new Date())) {
                    return format(new Date(this.info.startTime), 'mm月dd日');
                }
            }

            return '';
        },
        collections() {
            return this.info.collections || [];
        }
    },
    components: {
        vueQrcode
    },
    methods: {
        init() {
            this.show = true;
            if (!this.img) {
                this.$toast.loading({
                    message: '加载中...',
                    forbidClick: true
                });
                this.$nextTick(() => {
                    this.getImgBase64(this.info.showroomBg, 'detailImg');
                    this.getImgBase64(this.info.pic + '?x-oss-process=image/resize,m_fill,h_200,w200', 'userImg');
                    setTimeout(() => {
                        this.loadImg();
                    }, 1500);
                });
            }
        },
        loadImg() {
            html2canvas(this.$refs.post, {
                useCORS: true,
                allowTaint: true,
                backgroundColor: null,
                scale: 3
            }).then(canvas => {
                this.$toast.clear();
                this.img = canvas.toDataURL('image/png');
            });
        },
        getImgBase64(img2, key) {
            let img = new Image();
            img.crossOrigin = 'anonymous';
            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;
        },
        preview(index = 0, list = []) {
            console.log('266716');
            ImagePreview({
                images: [...list],
                startPosition: index
            });
        },
        save() {
            if (window.cordova) {
                let _this = this;
                imageSaver.saveBase64Image(
                    { data: this.img },
                    function (filePath) {
                        _this.$toast('图片已保存至文件夹');
                        _this.show = false;
                        console.log('File saved on ' + filePath);
                    },
                    function (msg) {
                        _this.$dialog.alert({
                            title: '提示',
                            message: msg + ',请尝试截图保存分享'
                        });
                        (1).then(() => {
                            _this.preview(0, [_this.img]);
                        });
                    }
                );
            }
        }
    }
};
</script>
<style lang="less" scoped>
.wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    height: 100%;
}

.content {
    width: 260px;
    background: @bg;
    border-radius: 20px;
    overflow: hidden;
    position: relative;
}

.img {
    img {
        width: 260px;
        display: block;
    }
}

.info {
    padding: 10px;

    .flex();
    align-items: stretch;
    .left {
        flex-grow: 1;
        .name {
            font-size: 14px;
            color: #000000;
            line-height: 20px;
            min-height: 40px;
        }
        .minter-content {
            margin-top: 8px;
            .flex();
            font-size: 12px;
            color: #939599;
            .text1 {
                margin-left: 5px;
            }
        }
    }

    .right {
        margin-left: 12px;
        .code-box {
            padding: 5px;
            background-color: #f5f7fa;
            border-radius: 6px;
            width: 70px;
            box-sizing: border-box;
            .code {
                display: block;
            }
        }
        .text1 {
            font-size: 12px;
            color: #939599;
            line-height: 12px;
            transform: scale(0.8);
        }
    }
}

.code {
    border-radius: 6px;
}

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

.share {
    position: fixed;
    right: 16px;
    bottom: 20vh;
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, @prim 0%, @warn 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: 260px;
    height: 260px;
    display: block;
}
.tabs {
    .flex();
    margin-top: 6px;
    span {
        font-size: 12px;
        color: #939599;
        line-height: 22px;
        padding: 0 10px;
        background: @bg3;
        border-radius: 4px;
        margin-right: 6px;
    }
}

.status {
    font-size: 14px;
    color: #939599;
    line-height: 24px;
    padding-top: 11px;
}

.sold {
    background-color: #1c1e25;
    font-size: @font1;
    color: #939599;
    padding: 0 17px;
    border-radius: 13px;
    line-height: 24px;
    position: absolute;
    top: 16px;
    left: 16px;
    z-index: 3;

    &.xianliang {
        position: absolute;
        top: 16px;
        left: 16px;
        font-size: @font1;
        color: @prim;
        display: flex;
        align-items: center;
        // border-radius: 13px !important;
        z-index: 4;
        padding: 0 10px !important;

        img {
            width: 18px;
            height: 18px;
            margin-right: 3px;
        }
    }
}

.btn {
    padding: 30px;
}

.assignmentPost {
    width: 300px;
    height: 500px;
    background: #ffffff;
    border-radius: 30px;
    position: relative;
    .qrcode {
        background-color: @bg3;
        padding: 6px;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        bottom: 94px;
        border-radius: 6px;
        z-index: 20;
        /deep/canvas {
            display: block;
        }
    }
}

.collecions {
    position: absolute;
    top: 50px;
    left: 0;
    right: 0;
    z-index: 3;
    width: 200%;
    .flex();
    overflow: hidden;
    transform: scale(0.8);
    transform-origin: 0 0 0;
    .van-image {
        flex-shrink: 0;
    }

    .users {
        padding-left: 60px;
        .flex();
        .users-text {
            .flex-col();
            align-self: stretch;
            width: 180px;
            padding-left: 10px;
        }
        .name {
            font-size: 24px;
            font-weight: bold;
            color: #ffffff;
            line-height: 30px;
            flex-grow: 1;
        }
        .sub {
            font-size: 12px;
            color: rgba(255, 255, 255, 0.6);
            line-height: 17px;
        }
    }

    & > .van-image {
        margin-right: 60px;
    }
}
</style>
