<!-- 好友助力 -->
<template>
    <div class="help">
        <div class="tips">当前正在参与该活动</div>
        <!-- 专场信息 -->
        <div class="performance">
            <div class="img">
                <img
                    :src="info.UserAccountHeadImg?info.UserAccountHeadImg:require('@/assets/images/default.png')"
                />
            </div>
            <p
                class="txt"
            >（{{info.UserAccountName}}）正在参加亮健优医举行的{{info.DissertationName}}义诊专场活动，需要您为ta的健康加油。</p>
            <div class="check" @click="catZhuanchang">查看专场</div>
        </div>

        <!-- 亮健值 -->
        <div class="lj">
            <div class="lj-value">
                幸运值：
                <span>{{info.TotalFraction}}</span>
            </div>

            <!-- 助力中 -->
            <div class="lj-loading">
                <div class="box">
                    <div class="loading" :style="`width:${number}%`">
                        <div>正在加速中</div>
                    </div>
                </div>
                <div class="speed">
                    <div>低速</div>
                    <div>中速({{info.IntermediateFraction}})</div>
                    <div>高速({{info.SeniorFraction}})</div>
                    <div>极速({{info.SuperFraction}})</div>
                </div>

                <p
                    class="fiends-tips"
                    v-if="info.IsOneself&&residueTotal.people"
                >当前已有{{friendsArr.length}}位好友加入，再邀请{{residueTotal.people}}位可直接获得{{residueTotal.fraction}}幸运值</p>

                <div class="button" @click="invite">{{btnTit}}</div>
                <div class="rules" @click="show=true;">活动规则</div>
            </div>
        </div>

        <!-- 助力好友 -->
        <!-- <div class="lj-friends" v-if="friendsArr.length"> -->
        <div class="lj-friends" v-if="friendsArr.length">
            <div class="tit">协助好友</div>

            <div class="friends">
                <div
                    class="friends-item"
                    v-for="(item,key) in friendsArr"
                    :key="key"
                    style="width:100%;height:1rem;"
                    :data-ljvalue="item.AdditionalFraction?`+${item.AdditionalFraction}`:``"
                >
                    <van-image
                        :src="item.AssistanceHeadImg?item.AssistanceHeadImg:require('@/assets/images/default.png')"
                        width=".7rem"
                        height=".7rem"
                        fit="cover"
                        round
                        class="img"
                    ></van-image>
                    <span class="name">{{item.AssistanceAccountName}}</span>
                    <span class="value">+{{item.Fraction}}</span>
                </div>
            </div>
        </div>

        <!-- 规则说明 -->
        <van-action-sheet v-model="show" title="规则说明">
            <p
                style="padding:.2rem;font-size:.26rem;height:5rem;line-height:1.5;color:#000;text-align:left;"
            >
                1、活动时间：即日起至专场预约的截止时间。
                <br />2、活动玩法介绍：用户关注亮健优医微信平台后报名参与义诊预约，预约完成后可通过召唤好友协助，来增加幸运值，幸运值越高获得最终义诊名额的概率越高哦。
                <br />
                3、幸运值加速小贴士：邀请好友助力健康，好友助力后，将会随机为您增加{{info.MinFraction}}-{{info.MaxFraction}}点亮健值，亮健值越高，义诊名额被抽中概率越高。用户每成功召唤到{{configDetail[0]}}位用户协助自己，可额外获得{{configDetail[1]}}幸运值，单个用户最多获得幸运值。
                <br />4、特别说明：同一用户不可重复协助同一好友。
                <br />5、本次活动最终解释权归亮健优医所有。
            </p>
        </van-action-sheet>

        <!-- 助力提示框 -->
        <van-popup v-model="lj_show">
            <div class="lj_toast">
                <div class="txt">{{toastTips}}</div>
                <div class="close" @click="lj_show=false;">
                    <van-icon name="cross" />
                </div>
                <div class="btn" @click="handleZhuLi(OrderID)">{{lj_title}}</div>
            </div>
        </van-popup>

        <!-- 助力提示框二维码提示 -->
        <van-popup v-model="qr_show">
            <div class="qr_show">
                <div class="close" @click="qr_show=false;">
                    <van-icon name="cross" />
                </div>
                <img :src="qrcode" alt="亮健优医" class="img" />
            </div>
        </van-popup>

        <div class="mask" v-if="imgShareShow" @click="imgShareShow=false">
            <img :src="require('@/assets/images/share.png')" alt />
        </div>
    </div>
</template>
<script>
    /**
     * 点击助力  助力完成后未关注的弹出二维码
     * 已经关注的弹出预约场次
     * 或者跳转到专场预约
     */
    import { share } from "@/assets/js/weixinShare.js";
    export default {
        name: "friendHelp",
        data() {
            return {
                // 助力专场信息
                info: {
                    IsOneself: true, //是否本人
                    IsAssistance: false //未助力
                },
                friendsArr: [], //朋友助力名单
                id: "", //预约单id
                OrderID: "", // 被分享人自己的预约ID
                show: false, // 助力规则显示

                lj_show: false, // 亮健助力弹窗显示
                lj_title: "立即免费预约", // 亮健助力弹窗按钮提示
                toastTips: "", // 助力弹窗内容
                qr_show: false, // 亮健助力二维码提示
                qrcode:
                    "https://mp.weixin.qq.com/cgi-bin/showqrcode?ticket=gQHl8DwAAAAAAAAAAS5odHRwOi8vd2VpeGluLnFxLmNvbS9xLzAyclRST2NzSFc4b1UxR3pST050Y00AAgSTp7JdAwQQDgAA", // 临时二维码

                imgShareShow: false, // 分享图片显示
                titleType: (() => {
                    let random = Math.random();
                    random;
                    switch (true) {
                        case random < 0.334:
                            return 0;
                        case random < 0.667:
                            return 1;
                        default:
                            return 2;
                    }
                })(), // 标题种类
                configDetailList: [] // 助力值设置
            };
        },
        methods: {
            init() {
                this.id = this.$route.query.id;
                if (this.$route.query.type) {
                    this.titleType = this.$route.query.type;
                }
                if (!this.id) return this.$router.back();
                // 获取助力详情
                this.GetAssistance();
                // 百度分享功能
                this.baiduShare();
            },
            // 获取助力详情
            GetAssistance() {
                this.$toast.loading("加载中...");

                this.$http.GetAssistance(this.id).then(({ data }) => {
                    this.$toast.clear();

                    if (data.IsSuccess) {
                        // 成功
                        let {
                            DetailList,
                            ConfigDetailList,
                            ...infoObj
                        } = data.ResultObject;
                        this.info = infoObj;
                        this.friendsArr = DetailList;
                        this.configDetailList = ConfigDetailList; // 助力值
                    } else {
                        // 失败
                        this.$toast(data.ResultMsg);
                    }
                });
            },
            // 邀请助力
            invite() {
                // 本人  分享
                if (this.info.IsOneself) {
                    return (this.imgShareShow = true);
                }

                // 百度统计  以/开头的相对路径
                window._hmt.push([
                    "_trackPageview",
                    this.$route.path + "?titleType=" + this.titleType
                ]);

                if (this.info.IsAssistance) {
                    // 专家到家页面
                    if (!this.info.IsAssistanceAccount) {
                        this.$toast("请先关注公众号");
                        setTimeout(() => {
                            this.$router.push("/NoFollow");
                        }, 2000);
                    } else {
                        this.$router.push("/home");
                    }
                    return;
                }

                // 助力
                this.$http.AddAssistance(this.id).then(({ data }) => {
                    if (data.IsSuccess) {
                        this.qrcode = data.ResultObject.QRCodeUrl; //二维码

                        // 提示信息
                        this.toast(data.ResultObject);

                        // 获取助力详情
                        this.GetAssistance();
                    } else {
                        // 失败
                        this.$toast(data.ResultMsg);
                    }
                });
            },
            // 查看专场
            catZhuanchang() {
                if (!this.info.IsAssistanceAccount) {
                    this.$toast("请先关注公众号");
                    setTimeout(() => {
                        this.$router.push("/NoFollow");
                    }, 2000);
                } else {
                    this.$router.push({
                        name: "freeClinicDetail",
                        query: { id: this.info.DissertationID }
                    });
                }
            },
            // 百度分享
            baiduShare() {
                window._hmt = window._hmt ? window._hmt : [];
                (function() {
                    var hm = document.createElement("script");
                    hm.id = "baiDu-share";
                    hm.src =
                        "https://hm.baidu.com/hm.js?93ff1729c94ccd4ce52fa1bc571474cf";
                    var s = document.getElementsByTagName("script")[0];
                    s.parentNode.insertBefore(hm, s);
                })();
            },
            // 删除分享
            removeShare() {
                var hm = document.getElementById("baiDu-share");
                hm ? hm.parentNode.removeChild(hm) : "";
            },
            // 获取带参数的二维码
            getQRCode() {
                this.$http.a(this.info.UserAccountID).then(({ data }) => {
                    console.log(data);
                });
            },
            /**
             * 弹窗方法
             * @params {object} 数据对象
             * IsFollow=>是否关注
             * QRCodeUrl=>二维码图片
             * IsOrder=>是否预约
             * OrderID=>最近预约场次id
             */
            toast(obj) {
                if (obj.IsFollow) {
                    // 已经关注
                    if (obj.IsOrder) {
                        // 已经预约
                        this.lj_title = "呼朋唤友来帮忙";
                        this.toastTips =
                            "您已成功帮好友加速。您预约的专场也可以叫朋友帮忙哦！";
                        this.OrderID = obj.OrderID; //最近的预约单id
                        this.lj_show = true;
                    } else {
                        // 跳转
                        this.lj_title = "立即免费预约";
                        this.toastTips =
                            "您已成功帮好友加速，本月有多场湘雅名医免费名额，点此马上参与预约！";

                        this.OrderID = "";
                        this.lj_show = true;
                    }
                } else {
                    // 未关注
                    this.qr_show = true;
                }
            },
            // 助力成功点击按钮
            handleZhuLi(id) {
                this.lj_show = false;
                if (id) {
                    this.$router.push({
                        name: "friendHelp",
                        query: { id: id }
                    });
                } else {
                    this.$router.push({ name: "home" });
                }
            },
            // 随机标题
            randomTitle() {
                /**
                 * 随机标题
                 * @return {number} 标题种类 0=>1
                 */
                return Math.random() > 0.5 ? 0 : 1;
            }
        },
        created() {
            this.init();
            // 分享
            share(this.titleType);
        },
        computed: {
            //助力速度  最低为10  最高为100    10 =>低速  36=>中速  64=>高速 96 =>极速
            number() {
                let percent = this.info.TotalFraction;
                switch (true) {
                    case percent >= this.info.SuperFraction: // 急速
                        return 96;
                    case percent >= this.info.SeniorFraction: // 高速
                        return 64;
                    case percent >= this.info.IntermediateFraction: // 低速
                        return 36;
                    default:
                        return 10;
                }
            },
            // 按钮变化
            btnTit() {
                // if (this.friendsArr.length > 30) return "助力完成";
                // 本人
                if (this.info.IsOneself) {
                    return "呼朋唤友来帮忙";
                } else {
                    // false  没有助力  true =>助力成功
                    if (!this.info.IsAssistance) {
                        return "帮Ta一把";
                    } else {
                        return "抢专家号";
                    }
                }
            },
            // 助力值规则变化
            configDetail() {
                let peopleNumber = ""; // 人数
                let fraction = ""; //助力值
                this.configDetailList.map(v => {
                    peopleNumber += v.Number + "/";
                    fraction += v.Fraction + "/";
                });
                return [
                    peopleNumber.substr(0, peopleNumber.length - 1),
                    fraction.substr(0, fraction.length - 1)
                ];
            },
            // 还剩多少人可以获取到额外的幸运值
            residueTotal() {
                let peopleNumberArr = []; // 人数
                let fractionArr = []; //助力值

                this.configDetailList.map(v => {
                    peopleNumberArr.push(v.Number);
                    fractionArr.push(v.Fraction);
                });

                let len = this.friendsArr.length; // 好友助力人数

                for (let i = 0; i < peopleNumberArr.length; i++) {
                    if (len < peopleNumberArr[i]) {
                        return {
                            people: peopleNumberArr[i] - len,
                            fraction: fractionArr[i]
                        };
                    }
                }

                return {
                    people: 0,
                    fraction: 0
                };
            }
        },
        beforeDestroy() {
            this.removeShare();
        },
        watch: {
            $route(to, from) {
                this.init();
                share(this.titleType);
            }
        }
    };
</script>
<style lang='less' scoped>
    .help {
        background-image: linear-gradient(0deg, #ff5c36 0%, #fea046 100%);
        min-height: 100vh;
        padding: 0.2rem 0.2rem 1rem;

        .tips {
            text-align: left;
            height: 0.9rem;
            line-height: 0.9rem;
            font-size: 0.36rem;
            font-weight: 600;
            color: #ffffff;
            text-shadow: 0.05rem 0.05rem 0.02rem #ff6800;
        }

        //专场信息 -->
        .performance {
            position: relative;
            margin-top: 0.64rem;
            padding: 0 0.21rem 0.25rem;
            border-radius: 0.1rem;
            background-color: #fff;
            .img {
                position: absolute;
                left: 50%;
                top: -30%;
                transform: translateX(-50%);
                width: 1.28rem;
                height: 1.28rem;
                padding: 0.04rem;
                border-radius: 50%;
                background-color: #ffffff;

                img {
                    width: 100%;
                    border-radius: 50%;
                }
            }

            .txt {
                text-align: left;
                padding-top: 0.74rem;
                font-size: 0.3rem;
                line-height: 1.5;
                color: #666666;
                border-bottom: 0.02rem solid #f6f6f6;
            }

            .check {
                color: #4ba8ff;
                font-size: 0.28rem;
                margin-top: 0.25rem;
            }
        }

        //<!-- 亮健值 -->
        .lj {
            padding-top: 0.3rem;
            .lj-value {
                text-align: left;
                color: #fff;
                font-size: 0.32rem;
                span {
                    font-size: 0.44rem;
                }
            }
            @keyframes barberpole {
                0% {
                    background-position: 0% 0%;
                }
                100% {
                    background-position: 100rem 0%;
                }
            }
            .lj-loading {
                padding: 0.9rem 0.2rem 0;
                .box {
                    height: 0.4rem;
                    padding: 0.04rem;
                    border-radius: 0.2rem;
                    background-color: #fff;

                    .loading {
                        position: relative;
                        // background-color: #f5e34d;
                        background-image: repeating-linear-gradient(
                            -45deg,
                            #f5e34d,
                            rgb(250, 213, 2) 0.3rem,
                            #f5e34d 0.3rem,
                            rgb(250, 213, 2) 0.6rem
                        );
                        transition: all 1s;
                        animation: barberpole 50s linear infinite;
                        border-radius: 0.2rem;
                        height: 100%;

                        &::before {
                            content: "";
                            position: absolute;
                            width: 0.5rem;
                            height: 0.5rem;
                            background-color: #fff8b5;
                            right: 0;
                            top: 50%;
                            border-radius: 50%;
                            transform: translateY(-50%);
                        }

                        > div {
                            position: absolute;
                            right: -0.5rem;
                            top: -0.66rem;
                            width: 1.5rem;
                            height: 0.38rem;
                            line-height: 0.38rem;
                            background-color: #f5e34d;
                            border-radius: 0.08rem;
                            font-size: 0.26rem;
                            color: #fe8b41;

                            border: 0.01rem solid #fff;
                            &::before,
                            &::after {
                                content: "";
                                position: absolute;
                                width: 0;
                                bottom: -0.28rem;
                                left: 50%;
                                margin-left: -0.14rem;
                                border: solid transparent 0.14rem;
                                border-top-color: #fff;
                            }
                            &::after {
                                bottom: -0.22rem;
                                left: 50%;
                                margin-left: -0.12rem;
                                border: solid transparent 0.12rem;
                                border-top-color: #f5e34d;
                            }
                        }
                    }
                }

                .speed {
                    font-size: 0.26rem;
                    color: #fff;
                    padding: 0.18rem;
                    display: flex;
                    justify-content: space-between;
                }
            }

            .button {
                width: 6rem;
                height: 0.8rem;
                border-radius: 0.4rem;
                background-image: linear-gradient(0deg, #ffb74a 0%, #ffe485 100%),
                    linear-gradient(#ffffff, #ffffff);
                box-shadow: 0.02rem 0.02rem 0.07rem 0rem rgba(255, 66, 15, 0.35);
                font-size: 0.38rem;
                color: #ff6237;
                font-weight: bold;
                animation: Scale 0.5s infinite alternate;
                margin-top: 0.3rem;
            }

            .fiends-tips {
                text-shadow: 0.04rem 0.04rem 0.1rem #ff4400;
                line-height: 1.5;
                font-size: 0.3rem;
                color: #ffffff;
            }

            .rules {
                display: inline-block;
                margin-top: 0.2rem;
                font-size: 0.3rem;
                padding: 0.1rem;
                color: #ffffff;
            }
        }
        //<!-- 助力好友 -->
        .lj-friends {
            margin-top: 0.2rem;
            background-color: #ffffff;
            box-shadow: 0.03rem 0.04rem 0.1rem 0rem rgba(218, 218, 218, 0.25);
            border-radius: 0.1rem;

            .tit {
                display: inline-block;
                position: relative;
                height: 0.84rem;
                font-size: 0.32rem;
                line-height: 0.84rem;
                color: #ff5d36;
                &::after,
                &::before {
                    content: "";
                    position: absolute;
                    top: 0.42rem;
                    width: 1.35rem;
                    height: 0.02rem;
                    background-image: linear-gradient(
                        -86deg,
                        #ffffff 0%,
                        #ff6338 100%
                    );
                }

                &::before {
                    left: -110%;
                    background-image: linear-gradient(
                        90deg,
                        #ffffff 0%,
                        #fe6438 100%
                    );
                }
                &::after {
                    right: -110%;
                }
            }

            .friends {
                padding: 0 0.3rem;
                font-size: 0.3rem;
                max-height: 4.9rem;
                min-height: 1rem;
                overflow-y: auto;
                .friends-item {
                    position: relative;
                    display: flex;
                    align-items: center;

                    &::before {
                        content: attr(data-ljvalue);
                        position: absolute;
                        top: 0.02rem;
                        left: 0.5rem;
                        color: red;
                        font-size: 0.2rem;
                        z-index: 1;
                    }

                    .img {
                        margin-right: 0.2rem;
                        flex-shrink: 0;
                        position: relative;
                    }
                }

                .name {
                    color: #333333;
                }
                .value {
                    flex: 1;
                    text-align: right;
                    color: #ff5d36;
                }
            }
        }
    }

    // 分享遮罩
    .mask {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 12;
        img {
            width: 100%;
            height: 100vh;
        }
    }

    //助力提示框
    /deep/ .van-popup--center {
        background: transparent;

        .lj_toast {
            position: relative;
            width: 7rem;
            height: 4rem;
            background-color: transparent !important;
            background: url("../../../assets/images/friendHelp/toast.png") no-repeat
                top/100%;
            background-position-x: -0.5rem;
            // transform: translateX(-0.5rem);

            .txt {
                padding-top: 1.4rem;
                width: 4rem;
                margin: 0 auto;
                font-size: 0.28rem;
                line-height: 0.48rem;
                color: #feea9d;
                &::first-line {
                    color: #fff;
                }
            }

            .close {
                position: absolute;
                top: 0;
                right: 1rem;
                display: flex;
                align-items: center;
                justify-content: center;
                width: 0.4rem;
                height: 0.4rem;
                background-color: #ffffff;
                border-radius: 50%;
                opacity: 0.2;
            }

            .btn {
                position: absolute;
                bottom: 0.2rem;
                left: 50%;
                transform: translateX(-50%);
                font-size: 0.28rem;
                width: 2.5rem;
                height: 0.84rem;
                line-height: 0.84rem;
                background-image: linear-gradient(0deg, #ffef95 0%, #ffffff 100%);
                border-radius: 0.42rem;
                color: #7f4e03;
            }
        }

        .qr_show {
            position: relative;
            width: 7.45rem;
            height: 9.7rem;
            background: url("../../../assets/images/friendHelp/1.png") no-repeat
                top/100%;
            .close {
                position: absolute;
                bottom: 0.34rem;
                left: 50%;
                transform: translateX(-50%);
                display: flex;
                align-items: center;
                justify-content: center;
                width: 0.7rem;
                height: 0.7rem;
            }
            .img {
                width: 2.7rem;
                height: 2.7rem;
                margin-top: 4.9rem;
            }
        }
    }
</style>
