@{
    Layout = "_UserLayout";
}
<div id="app">
    <div class="boxes margin-top-5 clearfix">
        <div>
            <input v-model="ip" type="text" style="width:25%" placeholder="请输入ip地址并点击保存白名单" />
            <button v-on:click="set_ip()" type="button" class="btn btn-primary" ><span class="glyphicon glyphicon-plus"></span>保存</button>
        </div>
        <div class=" margin-top-30">
            <h5>当前白名单列表 <span class="text-warning">当前仅允许保留白名单数量：5个</span></h5>
            <div class="col-sm-12">
                <table class="products-table responsive tablesaw tablesaw-stack" data-tablesaw-mode="stack">
                    <thead>
                        <tr>
                            <th>IP地址</th>
                            <th>设置时间</th>
                            <th>锁定状态</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="item in ip_list">
                            <td style="display:none;">{{item.id}}</td>
                            <td>{{item.ip}}</td>
                            <td>{{item.createTime}}</td>
                            <td>{{item.isLocked}}</td>
                            <td>
                                <a v-if="item.isLocked=='未锁定'" v-on:click="lock_ip(item.id,1)" class="btn btn-new">锁定</a>
                                <a v-if="item.isLocked=='已锁定'" v-on:click="lock_ip(item.id,0)" class="btn btn-new">解锁</a>
                                <a class="btn btn-danger"  v-on:click="delete_ip(item.id)">删除</a> 
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
<script>
   var vm = new Vue({
	    el:'#app',
	    data:{
            ip_list:[],
            ip:'',
	    },
        created:function(){
            this.get_list();
        },
	    methods:{
            get_list() {
                let data = {
                    cookie:document.cookie,
                }
                var that = this; 
               
                $.ajax({
                    type: 'POST',
                    url: 'https://php-api.juip.com/http/user/white_list',
                    dataType: "json",
                    contentType: "application/json",
                    data: JSON.stringify(data),
                    beforeSend: function(xhr) {
                        xhr.withCredentials = true;
                    },
                    crossDomain: true,
                    success: function (res) {
                        that.ip_list = res.data
                    }
                });
            },
            set_ip() {
                let data = {
                    cookie:document.cookie,
                    data: {ip:this.ip}
                }
                var that = this; 
               
                $.ajax({
                    type: 'POST',
                    url: 'https://php-api.juip.com/http/user/create_white_ip',
                    dataType: "json",
                    contentType: "application/json",
                    data: JSON.stringify(data),
                    beforeSend: function(xhr) {
                        xhr.withCredentials = true;
                    },
                    crossDomain: true,
                    success: function (res) {
                        that.get_list()
                    }
                });
            },
            lock_ip(id,status) {
                var lock_ip = {};
                lock_ip.id = id;
                lock_ip.lock = status;
                let dataa = {
                    cookie:document.cookie,
                    data: lock_ip
                }
                var that = this; 
               
                $.ajax({
                    type: 'POST',
                    url: 'https://php-api.juip.com/http/user/lock_ip',
                    dataType: "json",
                    contentType: "application/json",
                    data: JSON.stringify(dataa),
                    beforeSend: function(xhr) {
                        xhr.withCredentials = true;
                    },
                    crossDomain: true,
                    success: function (res) {
                        that.get_list()
                    }
                });
            },
            delete_ip(id) {
                var dalete_ip = {};
                dalete_ip.id = id;
                let dataa = {
                    cookie:document.cookie,
                    data: dalete_ip
                }
                var that = this; 
               
                $.ajax({
                    type: 'POST',
                    url: 'https://php-api.juip.com/http/user/delete_ip',
                    dataType: "json",
                    contentType: "application/json",
                    data: JSON.stringify(dataa),
                    beforeSend: function(xhr) {
                        xhr.withCredentials = true;
                    },
                    crossDomain: true,
                    success: function (res) {
                        that.get_list()
                    }
                });
            }
	    }
	});
</script>