<%
--[[
    Info    路由器外网设置
]]--
local ver = require("xiaoqiang.XQVersion").webVersion
local xqlanwanutil = require "xiaoqiang.util.XQLanWanUtil"
local remote_addr = luci.http.getenv("REMOTE_ADDR")
local mac = string.upper(luci.sys.net.ip4mac(remote_addr))
local macdefault = string.upper(xqlanwanutil.getDefaultMacAddress())
%>
<%include("web/inc/head")%>
<title><%:小米路由器%></title>
<meta name="viewport" content="width=1200">
<link href="<%=resource%>/web/css/bc.css?v=<%=ver%>" rel="stylesheet">
<link href="<%=resource%>/web/css/wan.css?v=<%=ver%>" rel="stylesheet">
</head>
<body>
<div id="doc">
    <%include("web/inc/header")%>
    <div id="bd">
        <div class="mod-set mod-wan">
            <div class="hd">
                <h3><%:上网信息%></h3>
                <span id="wanType"><%:正在检测上网连接方式，请稍等...%></span>
            </div>
            <div class="bd">
                <div class="mod-set-wan" id="wanStatus"></div>
            </div>
        </div>
         <div class="mod-set mod-wan">
            <div class="hd">
                <h3><%:上网设置%></h3>
            </div>
            <div class="bd">
                <div class="mod-set-wan" id="wanSet">
                    <div class="tab clearfix">
                        <div class="form-item-select">
                            <label class="k"><%:上网方式%></label>
                            <span class="v">
                                <select name="wantypeselect" id="wantypeselect" class="beautify">
                                <option value="0">PPPoE</option>
                                <option value="1">DHCP</option>
                                <option value="2"><%:静态IP%></option>
                                </select>
                            </span>
                        </div>
                    </div>
                    <div class="tab-con">
                        <div class="tab-con-item">
                            <form action="#" name="pppoe" id="pppoe" class="form form-pppoe" autocomplete="off">
                                <input type="hidden" name="wanType" value="pppoe">
                                <div class="form-item">
                                    <label class="k"><%:账号%></label>
                                    <span class="v"><input type="text" name="pppoeName" class="ipt-text" autocomplete="off" reqMsg="<%:账号%>"></span>
                                    <em class="t"></em>
                                </div>
                                <div class="form-item">
                                    <label class="k"><%:密码%></label>
                                    <span class="v">
                                        <input type="text" name="pppoePwd" class="ipt-text" autocomplete="off" reqMsg="<%:密码%>">
                                    </span>
                                    <em class="t"></em>
                                </div>
                                <div class="item-more">
                                    <label><input class="setwanmore" type="radio" name="autoset" value="0" checked="checked"> <span><%:自动配置%></span></label>
                                    <label><input class="setwanmore" type="radio" name="autoset" value="1"> <span><%:手动配置%></span></label>
                                </div>
                                <div class="item-more-group clearfix">
                                    <div class="form-item">
                                        <label for="special"><input type="checkbox" name="special" id="special" value="1"> <span><%:特殊拨号%></span></label>
                                    </div>
                                    <div class="form-item">
                                        <label class="k"><%:MTU%></label>
                                        <span class="v">
                                            <input type="text" name="mtu" class="ipt-text" value="1480" autocomplete="off" reqMsg="<%:MTU%>" datatype="n" minValue="576" maxValue="1492">
                                        </span>
                                        <em class="t"><%:字节（网络正常情况下不建议修改）%></em>
                                    </div>
                                    <div class="form-item">
                                        <label class="k"><%:服务名%></label>
                                        <span class="v">
                                            <input type="text" name="service" class="ipt-text" autocomplete="off">
                                        </span>
                                        <em class="t"></em>
                                    </div>
                                    <div class="form-item">
                                        <label class="k"><%:DNS1%></label>
                                        <span class="v">
                                            <input type="text" name="dns1" class="ipt-text" autocomplete="off" datatype="ipaddr">
                                        </span>
                                        <em class="t"></em>
                                    </div>
                                    <div class="form-item">
                                        <label class="k"><%:DNS2%></label>
                                        <span class="v">
                                            <input type="text" name="dns2" class="ipt-text" autocomplete="off" datatype="ipaddr">
                                        </span>
                                        <em class="t"></em>
                                    </div>
                                </div>
                                <div class="form-contral clearfix">
                                    <button type="submit" class="btn btn-primary btn-m l hidden"><span><%:应用%></span></button> <a href="#" class="btn btn-dft btn-m r btncancelset hidden"><span><%:取消%></span></a>
                                </div>
                            </form>
                        </div>
                        <!-- dhcp -->
                        <div class="tab-con-item">
                            <form action="#" name="dhcp" id="dhcp" class="form form-dhcp" autocomplete="off">
                                <input type="hidden" name="wanType" value="dhcp">
                                <div class="item-more">
                                    <label><input class="setwanmore" type="radio" name="autoset" value="0" checked="checked"> <span><%:自动配置DNS%></span></label>
                                    <label><input class="setwanmore" type="radio" name="autoset" value="1"> <span><%:手动配置DNS%></span></label>
                                </div>
                                <div class="item-more-group clearfix">
                                     <div class="form-item">
                                        <label class="k"><%:DNS1%></label>
                                        <span class="v">
                                            <input type="text" name="dns1" class="ipt-text" autocomplete="off" datatype="ipaddr" reqMsg="<%:DNS1%>">
                                        </span>
                                        <em class="t"><%:必填%></em>
                                    </div>
                                    <div class="form-item">
                                        <label class="k"><%:DNS2%></label>
                                        <span class="v">
                                            <input type="text" name="dns2" class="ipt-text" autocomplete="off" datatype="ipaddr">
                                        </span>
                                        <em class="t"></em>
                                    </div>
                                </div>
                                <div class="form-contral clearfix">
                                    <button type="submit" class="btn btn-primary btn-m l hidden"><span><%:应用%></span></button> <a href="#" class="btn btn-dft btn-m r btncancelset hidden"><span><%:取消%></span></a>
                                </div>
                            </form>
                        </div>
                        <!-- static ip -->
                        <div class="tab-con-item">
                            <form action="#" name="static" id="static" class="form form-static" autocomplete="off" autocomplete="off">
                                <input type="hidden" name="wanType" value="static">
                                <div class="form-item">
                                    <label class="k"><%:IP地址%></label>
                                    <span class="v">
                                        <input type="text" name="staticIp" class="ipt-text" autocomplete="off" datatype="ipaddr" reqMsg="<%:IP地址%>">
                                    </span>
                                    <em class="t"></em>
                                </div>
                                <div class="form-item">
                                    <label class="k"><%:子网掩码%></label>
                                    <span class="v">
                                        <input type="text" name="staticMask" class="ipt-text" autocomplete="off" datatype="ipaddr" reqMsg="<%:子网掩码%>">
                                    </span>
                                    <em class="t"></em>
                                </div>
                                <div class="form-item">
                                    <label class="k"><%:网关%></label>
                                    <span class="v">
                                        <input type="text" name="staticGateway" class="ipt-text" autocomplete="off" datatype="ipaddr" reqMsg="<%:网关%>">
                                    </span>
                                    <em class="t"></em>
                                </div>
                                <div class="form-item">
                                    <label class="k"><%:DNS1%></label>
                                    <span class="v">
                                        <input type="text" name="dns1" class="ipt-text" autocomplete="off" datatype="ipaddr" reqMsg="<%:DNS1%>">
                                    </span>
                                    <em class="t"><%:必填%></em>
                                </div>
                                <div class="form-item">
                                    <label class="k"><%:DNS2%></label>
                                    <span class="v">
                                        <input type="text" name="dns2" class="ipt-text" autocomplete="off" datatype="ipaddr">
                                    </span>
                                    <em class="t"><%:选填%></em>
                                </div>
                                <div class="form-contral clearfix">
                                    <button type="submit" class="btn btn-primary btn-m l hidden"><span><%:应用%></span></button> <a href="#" class="btn btn-dft btn-m r btncancelset hidden"><span><%:取消%></span></a>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="mod-set mod-wanspeed">
            <div class="hd">
                <h3><%:WAN口速率%></h3>
            </div>
            <div class="bd">
                <form action="#" class="form form-wanspeed" name="wanspeed" id="wanspeed">
                    <div class="form-item-select">
                        <label class="k"><%:速率%></label>
                        <span class="v">
                        <%include("web/inc/wanspeed")%>
                        </span>
                        <em class="t"></em>
                    </div>
                    <div class="form-contral">
                        <button type="submit" class="btn btn-primary hidden" id="btnSubmitwanspeed"><span><%:保存%></span></button>
                    </div>
                </form>
            </div>
        </div>

        <div class="mod-set mod-macclone">
            <div class="hd">
                <h3><%:MAC地址克隆%></h3>
            </div>
            <div class="bd">
                <form action="#" class="form form-macclone" name="macClone" id="macClone">
                    <input type="hidden" name="oldmac">
                    <div class="item">
                        <p><%:当前使用的MAC地址是%><span id="currMac"><%:获取中...%></span></p>
                    </div>
                    <div class="set">
                        <div class="form-item">
                            <label class="k"><%:MAC地址%></label>
                            <span class="v">
                                <input type="text" name="mac" class="ipt-text"  maxlength="17" datatype="macaddr" value="<%=mac%>" reqMsg="<%:MAC地址%>">
                            </span>
                            <em class="t"><%:当前管理终端的MAC地址，可以手动更改为其他MAC地址%></em>
                        </div>
                    </div>
                    <div class="form-contral clearfix">
                        <button type="submit" id="btnMacSubmit" class="btn btn-primary btn-m l"><span><%:克隆%></span></button>
                        <button type="submit" id="btnMacRecover" class="btn btn-primary btn-m r"><span><%:恢复%></span></button>
                    </div>
                </form>
            </div>
        </div>
        <%include("web/inc/netmod")%>
        <a id="netmode" name="netmode"></a>
    </div>

    <%include("web/inc/footer")%>

</div>
<script type="tmpl/text" id="tmplPPPoE">
<div class="wanStatus">
    <ul>
        <li class="nofloat"><span class="k"><%:连接类型：%></span><span class="v">PPPoE</span></li>
        <li><span class="k"><%:账户：%></span><span class="v">{$username}</span></li>
        <li><span class="k"><%:IP地址：%></span><span class="v">{$ip}</span></li>
        <li><span class="k"><%:子网掩码：%></span><span class="v">{$mask}</span></li>
        <li><span class="k"><%:默认网关：%></span><span class="v">{$gateway}</span></li>
        <li class="nofloat"><span class="k"><%:DNS：%></span><span class="v">
        {if($dns.length > 0 )}
            {for(var i=0; i<$dns.length;i++)}
            {$dns[i]}
            {/for}
        {/if}
        </span></li>
        <li class="nofloat"><span class="k"><%:外网状态：%></span><span class="v">{$status} {$action}</span></li>
        {if($showissue)}
        <li><span class="k"></span><span class="v"><a href="#" id="showpppoeissue" data-perror = "{$perror}"><%:问题排查%></a></span></li>
        {/if}
    </ul>
</div>
</script>
<script type="tmpl/text" id="tmplPPPoEissue">
{if($perror == 33)}
<div class="dialog-pppoe-issue">
    <table>
        <tr>
            <td class="reason">
                <%:宽带拨号帐号密码输入错误%>
            </td>
            <td class="bor-r-0">
                <%:请检查帐号密码是否输入正确%>
            </td>
            <td class="bor-l-0">
                <a href='<%=luci.dispatcher.build_url("web", "setting", "wan")%>' class="btn btn-primary btn-m" ><span><%:PPPOE设置页面%></span></a>
            </td>
        </tr>
        <tr>
            <td>
                <%:宽带因欠费无法继续使用%>
            </td>
            <td class="bor-r-0">
                <%:联系运营商查询宽带是否欠费%>
            </td>
            <td class="bor-l-0">
            </td>
        </tr>
    </table>
</div>
{elseif($perror == 34)}
<div class="dialog-pppoe-issue">
    <table>
        <tr>
            <td class="reason">
                <%:宽带因欠费无法继续使用%>
            </td>
            <td>
                <%:联系运营商查询宽带是否欠费%>
            </td>
        </tr>
        <tr>
            <td>
                <%:宽带运营商机房故障%>
            </td>
            <td>
                <%:联系运营商了解是否当地有线路故障%>
            </td>
        </tr>
    </table>
</div>
{elseif($perror == 35)}
<div class="dialog-pppoe-issue">
    <table>
        <tr>
            <td class="reason" rowspan = "4">
                <%:拨号状态异常%>
            </td>
            <td class="bor-r-0">
                <%:办法1:尝试关闭调制解调器(猫)和路由器，几分钟后重新通电再次尝试拨号%>
            </td>
            <td class="bor-l-0">
            </td>
        </tr>
        <tr>
            <td class="bor-r-0">
                <%:办法2:使用电脑或者旧路由器完成拨号，然后手工选择“结束连接”或“关闭连接”，再尝试使用小米路由器拨号。%>
            </td>
            <td class="bor-l-0">
            </td>
        </tr>
        <tr>
            <td class="bor-r-0">
                <%:办法3:尝试在路由器上网设置中进行mac地址克隆，然后重新拨号%>
            </td>
            <td class="bor-l-0">
                <a href='<%=luci.dispatcher.build_url("web", "setting", "wan")%>' class="btn btn-primary btn-m" ><span><%:MAC地址克隆设置%></span></a>
            </td>
        </tr>
        <tr>
            <td class="bor-r-0">
                <%:办法4:尝试调整WAN口协商速率，然后重新拨号%>
            </td>
            <td class="bor-l-0">
                <a href='<%=luci.dispatcher.build_url("web", "setting", "wan")%>' class="btn btn-primary btn-m" ><span><%:WAN口协商速率设置%></span></a>
            </td>
        </tr>
    </table>
</div>
{elseif($perror == 36)}
<div class="dialog-pppoe-issue">
    <table>
        <tr>
            <td class="reason">
                <%:宽带因欠费无法继续使用%>
            </td>
            <td>
                <%:联系运营商查询宽带是否欠费%>
            </td>
        </tr>
        <tr>
            <td>
                <%:更换了接入宽带%>
            </td>
            <td>
                <%:检查WAN口接入的宽带是否已经变更%>
            </td>
        </tr>
    </table>
</div>
{/if}
</script>
<script type="tmpl/text" id="tmplDHCP">
<div class="wanStatus">
    <ul>
        <li class="nofloat"><span class="k"><%:连接类型：%></span><span class="v">DHCP</span></li>
        <li><span class="k"><%:IP地址：%></span><span class="v">{$ip}</span></li>
        <li><span class="k"><%:子网掩码：%></span><span class="v">{$mask}</span></li>
        <li><span class="k"><%:默认网关：%></span><span class="v">{$gateway}</span></li>
        <li><span class="k"><%:DNS：%></span><span class="v">
        {if($dns.length > 0 )}
            {for(var i=0; i<$dns.length;i++)}
            {$dns[i]}
            {/for}
        {/if}
        </span></li>
    </ul>
</div>
</script>
<script type="tmpl/text" id="tmplStaticIP">
<div class="wanStatus">
    <ul>
        <li class="nofloat"><span class="k"><%:连接类型：%></span><span class="v"><%:静态IP%> </span></li>
        <li><span class="k"><%:IP地址：%></span><span class="v">{$ip}</span></li>
        <li><span class="k"><%:子网掩码：%></span><span class="v">{$mask}</span></li>
        <li><span class="k"><%:默认网关：%></span><span class="v">{$gateway}</span></li>
        <li><span class="k"><%:DNS：%></span><span class="v">
        {if($dns.length > 0 )}
            {for(var i=0; i<$dns.length;i++)}
            {$dns[i]}
            {/for}
        {/if}
        </span></li>
    </ul>
</div>
</script>
<%include("web/inc/g.js")%>
<script>
(function(){
    var timer = null,
        dlgwait,
        askcount = 0,
        cachePPPoE = {};
    $.sub( 'wanswitch', function( evt, data ){
        var root = $('#wanSet'),
            status = $('#wanStatus'),
            tab = root.find( '#wantypeselect' ),
            tabCon = root.find( '.tab-con-item' ),
            index = data['index'];
        tab.val(index);
        tabCon.removeClass( 'active' ).eq( index ).addClass( 'active' );
        if (index === '0') {
            var $inputpppoeName = $( 'input[name="pppoeName"]' ),
                $pppoePwd = $( 'input[name="pppoePwd"]' );
            if ( cachePPPoE['pppoeName'] && cachePPPoE['pppoeName'] !== '' ) {
                $inputpppoeName.val( cachePPPoE['pppoeName'] );
                $pppoePwd.val( cachePPPoE['pppoePassword'] );
                $.formInit('#pppoe');
            }
        }
    } );

    $.sub( 'fillwanform', function( evt, data ){
        var rsp = data,
            wantype = rsp.info.details.wanType,
            isauto = true,
            autoset = function( isauto ){
                var dtd = $.Deferred();
                if ( isauto ) {
                    $(".setwanmore[value=0]").prop("checked", true);
                    $('.item-more-group').find('input').prop('disabled', true);
                } else {
                    $(".setwanmore[value=1]").prop("checked", true);
                    $('.item-more-group').find('input').prop('disabled', false);
                }
                dtd.resolve();
                return dtd.promise();
            };
        if ( wantype === 'pppoe' ){
            $( 'input[name="pppoeName"]' ).val( rsp.info.details.username );
            $( 'input[name="pppoePwd"]' ).val( rsp.info.details.password );
            // mtu
            var mtuval = rsp.info.mtu;
            if ( mtuval != '1480' ) {
                isauto = false;
            }
            $('input[name=mtu]').val( mtuval );
            var service = rsp.info.details.service;
            if ( service != '' ) {
                isauto = false;
            }
            $('input[name=service]').val( service );
            // special
            var special = rsp.info.special;
            if ( special == '1' ) {
                isauto = false;
                $('input[name=special]').prop('checked', true);
            } else {
                $('input[name=special]').prop('checked', false);
            }

            $('#wantypeselect').val(0);
            $.pub( 'wanswitch', [{index: '0'}] );
        }
        if ( wantype === 'static' ){
            $( 'input[name="staticIp"]' ).val( rsp.info.details.ipaddr );
            $( 'input[name="staticMask"]' ).val( rsp.info.details.netmask );
            $( 'input[name="staticGateway"]' ).val( rsp.info.details.gateway );
            $('#wantypeselect').val(2);
            $.pub( 'wanswitch', [{index: '2'}] );
        }
        if ( wantype === 'dhcp') {
            $('#wantypeselect').val(1);
            $.pub( 'wanswitch', [{index: '1'}] );
        }
        var dnslist = rsp.info.details.dns;
        if ( dnslist && $.isArray( dnslist ) && dnslist.length > 0 ) {
            for (var i = 0; i < dnslist.length; i++) {
                $( 'input[name="dns' + (i + 1)  + '"]' ).val( dnslist[i] );
            }
            isauto = false;
        }

        autoset( isauto ).then(function(){
            $.formInit();
            $.selectBeautify({ container:'#wanSet'});
        });

    } );

    $.sub( 'fillwanstatus', function( evt, data ) {
        var rsp = data,
            wantype = rsp.info.details.wanType;
        $.pub('pppoeStatus');

    } );

    $.sub( 'getwaninfo', function(){
        var requestURL = '<%=luci.dispatcher.build_url("api", "xqnetwork","wan_info")%>',
            requestData = {},
            wantype;
        $.getJSON( requestURL, requestData, function( rsp ) {
            if( rsp.code === 0 ){
                if( rsp.status === 0 ){
                    return;
                }

                $.pub( 'fillwanform', [rsp] );
                $.pub( 'fillwanstatus', [rsp] );
            }

            $.formInit();

        });
    } );

    $.sub( 'addEvent', function(){
        $( document.body ).delegate( '#wantypeselect', 'change', function( e ){
            e.preventDefault();
            var tar = this,
                $tar = $(tar),
                switchto = $tar.val();
            clearTimeout( timer );
            setTimeout(function(){
                $.pub( 'wanswitch', [{index: switchto}] );
            }, 200);
        });

        function wait(){
            dlgwait = $.loadingDialog({
                title : '<%:联网方式设置%>',
                content : '<%:联网方式设置中，请稍等...%>'
            }).lock();
        }

        // pppoe
        $( '#pppoe' ).on( 'submit', function( e ){
            e.preventDefault();
            var formName = this.name;
            var validator = Valid.checkAll( this );
            if ( validator ) {
                wait();
                var requestData = $( this ).serializeArray();
                $.ajax({
                    url: '<%=luci.dispatcher.build_url("api", "xqnetwork","set_wan")%>',
                    type: "POST",
                    data: requestData,
                    dataType: "json",
                    success : function( rsp ){
                        if ( rsp.code === 0 ) {
                            location.reload( true );
                        } else {
                            $.alert( rsp.msg );
                        }
                        dlgwait.close();
                    }
                });
            }
        } );
        // static ip
        $( '#static' ).on( 'submit', function( e ){
            e.preventDefault();
            var formName = this.name;
            var validator = Valid.checkAll( this );
            if ( validator ) {
                wait();
                var requestData = $( this ).serializeArray();
                $.ajax({
                    url: '<%=luci.dispatcher.build_url("api", "xqnetwork","set_wan")%>',
                    type: "POST",
                    data: requestData,
                    dataType: "json",
                    success : function( rsp ){
                        if( rsp.code === 0 ){
                            location.reload( true );
                        }else{
                            $.alert( rsp.msg );
                        }
                        dlgwait.close();
                    }
                });
            }
        } );

        // dhcp
        $( '#dhcp' ).on( 'submit', function(e){
            e.preventDefault();
            var formName = this.name;
            var validator = Valid.checkAll( this );
            if ( validator ) {
                wait();
                var requestData = $( this ).serializeArray();
                $.ajax({
                    url: '<%=luci.dispatcher.build_url("api", "xqnetwork","set_wan")%>',
                    type: "POST",
                    data: requestData,
                    dataType: "json",
                    success : function( rsp ){
                        if( rsp.code === 0 ){
                            setTimeout(function(){
                                dlgwait.close();
                                location.reload( true );
                            }, 2000);
                        } else {
                            dlgwait.close();
                            $.alert( rsp.msg );
                        }
                    }
                });
            }
        } );

        // stop connect
        $( document.body ).delegate( '#pppoeStop', 'click', function( e ){
            e.preventDefault();
            $.pub('pppoeStop');
        } );
        // reconnect
        $( document.body ).delegate( '#pppoeStart', 'click', function( e ){
            e.preventDefault();
            $.pub('pppoeConnect');
        } );

        // set wan more option
        $('.setwanmore').on('click', function( e ){
            var tar = e.target,
                $tar = $(tar),
                isauto = $tar.val() === '0',
                $moreset = $tar.parents('.item-more').next('.item-more-group');
            if ( isauto ) {
                $moreset.find('input,select').prop('disabled', true);
                $moreset.find('.form-item').addClass('form-item-disabled');
            } else {
                $moreset.find('input,select').prop('disabled', false);
                $moreset.find('.form-item').removeClass('form-item-disabled');
            }
        });

        // cancel set
        $('.btncancelset').on('click', function( e ){
            e.preventDefault();
            location.reload( true );
        });

        function onControlFocus() {
            $(this).parents('form').find('.btn-primary, .btn-dft').removeClass('hidden');
        }

        $('#wanspeed').delegate('input[type=text], input[type=checkbox], input[type=radio]', 'click', onControlFocus)
                      .delegate('.ipt-text', 'click', onControlFocus);
        $('#wanSet').delegate('input[type=text], input[type=radio], input[type=checkbox]', 'click', onControlFocus)
                    .delegate('.ipt-text', 'click', onControlFocus);
        $('#wanSet').delegate('select','change', function(){
           $('#wanSet').find('.btn-primary, .btn-dft').removeClass('hidden');
        });
        //问题排查
        $('#wanStatus').delegate('#showpppoeissue', 'click', function(e){
            e.preventDefault();
            var perror = $(this).attr('data-perror');
            var html = '';
            var tpl = $('#tmplPPPoEissue').html();
            html = StringH.tmpl( tpl, {
                perror: perror
            } );
            $.dialog({
                title: '<%:问题排查%>',
                content: html,
                lock: true,
                width: 870
            });
        });
    } );

    //PPPoE checkstatus
    $.sub('pppoeStatus', function(evt, data){
        time = data ? data.time : 0;
        clearTimeout(timer);
        function ask(){
            $.ajax({
                url: '<%=luci.dispatcher.build_url("api", "xqnetwork","pppoe_status")%>',
                type: "GET",
                dataType: "json",
                success : function(rsp){
                    var msg,
                        ip = '-.-.-.-',
                        mask =  '-.-.-.-',
                        gateway =  '-.-.-.-',
                        dns = [],
                        action = '';

                    if(rsp.proto == 'pppoe'){
                        switch(rsp.status){
                            case 1 :
                                msg = '<%:正在拨号...%>';
                                timer = setTimeout(ask, 2000);
                                break;
                            case 2 :
                                msg = '<%:拨号成功%>';
                                ip = rsp.ip['address'];
                                mask = rsp.ip['mask'];
                                gateway = rsp.gw;
                                dns = rsp.dns;
                                action = '<a id="pppoeStop" href="#"><%:断开%></a>';
                                break;
                            case 3 :
                                msg = rsp.msg || '<%:拨号失败%>';
                                msg = msg + '<%:，正在尝试特殊拨号模式...%>';
                                timer = setTimeout(ask, 2000);
                                break;
                            case 4 :
                                msg = '<%:已断开%>';
                                action = '<a id="pppoeStart" href="#"><%:立即连接%></a>';
                                // 断开后重新连接查询3次，防止拿不到底层新数据
                                if ( askcount < 4 ) {
                                    timer = setTimeout(ask, 2000);
                                }
                                askcount ++;
                                break;
                            default:
                                break;
                        }
                        var showissue;
                        var perror;
                        if( rsp.perror ){
                            switch( rsp.perror ){
                                case 33:
                                    showissue = true;
                                    break;
                                case 34:
                                    showissue = true;
                                    break;
                                case 35:
                                    showissue = true;
                                    break;
                                case 36:
                                    showissue = true;
                                    break;
                                default:
                                    break;
                            }
                            perror = rsp.perror;
                        }
                        var statusHTML = StringH.tmpl( $('#tmplPPPoE').html(), {
                            status: msg,
                            ip: ip,
                            mask: mask,
                            gateway: gateway,
                            dns: dns,
                            username: rsp.pppoename,
                            action: action,
                            showissue: showissue,
                            perror: perror
                        });

                        $( '#wanStatus' ).html( statusHTML );
                    } else {
                        if ( rsp.proto == 'dhcp') {
                            ip = rsp.ip['address'];
                            mask = rsp.ip['mask'];
                            gateway = rsp.gw;
                            dns = rsp.dns;
                            if ( ip == '' ) {
                                timer = setTimeout(ask, 2000);
                            } else {
                                clearTimeout( timer );
                            }
                            var statusHTML = StringH.tmpl( $('#tmplDHCP').html(), {
                                ip: ip,
                                mask: mask,
                                gateway: gateway,
                                dns: dns
                            });
                            $( '#wanStatus' ).html( statusHTML );
                        } else {
                            ip = rsp.ip['address'];
                            mask = rsp.ip['mask'];
                            gateway = rsp.gw;
                            dns = rsp.dns;
                            var statusHTML = StringH.tmpl( $('#tmplStaticIP').html(), {
                                ip: ip,
                                mask: mask,
                                gateway: gateway,
                                dns: dns
                            });
                            $( '#wanStatus' ).html( statusHTML );
                        }
                    }
                }
            });
        }
        setTimeout(ask, time);
    });

    //PPPoE Stop
    $.sub('pppoeStop', function(){
        askcount = 0;
        $.ajax({
            url: '<%=luci.dispatcher.build_url("api", "xqnetwork","pppoe_stop")%>',
            type: "GET",
            dataType: "json",
            success : function(rsp){
                $.pub('pppoeStatus', [{time : 500}]);
            }
        });
    });

    //PPPoE Connect
    $.sub('pppoeConnect', function(){
        askcount = 0;
        $.ajax({
            url: '<%=luci.dispatcher.build_url("api", "xqnetwork","pppoe_start")%>',
            type: "GET",
            dataType: "json",
            success : function(rsp){
                $.pub('pppoeStatus', [{time : 500}]);
            }
        });
    });

    $.sub('getWanType', function(){
        $.ajax({
            url: '<%=luci.dispatcher.build_url("api", "xqnetwork", "check_wan_type")%>',
            type: 'GET',
            dataType: 'json',
            success: function( rsp ){
                if ( rsp.code === 0 ) {
                    if ( rsp.wanType == 1 ) {
                        $('#wanType').html('<%:经过检测，建议使用PPPoE方式(需要输入帐号与密码)%>');
                    } else if ( rsp.wanType == 2 ) {
                        $('#wanType').html('<%:经过检测，建议使用DHCP方式(系统自动分配IP地址)%>');
                    } else if ( rsp.wanType == 3 ) {
                        $('#wanType').html('<%:经过检测，建议使用静态IP方式%>');
                    } else if ( rsp.wanType == 99 ) {
                        $('#wanType').html('<%:经过检测，你的WAN口无法连通，可能网线没插好%>');
                    } else {
                        $('#wanType').html('<%:经过检测，无法识别你的上网类型，请手工选择上网方式%>');
                    }
                    cachePPPoE['pppoeName'] = rsp.pppoeName;
                    cachePPPoE['pppoePassword'] = rsp.pppoePassword;
                }
            }
        });
    });

    $.sub( 'wanspeedEvent', function(){
        $('#wanspeed').on('submit', function(e){
            e.preventDefault();
            var oldspeed = '<%=speed%>';
            var reqData = {};
            reqData.speed = $('#speedselect').val();
            $('#btnSubmitwanspeed').addClass('btn-primary-disabled').prop('disabled', true).find('span').text('<%:保存中...%>');
            $.ajax({
                url: '<%=luci.dispatcher.build_url("api", "xqnetwork","set_wan_speed")%>',
                type: 'POST',
                data: reqData,
                dataType: 'json',
                success: function(res){
                    if( res.code == 0 ){
                        window.location.reload( 1 );
                    }else{
                        $.alert( res.msg );
                        $('#btnSubmitwanspeed').removeClass('btn-primary-disabled').prop('disabled', false).find('span').text('<%:保存%>');
                    }
                }
            });
        });

        $.selectBeautify({ container: '#wanspeed'});
    });

    $.sub( 'mac:get', function(){
        var requestURL = '<%=luci.dispatcher.build_url("api", "xqnetwork","wan_info")%>',
            requestData = {};
        $.getJSON( requestURL, requestData, function( rsp ){
            if( rsp.code === 0 ){
                var mac = rsp.info.mac;
                if ( mac && mac != "" ){
                    $( '#currMac' ).text( mac.toUpperCase() );
                }
            } else {
                $( '#currMac' ).text( '<%:获取失败%>,' + rsp.msg );
            }
        });
    } );

    $.sub( 'maccloneEvent', function(){
        // mac clone
        $( '#macClone' ).on( 'submit', function( e ){
            e.preventDefault();
            var formName = this.name,
                requestData,
                requestURL = '<%=luci.dispatcher.build_url("api", "xqnetwork","mac_clone")%>',
                oldmac = $('input[name=oldmac]').val(),
                mac = $('input[name=mac]').val(),
                validator = Valid.checkAll( this );
            if ( validator ) {
                requestData = {
                    mac: mac
                };
                // if ( mac == oldmac ) {
                //     $.alert( '<%:你什么都没改变，提交什么啊%>' );
                //     return;
                // }
                $.pub( 'wait', {id: '#btnMacSubmit'} );
                $.getJSON( requestURL, requestData, function( rsp ){
                    if( rsp.code === 0 ){
                        $.alert('<%:设置成功%>', function(){
                            location.reload( true );
                        }).lock();
                    } else {
                        $.alert( rsp.msg );
                    }
                    $.pub( 'done', {id: '#btnMacSubmit'} );
                });
            }
        } );
        // 恢复MAC地址
        $('#btnMacRecover').on('click', function(e){
            e.preventDefault();
            var requestData = {
                    mac: '<%=macdefault%>'
                },
                requestURL = '<%=luci.dispatcher.build_url("api", "xqnetwork","mac_clone")%>';
            $.pub( 'wait', {id: '#btnMacRecover'} );
            $.getJSON( requestURL, requestData, function( rsp ){
                if( rsp.code === 0 ){
                    $.alert('<%:设置成功%>', function(){
                        location.reload( true );
                    }).lock();
                } else {
                    $.alert( rsp.msg );
                }
                $.pub( 'done', {id: '#btnMacRecover'} );
            });
        });
    } );

    $(function(){
        $.pub( 'getWanType' );
        $.pub( 'getwaninfo' );
        $.pub( 'addEvent' );
        $.pub( 'wanspeedEvent');
        $.pub( 'mac:get' );
        $.pub( 'maccloneEvent' );
    });
}());
</script>
<%include("web/inc/netmod.js")%>
</body>
</html>