<template>
    <div class="new-card-alert">
        <div
            class="card-item"
            v-show="!copyErrorShow && (isWeChat || mini)"
            @click="onClickShare"
        >
            <img src="~imgPath/distribute/icon_weixin.png" />
            <div class="common-item-title">分享到微信</div>
        </div>
        <div
            class="card-item"
            v-show="!copyErrorShow && isQQ"
            @click="onClickShare"
        >
            <img src="~imgPath/distribute/icon_qq.png" />
            <div class="common-item-title">分享到QQ</div>
        </div>
        <div
            class="card-item btn-copy"
            v-show="!copyErrorShow && !mini"
            :data-clipboard-text="shorter_url || distribute_url_single"
            style="cursor: pointer" 
            onclick=""
        >
            <img src="~imgPath/distribute/copy_link.png" />
            <div class="common-item-title">复制链接</div>
        </div>
        <div class="copy-error" v-show="copyErrorShow">
            <div class="copy-error-tit">长按复制链接，转发推广:</div>
            <div class="copy-error-url">
                {{ shorter_url || distribute_url_single }}
            </div>
        </div>
        <div
            class="shade-box"
            v-show="openShareBox"
            @click="openShareBox = false"
        ></div>
        <div class="share-to-friend" v-show="openShareBox">
            <img
                class="share-arrows-icon"
                src="~imgPath/distribute/arrows_share.png"
            />
            <p class="share-tit">分享给好友</p>
            <div class="share-tit flex-box">
                <span>点击屏幕右上角</span>
                <img class="share-dot-icon" src="~imgPath/distribute/dot.png" />
                <span>将本页面分享给好友</span>
            </div>
        </div>
    </div>
</template>
<script>
import jsTools from '@xiaoe/js-tools'
import Clipboard from "clipboard"; // 复制插件
import Toast from "~publicAsset/libs/toast.js";
import { deviceEnv } from "~publicAsset/libs/checkEnv";

export default {
    name: "newCardAlertBox",
    props: {
        share_url: {
            default: "",
            type: String,
        },
    },
    data() {
        return {
            openShareBox: false,
            distribute_url_single: null, //单品
            copyErrorShow: false, //复制失败时，手动复制
            mini: deviceEnv(),
            shorter_url:''
        };
    },
    watch:{
        share_url:{
            handler (newUrl) {
                this.shorterShareUrl(newUrl)
            },
            immediate: true   
        }
    },
    mounted(){
        this.getDistributeUrl()
        let clipboard = new Clipboard(".btn-copy");
        clipboard.on("success", (e) => {
            Toast("链接复制成功");
            this.$emit("copySuccess");
            e.clearSelection();
        });

        clipboard.on("error", (e) => {
            this.copyErrorShow = true;
            console.error("Action:", e.action);
            console.error("Trigger:", e.trigger);
        });
    },
    computed: {
        // 是否是微信浏览器
        isWeChat() {
            const UA = window.navigator.userAgent.toLowerCase();
            return UA && UA.indexOf("micromessenger") > -1;
        },
        // 是否是QQ终端
        isQQ() {
            return window.wx.CLIENT_ENV === "qq";
        }
    },
    methods: {
        //长链接转换为短链接方便传播
        shorterShareUrl(){
           this.transformToShortUrl(this.share_url)
        },
        transformToShortUrl(long_url){
            jsTools.ajax({
                url:'/short/get_short_by_long',
                params:{
                    long_url_array:JSON.stringify([long_url])
                }
            }).then(res=>{
                if (res.code===0) {
                    this.shorter_url= res.data[0].short_url
                    return
                }
                this.shorter_url = long_url
            })
        },
        getDistributeUrl(){
            let distributeElement = document.getElementById("distribute_url")
            if (!distributeElement) return
            let distributeLongUrl = distributeElement.value ? distributeElement.value : null
            if (distributeLongUrl) { 
                this.distribute_url_single = this.transformToShortUrl(distributeLongUrl)
                return
            }
            //异常处理:没转换成功的话使用原长链接
            this.distribute_url_single = null
        },
        onClickShare() {
            this.openShareBox = true;
            this.$emit("shareSuccess");
        },
        copyUrl() {
            // 设置复制按钮
            let clipboard = new Clipboard(".btn-copy");
            clipboard.on("success", (e) => {
                Toast("链接复制成功");
                this.$emit("copySuccess");
                e.clearSelection();
            });

            clipboard.on("error", (e) => {
                this.copyErrorShow = true;
                console.error("Action:", e.action);
                console.error("Trigger:", e.trigger);
            });
        },
    },
};
</script>
<style scoped lang="scss">
.new-card-alert {
    width: 100%;
    height: 1.44rem;
    background: #ffffff;
    display: flex;
    box-sizing: border-box;
    .card-item {
        flex: 1;
        display: flex;
        text-align: center;
        justify-content: center;
        img {
            width: 0.96rem;
            height: 0.96rem;
            display: block;
            margin-right: 0.08rem;
            margin-top: 0.24rem;
        }
        .common-item-title {
            color: #666666;
            font-size: 0.28rem;
            line-height: 1.44rem;
        }
    }
    .shade-box {
        position: fixed;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        background: #000000;
        opacity: 0.67;
        z-index: 5;
    }
    .share-to-friend {
        width: 100%;
        position: fixed;
        left: 0;
        top: 0;
        z-index: 10;
        padding-top: 1.6rem;
        .share-arrows-icon {
            position: absolute;
            right: 1.44rem;
            top: 0.32rem;
            width: 1.16rem;
            height: 1.16rem;
        }
        .share-tit {
            font-size: 0.3rem;
            line-height: 0.42rem;
            font-size: 0.36rem;
            font-weight: 500;
            color: #ffffff;
            text-align: center;
            padding-bottom: 0.16rem;
        }
        .flex-box {
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .share-dot-icon {
            width: 0.4rem;
            height: 0.08rem;
            margin: 0 0.1rem;
        }
    }
    .copy-error {
        width: 100%;
        color: #666666;
        .copy-error-tit {
            text-align: center;
            font-size: 0.28rem;
        }
        .copy-error-url {
            font-size: 0.2rem;
            word-break: break-all;
        }
    }
}
</style>
