<style>
    .degrade-page {
        padding: 20px;
    }

    .degrade-tab li {
        cursor: pointer;
    }

    .pc-degrade,
    .wap-degrade {
        list-style: none;
        padding: 20px;
    }

    .err-tip {
        color: #a94442;
    }
</style>
<div class="degrade-page">
    <div class="panel panel-info">
        <div class="panel-heading">zookeeper server</div>
        <div class="panel-body">
            <div class="form-inline">
                <div class="form-group">
                    <label for="server-ip">Server IP</label>
                    <input id="server-ip" class="form-control" type="text" placeholder="input server ip" value="{{ip}}">
                </div>
                <div class="form-group">
                    <label for="server-port">Server Port</label>
                    <input id="server-port" class="form-control" type="text" placeholder="input server port" value="{{port}}">
                </div>
                <span id="server-sure" class="btn btn-default">确定</span>
                <span id="err-tip" class="err-tip hide">
                    <i class="glyphicon glyphicon-remove-sign"></i>
                    小哥，填错了吧
                </span>
            </div>
        </div>
    </div>
    <div class="panel panel-danger">
        <div class="panel-heading">degrade point</div>
        <div id="pjax-container" class="panel-body">
            {{#render}}
            <ul id="degrade-tab" class="nav nav-tabs degrade-tab" role="tablist">
                <li role="presentation" class="active">
                    <a>PC</a>
                </li>
                <li role="presentation">
                    <a>WAP</a>
                </li>
            </ul>

            <ul class="pc-degrade degrade-content">
                {{#each pc}}
                <li data-id="{{_id}}">
                    <div class="checkbox">
                        <label>
                            <input type="checkbox"{{#if checked}} checked{{/if}}>
                            {{name}}
                        </label>
                    </div>
                </li>
                {{/each}}
            </ul>

            <ul class="wap-degrade degrade-content hide">
                {{#each wap}}
                <li data-id="{{_id}}">
                    <div class="checkbox">
                        <label>
                            <input type="checkbox"{{#if checked}} checked{{/if}}>
                            {{name}}
                        </label>
                    </div>
                </li>
                {{/each}}
            </ul>
            {{^}}
                Waitting for connecting to server...
            {{/render}}
        </div>
    </div>
</div>
<script>
    $(function() {
        var $ip = $('#server-ip');
        var $port = $('#server-port');
        var $tip = $('#err-tip');

        function validateIP(ip) {
            if (ip === 'localhost' ||
                /^(0|[1-9]?|1\d\d?|2[0-4]\d|25[0-5])\.(0|[1-9]?|1\d\d?|2[0-4]\d|25[0-5])\.(0|[1-9]?|1\d\d?|2[0-4]\d|25[0-5])\.(0|[1-9]?|1\d\d?|2[0-4]\d|25[0-5])$/.test(ip))
            {
                $ip.closest('.form-group').removeClass('has-error');
                return true;
            }

            $ip.closest('.form-group').addClass('has-error');
            return false;
        }

        function validatePort(port) {
            if (/^[1-9]\d*$/.test(port) && +post >= 1 && +port <= 65535) {
                $port.closest('.form-group').removeClass('has-error');
                return true;
            }

            $port.closest('.form-group').addClass('has-error');
            return false;
        }

        // server
        $('#server-sure').click(function() {
            var ip = $.trim($ip.val());
            var port = $.trim($port.val());

            if (!validateIP(ip) || !validatePort(port)) {
                $tip.removeClass('hide');
                return;
            }

            $tip.addClass('hide');

            var serverPrompt = confirm('小伙砸，你确认修改zookeeper的server到：' + ip + ':' + port + '吗？')

            if (!serverPrompt) {
                return;
            }

            $.ajax({
                type: 'POST',
                url: '/degrade/server',
                data: {
                    ip: ip,
                    port: port
                }
            }).then(function(data) {
                if (data.code === 200) {
                    $.pjax.reload('#pjax-container');
                }
            });
        });

        $('#degrade-tab').on('click', 'li', function() {
            var $this = $(this);

            if ($this.hasClass('active')) {
                return;
            }

            $('li', $('#degrade-tab')).toggleClass('active');

            var index = $this.index();

            if (index === 0) {

                //PC active
                $('.pc-degrade').removeClass('hide');
                $('.wap-degrade').addClass('hide');
            } else {

                // wap active
                $('.wap-degrade').removeClass('hide');
                $('.pc-degrade').addClass('hide');
            }
        });

        // change
        $('.degrade-content input[type="checkbox"]').change(function() {
            var $checkbox = $(this),
                $li = $checkbox.closest('li');
            
            var checked = $checkbox.prop('checked');

            var id = $li.data('id');

            $.ajax({
                url: '/degrade/setter',
                data: {
                    checked: checked,
                    id: id
                }
            });
        });
    })
</script>