<template>
    <div class="main-contain">
        <div class="position">
            <bread-crumb :crumbs="crumbs"></bread-crumb>
        </div>
        <div class="app-container" style="padding: 0 6px 20px; background-color: #f6f8f9;">
            <div class="wx-share-panel">
                <div class="text-panel">
                    <p class="title">微信分享</p>
                    <p class="desc">以微信方式推送给客户，该方式可以监测活动的展现及参与次数</p>
                </div>
                <div class="qrcode-panel">
                    <div class="qrcode">
                        <img :src="qr_img" :style="{ opacity: qr_img.length > 0 ? 1 : 0 }" />
                    </div>
                    <div class="btn">
                        <el-button type="primary" @click="previewAction">新窗口预览</el-button>
                    </div>
                </div>
            </div>
            <div class="sms-share-panel">
                <div class="text-panel">
                    <p class="title">短信分享</p>
                    <p class="desc">以短信方式推送给客户</p>
                </div>
                <div class="btn-panel">
                    <el-button type="primary">短信推送</el-button>
                </div>
            </div>
            <div class="link-share-panel">
                <div>
                    <p class="title">网页链接</p>
                    <p class="desc">可以直接分享以下链接到相应媒体（邮件、QQ、微博等），或者嵌入到微信公众号菜单</p>
                </div>
                <div class="input-line">
                    <div class="input">
                        <el-input readonly v-model="short_url"></el-input>
                    </div>
                    <el-button type="primary" @click="copyAction">复制链接</el-button>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import BreadCrumb from "@/scrm_pages/components/bread-crumb"
import QRCode from "qrcode"
import { getActivityShareInfo } from "@/api/activity/activity"

export default {
    name: "ActivityShare",
    components: {
        BreadCrumb,
    },
    data() {
        return {
            crumbs: [
                { path: false, name: "活动详情" },
                { path: false, name: "活动分享" },
            ],

            activity_id: 0,
            short_url: "",
            qr_img: "",
        }
    },
    mounted() {
        this.activity_id = this.$route.query.id

        getActivityShareInfo(this.activity_id).then(rs => {
            var resp = rs.data
            if (resp.state == 1) {
                this.short_url = resp.data.url

                var opts = {
                    errorCorrectionLevel: "H",
                    type: "image/png"
                };
                var that = this;
                QRCode.toDataURL(this.short_url, opts, function(err, qr_url) {
                    if (err) {
                        console.log(err);
                    } else {
                        that.qr_img = qr_url;
                    }
                });

            } else {
                this.$message.error(resp.msg)
            }
        }).catch(err => {
            this.$message.error(err)
        })

    },
    methods: {
        previewAction: function () {
            // var new_page = this.$router.resolve({ 
            //     path: '/activity/preview',
            //     query: {
            //         id: this.activity_id,
            //     }   
            // })
            // window.open(new_page.href, '_blank');
            window.open(this.short_url, "_blank")
        },
        copyAction: function() {
            var input = document.createElement("input");
            input.value = this.short_url;
            document.body.appendChild(input);
            input.select();
            document.execCommand("Copy");
            document.body.removeChild(input);

            this.$message.success("已复制链接")
        }
    },
}
</script>

<style lang="scss" scoped>
.wx-share-panel {
    box-shadow: 0 0 1px #dee2e5;
    padding: 25px 35px;
    display: flex;
    background-color: white;

    .text-panel {
        flex: 1;

        .title {
            font-size: 16px;
            color: #485b6d;
            font-weight: bold;
            height: 40px;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
        }
        .desc {
            color: #7b8a97;
            font-size: 14px;
        }
    }
    .qrcode-panel {
        text-align: right;

        .qrcode {
            text-align: center;

            img {
                width: 120px;
                height: 120px;
            }
        }

        .btn {
            text-align: center;
        }
    }
}

.sms-share-panel {
    box-shadow: 0 0 1px #dee2e5;
    padding: 25px 35px;
    display: flex;
    margin-top: 20px;
    background-color: white;

    .text-panel {
        flex: 1;

        .title {
            font-size: 16px;
            color: #485b6d;
            font-weight: bold;
            height: 40px;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
        }
        .desc {
            color: #7b8a97;
            font-size: 14px;
        }
    }
    .btn-panel {
        text-align: right;
        padding-right: 4px;
    }
}

.link-share-panel {
    box-shadow: 0 0 1px #dee2e5;
    padding: 25px 35px;
    // display: flex;
    margin-top: 20px;
    background-color: white;

    .title {
        font-size: 16px;
        color: #485b6d;
        font-weight: bold;
        height: 40px;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
    }
    .desc {
        color: #7b8a97;
        font-size: 14px;
    }
    .input-line {
        margin-top: 20px;

        .input {
            display: inline-block;
            width: 400px;
        }
    }
}
</style>

