import * as compnt from "../../../../public/js/compnt.js";
import * as unicom from "../../../../public/js/unicom.js";

import "../scss/main.scss";

compnt.showLoading();
//alert('开始初始化')
unicom.init().then(function(response) {
    compnt.hideLoading();

    unicom.product = response.product[0];
    unicom.fesname = response.festival;

    //    alert('页面初始化完成')
    findRbtMvs();
    bindEvent();

    if (location.href.indexOf('/cancel') >= 0) {
        unicom.burypointLogId('110002'); // 退订页面pv, pv去重得到uv
        WoAnalytics.addPoint({ ad: $('#nanyanad').val(), ett: 'open', ea: 'cancel_open' + $('#nanyanlabel').val(), ct: 'web', pm: parseInt(unicom.query.sou, 32) })
    } else if (location.href.indexOf('/draw') >= 0) {
        unicom.burypointLogId('110003'); // 领取页面pv, pv去重得到uv
        WoAnalytics.addPoint({ ad: $('#nanyanad').val(), ett: 'open', ea: 'draw_open' + $('#nanyanlabel').val(), ct: 'web', pm: parseInt(unicom.query.sou, 32) })
    } else if (location.href.indexOf('/flow') >= 0) {
        unicom.burypointLogId('110004'); // 流量查询pv, pv去重得到uv
        WoAnalytics.addPoint({ ad: $('#nanyanad').val(), ett: 'open', ea: 'flow_open' + $('#nanyanlabel').val(), ct: 'web', pm: parseInt(unicom.query.sou, 32) })
    } else if (location.href.indexOf('/active') >= 0) {
        unicom.burypointLogId('110005'); // 激活页面pv, pv去重得到uv
        WoAnalytics.addPoint({ ad: $('#nanyanad').val(), ett: 'open', ea: 'active_open' + $('#nanyanlabel').val(), ct: 'web', pm: parseInt(unicom.query.sou, 32) })
    } else if (location.href.indexOf('/refund') >= 0) {
        unicom.burypointLogId('110006'); // 退款
    } else {
        unicom.burypointLogId('110001'); // 订购页面pv, pv去重得到uv
        WoAnalytics.addPoint({ ad: $('#nanyanad').val(), ett: 'open', ea: 'order_open' + $('#nanyanlabel').val(), ct: 'web', pm: parseInt(unicom.query.sou, 32) })
    }
})

function bindEvent() {
    $('#btn-order').unbind('click').on('click', function() {
        if (!compnt.lockClick()) {
            return;
        }

        doOrder(null);
    })

    $('#open-agr').unbind('click').on('click', function() {
        showDialogAgr();
    })
}

function doOrder(ringid) {
    var $dialog = showOrderMustRead();
    $dialog.find('.cancel').unbind('click').on('click', function() {
        if ($dialog.find('.cancel').html() == '我已经阅读并同意规则') {
            $dialog.close();
            compnt.unlockClick();

            unicom.showCapPage().then(function(data) {
                console.log(ringid);
                compnt.unlockClick();
                order(data.userid, data.token, data.usermob, ringid || unicom.query.ringid);
            }).fail(function(response) {
                compnt.unlockClick();
            })

            WoAnalytics.addPoint({ ad: $('#nanyanad').val(), ett: 'click', ea: 'order_click_order_btn' + $('#nanyanlabel').val(), ct: 'web', pm: parseInt(unicom.query.sou, 32) })
        }
    });

    $dialog.find('.close').unbind('click').on('click', function() {
        $dialog.close();
        compnt.unlockClick();
    });
}

function showCancelPage($parentDialog) {
    var $overlay = $('<div class="overlay"></div>');
    var $dialog = $(
        '<div class="fixed-center sms-form section-login"' +
        '    <div class="sms-form">' +
        '        <div class="form-group">' +
        '            <div class="input-row">' +
        '                <input class="usermob" type="tel" maxLength="11" name="phone" placeholder="请输入您的手机号码" />' +
        '            </div>' +
        '            <div class="input-row">' +
        '                <input class="smscode" type="tel" maxLength="6" name="sms" placeholder="请输入验证码">' +
        '                <span class="sendcode">获取验证码</span>' +
        '            </div>' +
        '        </div>' +
        '        <div class="actions">' +
        '            <div class="btn btn-primary cancel">取消</div>' +
        '            <div class="btn btn-info okay">确认</div>' +
        '        </div>' +
        '    </div>' +
        '</div>');

    $parentDialog && $parentDialog.hide();
    $overlay.appendTo($(document.body))
    $dialog.appendTo($(document.body))

    $('body').css('overflow', 'hidden')
    $dialog.close = function() {
        $overlay.remove();
        $dialog.remove();
        $parentDialog && $parentDialog.show();
        $("body").css("overflow", "auto");
    }

    $dialog.find('.cancel').unbind('click').on('click', function() {
        $dialog.close()
    })

    $dialog.find('.sendcode').unbind('click').on('click', function() {
        unicom.sendSms($dialog, 'cancellogin');
        WoAnalytics.addPoint({ ad: $('#nanyanad').val(), ett: 'click', ea: 'cancel_click_send_sms_code_btn' + $('#nanyanlabel').val(), ct: 'web', pm: parseInt(unicom.query.sou, 32) })
    })

    $dialog.find('.okay').unbind('click').on('click', function() {
        compnt.showLoading();
        unicom.checkCode($dialog).done(function() {
            compnt.hideLoading();
            $dialog.close();
            showConfirm('您确定退订视频彩铃包吗？', function() {
                doCancel($dialog, $parentDialog)
            });
        }).fail(function(data) {
            compnt.hideLoading();
        })

        WoAnalytics.addPoint({ ad: $('#nanyanad').val(), ett: 'click', ea: 'cancel_click_confirm_btn' + $('#nanyanlabel').val(), ct: 'web', pm: parseInt(unicom.query.sou, 32) })

        return $dialog;
    });

    WoAnalytics.addPoint({ ad: $('#nanyanad').val(), ett: 'click', ea: 'cancel_open' + $('#nanyanlabel').val(), ct: 'web', pm: parseInt(unicom.query.sou, 32) })

}

function doCancel($dialog, $parentDialog) {
    compnt.showLoading();
    unicom.cancel().done(function(response) {
        compnt.hideLoading();

        switch (response.resultCode) {
            case "0000":
                showAlertDialog('退订成功');
                $dialog.close();
                $parentDialog.close();
                WoAnalytics.addPoint({ ad: $('#nanyanad').val(), ett: 'click', ea: 'cancel_success' + $('#nanyanlabel').val(), ct: 'web', pm: parseInt(unicom.query.sou, 32) })

                break;
            case "7605": //应该是已经退订了吧，因此不需要在重复退订啦
                compnt.showAlert(response.errorInfo);
                $dialog.close();
                $parentDialog.close();
                WoAnalytics.addPoint({ ad: $('#nanyanad').val(), ett: 'click', ea: 'cancel_failure' + $('#nanyanlabel').val(), ct: 'web', pm: parseInt(unicom.query.sou, 32) })

                break;
            default:
                var prefix = '';
                if (response.errorInfo.indexOf('退订失败') < 0) {
                    prefix = '退订失败，';
                }
                compnt.showAlert(prefix + response.errorInfo);
                WoAnalytics.addPoint({ ad: $('#nanyanad').val(), ett: 'click', ea: 'cancel_failure' + $('#nanyanlabel').val(), ct: 'web', pm: parseInt(unicom.query.sou, 32) })

                break;
        }
    }).fail(function(data) {
        compnt.hideLoading();
    })
}

function findRbtMvs() {
    // 使用和抖音视频彩铃相同的视频列表
    unicom.findRbtMvs('2021073001').then(function(data) {
        //        alert('列表加载完成')
        window.rbtMvList = JSON.parse(data).data;
        window.rbtMvListLength = JSON.parse(data).data.length;
        for (var i = 0; i < window.rbtMvList.length; i++) {
            window.rbtMvList[i]['shown'] = '0';
        }
        showRbtMvs();
    }).fail(function(response) {

    })
}

function showRbtMvs(label) {
    $('#rbt-item-box').empty();
    var labelMap = {};
    for (var i = 0; i < window.rbtMvList.length; i++) {
        if (labelMap[window.rbtMvList[i].label] == null) {
            labelMap[window.rbtMvList[i].label] = '其它';
        }
    }

    // 重排序，使热门排在第一个
    var labelList = []
    $.each(labelMap, function(item, i) {
        if (item == '热门') {
            labelList[labelList.length] = labelList[0];
            labelList[0] = item;
        } else {
            labelList[labelList.length] = item;
        }
    })

    $.each(labelList, function(i, item) {
            var $item = $('<div id="' + item + '" class="item" total="0" showcount="0" oldshowcount="0">' + item + '</div>');

            if (label == null && item == '热门') {
                $item.addClass('item-active');
                label = '热门';
            }

            $item.on('click', function(event) {
                if ($(event.target).hasClass('item-active')) {
                    return;
                }

                // 删除以前选择的
                $('#rbt-item-box .item-active').removeClass('item-active');

                $(event.target).addClass('item-active');
                $(event.target).attr("showcount", "0"); //用于翻页
                $(event.target).attr("oldshowcount", "0");
                $('#rbtmv-container').attr('scrollTop', 0);
                $('#rbtmv-content').empty();
                for (var i = 0; i < window.rbtMvList.length; i++) {
                    window.rbtMvList[i]['shown'] = '0';
                }
                showRbtMvsBody($(event.target).html());
            })

            for (var i = 0; i < window.rbtMvList.length; i++) {
                if (window.rbtMvList[i].label == item) {
                    var total = $item.attr("total");
                    $item.attr("total", parseInt(total) + 1);
                }
            }

            $item.appendTo($('#rbt-item-box'));


        })
        //    alert('标题加载完成')
    showRbtMvsBody(label);
}

function showRbtMvsBody(label) {
    for (var i = 0; i < window.rbtMvList.length; i++) {
        if (window.rbtMvList[i].label == label) {
            var total = parseInt($('#' + label).attr("total"));
            var showcount = parseInt($('#' + label).attr("showcount"));
            var oldshowcount = parseInt($('#' + label).attr("oldshowcount"));
            if (showcount == oldshowcount + 6) {
                $('#' + label).attr("oldshowcount", showcount);
                break;
            }
            if (window.rbtMvList[i]['shown'] == '1') {
                continue;
            }

            $('#' + label).attr("showcount", showcount + 1);
            window.rbtMvList[i]['shown'] = '1';

            var $item = $(
                '<div class="rbt-item">' +
                '    <div class="rbt-main" src="' + window.rbtMvList[i].videUrl + '" poster="' + window.rbtMvList[i].coverUrl +
                '" contentid="' + window.rbtMvList[i].contentid + '" contentname="' + window.rbtMvList[i].contentname + '">' +
                '       <img class="rbt-cover" src="' + window.rbtMvList[i].coverUrl + '">' +
                '       <img class="rbt-play" src="v1/images/icon-play.png">' +
                '       <div class="btn btn-setting">设为彩铃</div>' +
                '    </div>' +
                '    <div class="rbt-title">' + window.rbtMvList[i].contentname + '</div>' +
                '</div>');

            $item.find('.rbt-play').unbind('click').on('click', function(event) {
                var videoUrl = $(event.target).parent().attr('src');
                var poster = $(event.target).parent().attr('poster');
                var ringid = $(event.target).parent().attr('contentid');
                var ringname = $(event.target).parent().attr('contentname');
                showDialogPreview(videoUrl, ringid, ringname, poster);
            });

            $item.find('.btn-setting').on('click', function() {
                var ringid = $(event.target).parent().attr('contentid');
                var ringname = $(event.target).parent().attr('contentname');
                setting(ringid, ringname);
            });

            $item.appendTo($('#rbtmv-content'));

            // 已经显示到底了
            if (total == showcount + 1) {
                var $dom = $('<div class="no-more"><div class="line"></div><div class="title">已经到底啦</div><div class="line"></div></div>')
                $dom.appendTo($('#rbtmv-content'))
            }
        }
    }
}

function setting(ringid, ringname) {
    if (ringid == null || ringid.trim() == "") {
        compnt.showAlert("请选择一个视频彩铃！");
        return;
    }
    var user = unicom.loadUserInfo();

    if (user != null && user.userid != null) {
        queryOrderStatusForSetting(user.userid, null, ringid, ringname);
    } else {
        showDialogMobile(ringid, ringname);
    }
}

function settingExecutor(ringid, ringname) {
    var usermob = unicom.user.usermob.substr(0, 3) + 'xxxx' + unicom.user.usermob.substr(7, 4);
    var message = '确认设置“' + ringname + '” 为' + usermob + '的视频彩铃吗？';
    showConfirm(message, function() {
        compnt.showLoading();
        unicom.setting(ringid).done(function(data) {
            compnt.hideLoading();
            if (data.resultCode == "0000") {
                showAlertDialog('设置成功')
                WoAnalytics.addPoint({ ad: $('#nanyanad').val(), ett: 'click', ea: 'draw_success' + $('#nanyanlabel').val(), ct: 'web', pm: parseInt(unicom.query.sou, 32) })

            } else {
                compnt.showAlert(data.errorInfo);
                WoAnalytics.addPoint({ ad: $('#nanyanad').val(), ett: 'click', ea: 'draw_failure' + $('#nanyanlabel').val(), ct: 'web', pm: parseInt(unicom.query.sou, 32) })

            }

            WoAnalytics.addPoint({ ad: $('#nanyanad').val(), ett: 'click', ea: 'draw_click_confirm_btn' + $('#nanyanlabel').val(), ct: 'web', pm: parseInt(unicom.query.sou, 32) })
        });
    })
}

function showDialogMobile(ringid, ringname) {
    var $overlay = $('<div class="overlay"></div>');
    var $dialog = $(
        '<div class="fixed-center section-setting">' +
        '    <div class="content">' +
        '        <div class="form-group">' +
        '            <input class="mobile" maxLength="11" type="tel" placeholder="输入联通手机号码">' +
        '        </div>' +
        '    </div>' +
        '    <div class="actions">' +
        '        <div class="btn btn-lg btn-primary">去设置</div>' +
        '    </div>' +
        '</div>');

    $overlay.appendTo($(document.body))
    $dialog.appendTo($(document.body))

    $dialog.close = function() {
        $overlay.remove();
        $dialog.remove();
    }

    $dialog.find('.btn').on('click', function(event) {
        var mobile = $dialog.find('.mobile').val();

        if (mobile == null || mobile.length != 11) {
            compnt.showAlert('请输入正确的手机号码！');
            return;
        }
        $dialog.close();
        queryOrderStatusForSetting(null, mobile, ringid, ringname);
    })

    $overlay.on('click', function() {
        $dialog.close();
    })

    return $dialog;
}

function queryOrderStatusForSetting(userid, mobile, ringid, ringname) {
    unicom.loadUserInfo();
    if (unicom.user != null && unicom.user.userid != null && (
            unicom.user.orderStatus == "0000" ||
            unicom.user.orderStatus == "0001")) {
        settingExecutor(ringid, ringname);
        return;
    }

    compnt.showLoading();
    unicom.queryOrder(userid, mobile).then(function(data) {
        compnt.hideLoading();

        switch (data.resultCode) {
            case "0000": //订购
            case "0001": //退订
                if (unicom.user != null && unicom.user.userid != null) {
                    unicom.user.orderStatus = data.resultCode;
                    unicom.saveUserInfo();
                }

                if (userid) {
                    settingExecutor(ringid, ringname)
                } else {
                    showDialogSmsCode(mobile, ringid, ringname);
                }

                break;
            case "9201":
                showConfirm('您未订购视频彩铃包产品', function() {
                    //                        alert(ringid)
                    doOrder(ringid);
                    //                        $('#btn-order').trigger('click');
                }, '取消', '去订购');
                break;
            default:
                compnt.showAlert(data.errorInfo);
                break;
        }

        return;
    })
}

function showDialogPreview(videUrl, ringid, ringname, poster) {
    var $dialog = $(
        '<div class="section-preview">' +
        '    <div class="content">' +
        '        <div class="close"><span>《</span>返回</div>' +
        '        <video src="' + videUrl + '" poster="' + poster + '"></video>' +
        '        <div class="play"></div>' +
        '        <div class="dail"></div>' +
        '        <div class="setting">设为视频彩铃</div>' +
        '        <a class="must-know" href="https://m.10155.com/h5/mactivity/terminal.html">设置须知</a>' +
        '    </div>' +
        '</div>');

    $dialog.appendTo($(document.body))

    $dialog.close = function() {
        $dialog.remove();
    }

    var $video = $dialog.find('video');
    var $playIcon = $dialog.find('.play');
    $video.on('play', function() {
        $playIcon.css('display', 'none')
    });

    $video.on('pause', function() {
        $playIcon.css('display', 'block')
    });

    $video.on('ended', function() {
        $playIcon.css('display', 'block')
    });

    $video.on('click', function() {
        if ($video.prop('paused')) {
            $video[0].play();
        } else {
            $video[0].pause();
        }
    });

    $playIcon.on('click', function() {
        $video[0].play()
    });

    $dialog.find('.setting').on('click', function() {
        setting(ringid, ringname, $dialog);
    })

    $dialog.find('.close').on('click', function() {
        $dialog.close();
    })

    return $dialog;
}

var argContent =
    '         <div class="title">业务说明</div>' +
    '          <div class="content">' +
    '             <ul>' +
    '                 <li>1.本产品为包年产品，合约期1年，合约期内，用户可连续12个月每个月享受15GB专属定向流量和抖音视频彩铃服务；</li>' +
    '                 <li>2.本产品资费为144元/年，订购成功后，将自动从用户手机话费中一次性扣除相应费用；</li>' +
    '                 <li>3.符合订购约定的中国联通手机4G、5G套餐（除智慧沃家等部分融合套餐）用户均可订购“抖音视频彩铃定向流量月包（趸交版）”。手机套餐中流量资费、流量使用规则另有约定的，按照手机套餐执行；</li>' +
    '                 <li>4.合约到期前如用户未办理取消业务则合约自动按年顺延；</li>' +
    '                 <li>5.本产品在合约期内原则上无法操作退订，如用户需要提前解约，可前往线下营业厅或拨打10010协助处理解约；提前解约将扣除相应违约金，违约金为“已履约月份数*优惠金额3元”；</li>' +
    '                 <li>6.本产品中的抖音视频彩铃仅支持适配终端使用，适配手机终端型号可在温馨提示的视频彩铃说明中查看；</li>' +
    '                 <li>7.达量限速套餐用户订购当前定向流量产品，包内定向流量不提升原套餐限速阈值和网速，不能作为限速后解限的加速包使用，依然执行基础套餐限速阈值的约定；</li>' +
    '                 <li>8.本产品内定向流量仅限当月使用，未使用部分不能延续、累加至次月及以后各月使用，且服从中国联通套餐流量封顶统一限制；</li>' +
    '                 <li>9.请使用手机默认3GNET接入点访问本产品（如需修改请在手机设置-移动网络-接入点APN内更改)；</li>' +
    '                 <li>10.关于产品使用过程中有任何疑问可咨询联通客服:10010；</li>' +
    '                 <li>11.对我们有任何意见和建议，点此<a href="https://account.bol.wo.cn/v2/feedback?clientId=directflow" style="color: #266cd6">反馈</a>。</li>' +
    '             </ul>' +
    '         </div>' +

    '         <div class="title">流量说明</div>' +
    '         <div class="content">' +
    '             <ul>' +
    '                   <li>1.定向流量适用范围包含：抖音短视频、今日头条、西瓜视频、火山小视频、多闪、懂⻋帝、图虫、皮皮虾、海豚股票、海豚财富、gogokid、轻颜、好好学习、飞聊、时光相册、半次元、飞书、激萌、番茄畅听APP使用；</li>' +
    '                   <li>2.定向流量适用范围不包含：发起直播及上传视频；第三方提供的广告、视频、图片；下载/缓存客户端及第三方链接视频所产生的流量；</li>' +
    '                   <li>3.若您的套餐(如蚂蚁宝卡、阿里宝卡、钉钉宝卡或工商银行e卡等)流量使用范围包含头条系相关产品，将优先使用套餐内的专属定向流量，用罄后即消耗该产品包内的定向流量。</li>' +

    '             </ul>' +
    '         </div>' +

    '         <div class="title">视频彩铃说明</div>' +
    '         <div class="content">' +
    '             <ul>' +
    '                   <li>1.中国联通手机4G、5G套餐用户（其中5G腾讯王卡用户入网第三个月起）可以享受抖音视频彩铃服务；</li>' +
    '                   <li>2.视频彩铃功能开通是设置/订购视频彩铃的前提，如果用户不支持视频彩铃功能开通，则无法设置/订购视频彩铃；</li>' +
    '                   <li>3.部分省分4G/5G联通用户如有一号多端IVPN服务，则不支持视频彩铃功能开通，即不支持视频彩铃业务使用；目前已有24个省分已支持一号多端IVPN服务同时使用视频彩铃业务，包括河南、湖北、浙江、四川、海南、河北、山东、山西、上海、江苏、福建、北京、江西、辽宁、吉林、内蒙古、广东、天津、湖南、贵州、陕西、广西、黑龙江、西藏；</li>' +
    '                   <li>4.订购该产品用户可通过抖音APP客户端进入视频彩铃专区，享受任意设置视频彩铃服务，同时可通过页面进行彩铃DIY；</li>' +
    '                   <li>5.成功设置视频彩铃后，其他人拨打已订购该产品的设备电话时，Ta就能看到已设置的视频；</li>' +
    '                   <li>6.成功设置视频彩铃后，他人来电时看到已订购该产品设备的视频彩铃有2个条件：①Ta的终端支持播放中国联通视频彩铃；②Ta开通了VoLTE网络并拨打您电话时处于VoLTE网络下，手机信号显示HD或5G（编辑短信“DGVOLTE”至10010免费开通）；注：仅支持联通用户间拨打观看；</li>' +
    '                   <li>7.手机终端型号支持拨打呈现视频彩铃适用机型可通过关注“沃音乐”微信公众号发送“终端”进行查询或点击链接<a href="https://m.10155.com/h5/mactivity/terminal.html">https://m.10155.com/h5/mactivity/terminal.html</a>了解适配机型。</li>' +
    '             </ul>' +
    '         </div>';

function showDialogAgr() {
    var $overlay = $('<div class="overlay"></div>');
    var $dialog = $(
        '<div id="section-agr" class="section-agr">' +
        '     <div class="agr-title">' +
        '         <div class="close"></div>' +
        '     </div>' +
        '     <div class="agr-content">' + argContent + '</div>' +
        '</div>');

    //        '     <div class="action">' +
    //        '         <div class="btn cancel">退订入口</div>' +
    //        '     </div>' +

    $overlay.appendTo($(document.body))
    $dialog.appendTo($(document.body))

    $('body').css('overflow', 'hidden')
    $dialog.close = function() {
        $overlay.remove();
        $dialog.remove();
        $("body").css("overflow", "auto");
    }

    $dialog.hide = function() {
        $dialog.close()
    }

    $dialog.show = function() {
        $overlay.css('display', 'block');
        $dialog.css('display', 'block');
    }

    $dialog.find('.close').unbind('click').on('click', function() {
        $dialog.close()
    })

    //    $dialog.find('.cancel').unbind('click').on('click', function() {
    //        $dialog.close();
    //        showCancelPage($dialog)
    //    })

    return $dialog;
}

function showOrderMustRead() {
    var $overlay = $('<div class="overlay"></div>');
    var $dialog = $(
        '<div id="section-must-read" class="section-must-read">' +
        '     <div class="agr-title">' +
        '     </div>' +
        '         <div class="close"></div>' +
        '     <div class="agr-content">' + argContent + '</div>' +
        '     <div class="action">' +
        '         <div class="btn cancel" style="background:#FAABD3">我已经阅读并同意规则(5s)</div>' +
        '     </div>' +
        '</div>');

    $overlay.appendTo($(document.body))
    $dialog.appendTo($(document.body))

    $('body').css('overflow', 'hidden')
    $dialog.close = function() {
        $overlay.remove();
        $dialog.remove();
        $("body").css("overflow", "auto");
    }

    $dialog.hide = function() {
        $dialog.close();
    }

    $dialog.show = function() {
        $overlay.css('display', 'block');
        $dialog.css('display', 'block');
    }

    $dialog.find('.close').unbind('click').on('click', function() {
        $dialog.close();
        compnt.unlockClick();
    })

    var i = 4;
    var interval = self.setInterval(function() {
        if (i == 0) {
            window.clearInterval(interval);
            $dialog.find('.cancel').css('background', '#FF0083');
            $dialog.find('.cancel').html('我已经阅读并同意规则');
        } else {
            $dialog.find('.cancel').html('我已经阅读并同意规则(' + (i--) + 's)');
        }
    }, 1000)

    //    $dialog.find('.cancel').unbind('click').on('click', function() {
    //        $dialog.close();
    //        showCancelPage($dialog)
    //    })

    $overlay.on('click', function() {
        $dialog.close()
        compnt.unlockClick();
    })

    return $dialog;
}

function showDialogSmsCode(mobile, ringid, ringname) {
    var $overlay = $('<div class="overlay"></div>');
    var $dialog = $(
        '<div class="fixed-center section-setting">' +
        '    <div class="content">' +
        '        <div class="form-group">' +
        '            <input type="hidden" class="usermob" value="' + mobile + '">' +
        '            <input class="code smscode" maxLength="6" type="tel" placeholder="输入联通验证码">' +
        '            <input class="send sendcode" type="button" value="发送验证码">' +
        '        </div>' +
        '    </div>' +
        '    <div class="actions">' +
        '        <div class="btn close">取消</div>' +
        '        <div class="btn btn-primary login">确认</div>' +
        '    </div>' +
        '</div>');

    $overlay.appendTo($(document.body))
    $dialog.appendTo($(document.body))

    $dialog.find('.close').unbind('click').on('click', function() {
        $dialog.close()
    })

    $dialog.find('.sendcode').on('click', function() {
        unicom.sendSms($dialog, 'drawlogin');
        WoAnalytics.addPoint({ ad: $('#nanyanad').val(), ett: 'click', ea: 'draw_click_send_sms_code_btn' + $('#nanyanlabel').val(), ct: 'web', pm: parseInt(unicom.query.sou, 32) })
    })

    $dialog.find('.login').on('click', function() {
        compnt.showLoading();
        unicom.checkCode($dialog).done(function() {
            compnt.hideLoading();
            unicom.saveUserInfo();
            $dialog.close();
            settingExecutor(ringid, ringname);
        }).fail(function() {
            compnt.hideLoading();
        })
    })

    $dialog.find('.sendcode').trigger('click');

    $('body').css('overflow', 'hidden')
    $dialog.close = function() {
        $overlay.remove();
        $dialog.remove();
        $dialog = null;
        $('body').css('overflow', 'auto')
    }

    return $dialog;
}

function showAlertDialog(message) {
    var $overlay = $('<div class="overlay"></div>');
    var $dialog = $(
        '<div class="fixed-center section-setting section-alert">' +
        '    <div class="content">' +
        '        <div class="status">' +
        '            <div class="status-icon"></div>' +
        '            <span class="status-name">' + message + '</span>' +
        '        </div>' +
        '    </div>' +
        '    <div class="actions">' +
        '        <div class="btn btn-lg btn-primary">知道了</div>' +
        '    </div>' +
        '</div>');

    $overlay.appendTo($(document.body))
    $dialog.appendTo($(document.body))

    $dialog.find('.btn').unbind('click').on('click', function() {
        $dialog.close()
    })

    $dialog.close = function() {
        $overlay.remove();
        $dialog.remove();
        $dialog = null;
        $('body').css('overflow', 'auto')
    }

    $('body').css('overflow', 'hidden')

    return $dialog;
}

function showConfirm(message, handler, cancelLabel, okayLabel) {
    var $overlay = $('<div class="overlay"></div>');
    var $dialog = $(
        '<div class="fixed-center section-message">' +
        '    <div class="content">' + message + '</div>' +
        '    <div class="actions">' +
        '        <div class="btn close btn-primary">' + (cancelLabel || "取消") + '</div>' +
        '        <div class="btn okay btn-info">' + (okayLabel || '确认') + '</div>' +
        '    </div>' +
        '</div>');

    $overlay.appendTo($(document.body))
    $dialog.appendTo($(document.body))

    $dialog.find('.close').unbind('click').on('click', function() {
        $dialog.close()
    })

    $dialog.find('.okay').unbind('click').on('click', function() {
        handler && handler();
        $dialog.close();
    })

    $dialog.close = function() {
        $overlay.remove();
        $dialog.remove();
        $dialog = null;
    }

    return $dialog;
}

/**
 * 订购
 */
function order(userid, token, usermob, ringid) {
    compnt.showLoading('处理中，请稍后...');

    unicom.order(userid, token, usermob, ringid).done(function(response) {
        compnt.hideLoading();
        switch (response.resultCode) {
            case "0000": //订购成功！跳转到领取会员页面
                unicom.saveUserInfo();
                showAlertDialog('订购成功');
                WoAnalytics.addPoint({ ad: $('#nanyanad').val(), ett: 'click', ea: 'order_success' + $('#nanyanlabel').val(), ct: 'web', pm: parseInt(unicom.query.sou, 32) });
                return;
            case "0013":
                compnt.showAlert('该号码归属省分2/3G暂未开通此产品！');
                WoAnalytics.addPoint({ ad: $('#nanyanad').val(), ett: 'click', ea: 'order_failure' + $('#nanyanlabel').val(), ct: 'web', pm: parseInt(unicom.query.sou, 32) });
                break;
            case "6611":
                compnt.showAlert('错误代码（6611），订购失败，请重试！');
                WoAnalytics.addPoint({ ad: $('#nanyanad').val(), ett: 'click', ea: 'order_failure' + $('#nanyanlabel').val(), ct: 'web', pm: parseInt(unicom.query.sou, 32) });
                break;
            case "6615":
                compnt.showAlert('订购失败，请确定用户套餐！');
                WoAnalytics.addPoint({ ad: $('#nanyanad').val(), ett: 'click', ea: 'order_failure' + $('#nanyanlabel').val(), ct: 'web', pm: parseInt(unicom.query.sou, 32) });
                break;
            case "6622": // 用户已订购过此产品！跳转到流量查页面
                // localStorage.setItem('message', '您已经订购了本产品~');
                compnt.showAlert('您已经订购了本产品~')
                unicom.saveUserInfo();
                WoAnalytics.addPoint({ ad: $('#nanyanad').val(), ett: 'click', ea: 'order_failure' + $('#nanyanlabel').val(), ct: 'web', pm: parseInt(unicom.query.sou, 32) });
                break;
            default:
                compnt.showAlert(response.errorInfo + '，订购失败，请确定用户套餐！');
                WoAnalytics.addPoint({ ad: $('#nanyanad').val(), ett: 'click', ea: 'order_failure' + $('#nanyanlabel').val(), ct: 'web', pm: parseInt(unicom.query.sou, 32) });
                break;
        }
    }).fail(function(error) {
        compnt.hideLoading();
        console.log(error);
    });
}

$('#rbtmv-container').on('touchmove', function(event) {
    if ($('#rbtmv-content').height() + $('#rbtmv-content').scrollTop() >= $('#rbtmv-container').height()) {
        showRbtMvsBody($('.item-active')[0].id);
    }
})

$('#rbtmv-container').on('touchstart', function(event) {
    if ($('#rbtmv-content').height() + $('#rbtmv-content').scrollTop() >= $('#rbtmv-container').height()) {
        showRbtMvsBody($('.item-active')[0].id);
    }
})

var t1 = 0;
var t2 = 0;
let timer = null;
$('#rbtmv-content').on('scroll', function(event) {
    clearTimeout(timer)
    timer = setTimeout(isScrollEnd, 100)
    t1 = $('#rbtmv-content').scrollTop()
})

function isScrollEnd() {
    t2 = $('#rbtmv-content').scrollTop();
    if (t2 == t1) {
        console.log("滚动停止")
        clearTimeout(timer)

        if ($('#rbtmv-content').height() + $('#rbtmv-content').scrollTop() >= $('#rbtmv-container').height() - 200) {
            showRbtMvsBody();
        }
    }
}