<template>
    <div class="changshi" id="temp">
        <div class="banner">
            <img src="./img/banner.jpg" alt="">
        </div>
        <div class="inputBox">
            <input v-model="phone" class="input" type="text" @input="inpChange" maxlength="11" placeholder="请输入联通号码">
        </div>
        <div class="btnBox" @click="btnClick">
            <div class="btnText">
                立即开通
            </div>
        </div>
        <div class="contentBox1">
            <div class="title"><img src="./img/product.png" alt=""></div>
            <div class="main">
                <p>1.本产品名称【腾讯视频10G流量加会员月包】，资费25元/月。</p>
                <p>2.本产品包含【腾讯视频月会员】和【腾讯视频10GB流量】，流量当月有效，不可结转且不可转赠，并服从联通流量封顶统一限制。</p>
                <p>3.本产品订购立即生效，退订次月失效，如未退订将按自然月续订并收费。</p>
                <p>4.订购、使用本产品请以本机实际使用号码为准。</p>
                <p>5.订购当月，系统将会员和流量自动充值到订购手机号码中。</p>
                <p>6.续订当月，请领取会员，路径：微信小程序【联通畅视】—【首页】—【领取你的】—【畅视会员】（*需授权订购手机号码登录）。</p>
                <p>7.如果手机号码已绑定腾讯视频账号，可直接登录使用，如未绑定，需先绑定方可使用，可通过<a style="color: #ffffff;text-decoration:underline"
                        href="https://q.url.cn/CDmhBl"> https://q.url.cn/CDmhBl </a>绑定账号。</p>
                <p>8.本产品仅支持腾讯视频手机客户端8.5.70及以上版本。</p>
                <p>9.本产品流量使用范围为视频格式内容，具体包括视频播放、视频缓存、观看直播，使用时请以联通流量标识为准。</p>
                <p>10.本产品仅支持中国大陆地区使用。</p>
                <p>11.本产品仅支持中国联通用户使用。</p>
                <p>12.请使用默认3GNET接入点访问本产品。</p>
                <p>13.请勿使用流量监控及代理类软件，避免策略失效而产生流量费。</p>
                <p>14.如有任何疑问，请咨询联通客服4000600611。</p>
            </div>
        </div>
        <div class="bottom">京ICP备17006367号-3</div>
        <!-- 订购超时 -->
        <van-overlay :show="showTimeout" :duration="0.1" @click="showTimeout = false">
            <div class="timeout-modal modal" @click.stop>
                <div>中国联通正在努力为您开通，</div>
                <div>请以收到开通成功的短信为准。</div>
                <div>感谢您的耐心等待！</div>
                <div class="btn" @click="showTimeout = false">确认</div>
            </div>
        </van-overlay>
    </div>
</template>
<script>
    import axios from 'axios'
    import util from '../../util'
    import {
        Toast
    } from "vant";
    export default {
        data() {
            return {
                iframeUrl: process.env.VUE_APP_IFAMRE,
                param: {
                    cpid: 'tencent',
                    spid: '1056',
                    channel: "boyuan",
                    channeltype: "1",
                    timestamp: "",
                    clienttype: "3",
                    sign: "",
                    phone: "",
                    theme: "",
                    version: "1.0.0",
                    servicephone: "",
                },
                phone: "",
                user: "",
                iframe: {},
                isFrame: false,
                showTimeout: false,
                apiQuery: {},
                harf: 'https://v.wo186.tv/a/proapi/h5'
                // harf: 'https://test.wo186.tv/TJtest/host/api/h5'
                // harf: 'https://operationimg.mige.tv'

            }
        },
        created() {
            document.title = "腾讯视频会员+10GB流量"
            // this.apiQuery = this.$route.query
            this.apiQuery = util.query2obj(location.search)
            // this.test()
        },
        mounted() {
            var that = this
            // 统一认证监听
            window.addEventListener('message', e => {
                this.isFrame = false;
                try {
                    var data = JSON.parse(e.data);
                    switch (data.resultcode) {
                        case "0": //处理成功
                            this.onMessageSuccess(data);
                            break;
                        case "0001": //auth_no无效
                        case "0003": //client_id不存在
                        case "4444": //服务暂时不可用（系统忙/系统队列满）
                        case "9001": //关闭H5认证页面
                            that.iframe.remove();
                            that.$toast(res.data);
                            break;
                        default:
                            that.$toast(res.data)
                            break;
                    }
                } catch (e) {}
            }, false);
        },
        methods: {
            openIframe() {
                var that = this
                that.isFrame = true
                this.$toast.loading({
                    message: '请求中...'
                });
                let now = Date.now()
                that.param.timestamp = now
                if (that.phone) {
                    that.param.phone = that.phone
                }
                that.param.sign = that.$md5(this.param.cpid + now + '!QAZ2wsx')
                let iframe = document.createElement('iframe');
                let bodyDom = document.getElementById('temp');
                iframe.id = 'iframe'
                iframe.classList.add('iframe')
                iframe.src = that.iframeUrl
                bodyDom.insertBefore(iframe, bodyDom.lastChild)
                this.iframe = iframe
                iframe.onload = function () {
                    iframe.contentWindow.postMessage(JSON.stringify(that.param), that.iframeUrl)
                    that.$toast.clear();
                }
            },
            async onMessageSuccess(data) {
                this.user = decodeURIComponent(data.userid)
                this.iframe.remove();

                let updata = {
                    cpid: this.param.cpid,
                    spid: this.param.spid,
                    productId: '64',
                    channelKey: '1625021b90d3',
                    token: data.token,
                    type: '0',
                    userid: decodeURIComponent(data.userid),
                    needJoinActivity: 1,
                    fromSource: "订购页",
                    anonymousId: this.$sensors.store._state.$device_id,
                    testId: this.$store.state.testId,
                    testGroupId: this.$store.state.testGroupId,
                }
                Toast.loading({
                    message: '加载中',
                    forbidClick: true,
                    duration: 10000
                });
                // axios.post(this.harf + '/a/proapi/h5/handle', updata)
                axios.post(this.harf + '/handle', updata)
                    .then(res => {
                        Toast.clear()
                        if (res.data.code === 10000) {
                            this.$toast.success('订购成功');
                            setTimeout(() => {
                                this.giveMember()
                            }, 1500)
                            this.postApi()
                        } else if (res.data.code === 999) {
                            this.showTimeout = true
                            this.postApi()
                        } else {
                            this.$toast.fail({
                                message: res.data.message
                            })
                        }
                    })
            },
            inpChange(e) {
                if (/^1[3456789]\d{9}$/.test(this.phone) && this.isFrame === false) {
                    setTimeout(() => {
                        this.openIframe()
                        e.srcElement.blur()
                    }, 100)

                }
            },
            btnClick() {
                if (this.phone === "") {
                    this.$toast('手机号不能为空!')
                } else {
                    if (/^1[3456789]\d{9}$/.test(this.phone)) {
                        this.openIframe()
                    } else {
                        this.$toast('请输入正确手机号!')
                    }
                }
            },
            postApi() {
                let nowTime = new Date().getTime()
                let params = {
                    event_type: "form",
                    context: {
                        ad: {
                            callback: this.apiQuery.clickid
                        },
                        // properties:{
                        //     pay_amount:1.234, //合法采纳
                        //     "pay_amount":"1.234", // 可以被转型成浮点型，合法采纳
                        //     "pay_amount":true ,//非法不采纳
                        //     "pay_amount":"some string", // 非法不采纳
                        //     "pay_amount":1234, //可以被转型成浮点型，合法采纳
                        //     "pay_amount":"1234",//可以被转型成浮点型，合法采纳
                        // }
                    },
                    timestamp: nowTime
                }
                axios({
                        method: "post",
                        headers: {
                            'Content-Type': 'application/json;charset=UTF-8'
                        },
                        // url: this.harf + "/a/proapi/h5/eventmgr",
                        url: this.harf + "/eventmgr",
                        data: params,

                    })
                    .then(res => {
                        console.log(res)
                    })
                    .catch(err => {
                        console.error(err);
                    })
            },
            // 直接领取会员
            giveMember() {
                let requestUrl = this.harf + '/joinActivity'
                let updata = {
                    activeType: '89',
                    userid: this.user,
                    channelKey: '1625021b90d3',
                    isCompositeProduct: 0,
                };
                axios({
                    method: 'post',
                    url: requestUrl,
                    data: updata
                }).then((res) => {
                    this.$toast.success('会员领取成功');
                }, (response) => {
                    this.$toast(response.message);
                })
            },
            test() {
                let params = {
                    channelKey: "785af509c40e"
                }
                // axios.get(this.harf + '/a/proapi/h5/detailByKey', {
                axios.get(this.harf + '/detailByKey', {
                        params: params
                    })
                    .then(res => {
                        console.log(res)
                    })
                    .catch(err => {
                        console.error(err);
                    })
            },

        }


    }
</script>
<style lang='scss'>
    .changshi {
        background-color: #042B85;
        color: #0d0d0d;
        min-height: 100vh;
        font-family: PingFang SC;
        width: 100vw;
        overflow-x: hidden;

        @keyframes scale {
            from {
                transform: scale(1);
            }

            to {
                transform: scale(0.8);
            }
        }


        .iframe {
            position: fixed;
            width: 100%;
            height: 100%;
            left: 0;
            top: 0;
            z-index: 9999;
        }

        .banner {
            width: 100%;
            height: 540px;

            img {
                width: 100%;
                height: 100%;
            }
        }

        .inputBox {
            width: 603px;
            height: 91px;
            background: #FFFFFF;
            border-radius: 46px;
            margin: 18px auto 0 auto;
            box-sizing: border-box;
            padding-left: 44px;
            padding-right: 44px;

            .input {
                width: 100%;
                margin: 0;
                padding: 0;
                border: none;
                outline: none;
                height: 100%;
                font-size: 29px;

                font-family: HYQiHei;
                font-weight: bold;
                color: #B0ACAC;
                opacity: 0.7;
                line-height: 79px;
            }
        }

        .btnBox {
            width: 516px;
            height: 96px;
            margin: 30px auto 40px auto;
            border-radius: 35px;
            animation-name: scale;
            animation-duration: 0.3s;
            animation-timing-function: ease-in-out;
            animation-iteration-count: infinite;
            animation-direction: alternate-reverse;

            .btnText {
                width: 100%;
                height: 100%;
                border-radius: 48px;
                text-align: center;
                line-height: 96px;
                font-size: 50px;
                font-family: HYQiHei;
                font-weight: bold;
                background: linear-gradient(#F9F3DB, #FBD657);
                // box-shadow: 0px 3px 6px 0px rgba(255, 255, 255, 0.64);
                color: #F60F0B;

            }
        }

        .contentBox1 {
            width: 638px;
            // height: 1184px;
            background: #0131A0;
            border-radius: 20px;
            margin: 0 auto;
            margin-bottom: 68px;
            color: #ffffff;
            padding: 40px 38px 50px 40px;
            box-sizing: border-box;

            .title {
                width: 394px;
                height: 68px;
                margin: 0 auto;

                img {
                    width: 100%;
                    height: 100%;
                }
            }

            .main {
                margin-top: 40px;

                p {
                    margin-top: 15px;
                    line-height: 35px;
                }
            }


        }

        .bottom {
            width: 100%;
            font-size: 16px;
            color: gray;
            text-align: center;
            padding-bottom: 30px;
        }

        .timeout-modal {
            padding: 60px 40px;
            font-size: 28px;
            line-height: 50px;
            text-align: center;
            color: #222222;

            .btn {
                width: 160px;
                line-height: 60px;
                margin: 50px auto 0;
                border-radius: 8px;
                background-color: #1876bc;
                color: #fff;
            }
        }

        .modal {
            box-sizing: border-box;
            position: absolute;
            left: 50%;
            top: 333px;
            transform: translateX(-50%);
            width: 530px;
            background-color: #fff;
            border-radius: 8px;

            .close {
                width: 80px;
                height: 80px;
                position: absolute;
                bottom: -130px;
                left: 50%;
                transform: translateX(-50%);
            }

            .top {
                width: 100%;
                height: 96px;
            }

            .logo {
                width: 92px;
                height: 50px;
                position: absolute;
                top: 22px;
                left: 37px;
            }
        }

    }
</style>