<%
--[[
    Info    路由器DMZ设置
]]--
local ver = require("xiaoqiang.XQVersion").webVersion
%>
<%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/dmz.css?v=<%=ver%>" rel="stylesheet">
</head>
<body>
<div id="doc">
    <%include("web/inc/header")%>
    <div id="bd">
        <div class="mod-dmz mod-set">
            <div class="hd">
                <h3>DMZ</h3>
                <div class='switch'>
                    <a href="#" data-status="0" class="btn-switch btn-switch-off" id="btndmz"></a>
                </div>
            </div>
            <div class="bd">
                <div class="mod-dmz" id="dmzinfo" style="">
                    <%:开启DMZ功能可以将内网某一个设备的IP映射到外网，方便从外网访问到该设备。%>
                </div>
                <div class="mod-dmz" id="appdmz" style="display:none;">
                    <form class="form form-dmz" name="dmzset" id="dmzset">
                        <div class="form-item form-item-input">
                            <label class="k dmz-k" style="right:1px;"><%:DMZ IP地址%></label>
                            <span class="v vi"><span id="prefix" class="ippfix"></span><input name="ipval" id="ipval" type="text" class="ipt-text iplimit" maxlength="3"></span>
                            <em class="t"></em>
                        </div>
                        <div class="item-more">
                            <span><%:DMZ状态：%></span>
                            <span class=""><span id="ipOK"><%:未生效%></span></span>
                        </div>
                        <div class="form-contral">
                            <a class="btn btn-primary" id="save"><span><%:应用%></span></a>
                            <!-- <a class="btn btn-dft" id="cancel"><span><%:取消%></span></a> -->
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    </div>

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

</div>
<%include("web/inc/g.js")%>
<script>
var modelDMZ = (function(){
    function clickHelper() {
        $('.dmz-k').click(function() {
            $('#ipval').focus();
            $('.dmz-k').hide();

        });
    }

    function dmzStatus(){
        $.getJSON('<%=luci.dispatcher.build_url("api", "xqnetwork", "dmz")%>', {}, function(rsp){
            if (rsp.code == 0) {
            $('#appdmz').data('lanip', rsp.lanip);
            $('#appdmz').data('ip', rsp.ip);


            var nowip = rsp.lanip.split('.');
            nowip.pop();
            $('#prefix').text(nowip.join('.') + '.');

                var btndmz = $('#btndmz')[0],
                    listdmz = $('#appdmz'),
                    dmzOK = $('#appdmzOK');
                var info = $('#dmzinfo');
                if (rsp.status == 0 || rsp.status == 2) {
                    btndmz.className = 'btn-switch btn-switch-off';
                    listdmz.hide();
                }else{ // 开启
                    btndmz.className = 'btn-switch btn-switch-on';
                    //var last = rsp.ip.split('.')[3];
                    //$('[name=ip]').val(last);
                    $('.dmz-k').hide();

                    $('#ipOK').text('<%:IP地址%>'+ rsp.ip +'<%:已生效%>')
                        .addClass('blue');
                    var last = rsp.ip.split('.')[3];
                    $('#ipval').val(last);
                    listdmz.show();
                    //dmzOK.show();
                    info.hide();
                }

                $('#btndmz').attr('data-status', rsp.status);
            }
        });
    }

    function dmzSwitch(){
        var btndmz = $('#btndmz'),
            listdmz = $('#appdmz')
            dmzOK = $('#appdmzOK');
        var info = $('#dmzinfo');
        btndmz.on('click', function(e){
            e.preventDefault();
            var st = $(this).hasClass('btn-switch-on'),
                btn = this,
                status = $(this).attr('data-status');

            if ( status == '2' ) {
                window.top.art.dialog({
                    title: 'DMZ',
                    content: '<%:端口转发开启了，不可以设置DMZ%>',
                    lock: true,
                    time: 1000
                });
                return;
            }
            if ( st ) {
                btn.className = 'btn-switch btn-switch-off';
                listdmz.hide();
                info.show();
                //dmzOK.hide();

                if ( status == 1 ) {
                    $.getJSON('<%=luci.dispatcher.build_url("api", "xqnetwork", "dmz_off")%>', {}, function(rsp){
                        if (rsp.code == 0) {
                            var dlg = window.top.art.dialog({
                                title: '<%:设置DMZ%>',
                                content: '<%:关闭成功，生效中，请稍候...%>',
                                lock: true,
                                time: 15*1000
                            });
                            $('#btndmz').attr('data-status', 0);
                            $('#appdmz').removeData('ip');
                            var urlReload = '<%=luci.dispatcher.build_url("api", "xqnetwork", "dmz_reload")%>';
                            $.get(urlReload, function(rsp) {
                                if (rsp.code === 0) {
                                    dlg.close();
                                    $('#ipOK').text('<%:未生效%>').removeClass('blue');
                                }
                            }, 'json');
                        }
                    });
                }
            } else {
                btn.className = 'btn-switch btn-switch-on';
                //　这里把inpu清空,　因为关闭之后再进来的
                $('#ipval').val('');
                listdmz.show();
                info.hide();
            }
        });
    }

    function dmzedit() {
        $('#edit').on('click', function(e) {
            $('#appdmz').show();
            $('#appdmzOK').hide();
            var ip = $('#appdmz').data('ip');
            var last = ip.split('.')[3];
            $('#ipval').val(last);
        });
        $('#cancel').on('click', function(e) {
            //　这里需要判断，是点编辑之后，还是点击按钮开启之后
            var ip = $('#appdmz').data('ip');
            if (ip) {
                $('#appdmz').hide();
                $('#appdmzOK').show();
            } else {
                $('#dmzinfo').show();
                $('#appdmz').hide();
                $('#appdmzOK').hide();
                $('#btndmz')[0].className = 'btn-switch btn-switch-off';
            }
        });
    }

    function dmzset(){
        $('#save').on('click', function(e){
            e.preventDefault();
            var url = '<%=luci.dispatcher.build_url("api", "xqnetwork", "set_dmz")%>',
                // checkAll的第一个参数在dom里最好唯一, 不要有同名的id，　否则 ie下会有问题
                validator = FormValidator.checkAll('dmzset', [{
                    name: 'ipval',
                    display :'<%:IP地址最后一位%>',
                    rules: 'required|is_natural|less_than[255]|greater_than[1]'
                }]);
            var ip = $('#appdmz').data('lanip');
            var prefix = ip.substr(0, ip.lastIndexOf('.'));
            var last = $('#ipval').val();
            var data = prefix + '.' + last;
            if (validator) {
                var dlg = window.top.art.dialog({
                    title: '<%:设置DMZ%>',
                    content: '<%:配置成功，请稍候...%>',
                    lock: true,
                    time: 17*1000
                });
                $.ajax({
                    url: url,
                    type: 'POST',
                    data: 'ip=' + data,
                    dataType: 'json',
                    success: function(rsp){
                        if (rsp.code == 0) {
                            dlg.close();
                           // $('#appdmz').hide();
                           // $('#appdmzOK').show();
                           // $('#ipOK').text(data);
                            var ip = $('#prefix').text() + $('#ipval').val();
                            $('#ipOK').text('<%:IP地址%>'+ ip +'<%:已生效%>')
                                .addClass('blue');

                            $('#appdmz').data('ip', data);
                            $('#btndmz').attr('data-status', 1);
                        }else{
                            window.top.art.dialog({
                                title: '<%:设置DMZ%>',
                                content: rsp.msg
                            });
                        }
                    }
                });
            }
        });
    }

    return {
        init : function(){
            dmzStatus();
            dmzSwitch();
            dmzset();
            dmzedit();
            clickHelper();
        }
    }
}());
$(function(){
    modelDMZ.init();
});
</script>
</body>
</html>

