@{
    Layout = "_UserLayout";
}
<style>
h5 {
    padding:0;
    margin:0;
    color:white;
}
.col-sm-12 {
    padding:0;
    margin:0;
}
</style>
<div id="app">
    <h3>使用记录</h3>
    <div class="row">
        <div class="col-md-5 boxes border-dotted-3  clearfix">
            <h3>包天包量使用概况</h3>
            <div class="col-md-6">
                <div class="boxes bg-warning clearfix">
                    <div class="col-sm-12">
                        <h5>当日使用IP数量 {{used_data.todayShortPackIpUsed}} 个</h5>
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="boxes bg-info  clearfix">
                    <div class="col-sm-12">
                        <h5>累计使用IP数量 {{used_data.shortPackIpUsed}} 个</h5>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="margin-top-10">
        <p>明细 最多允许查看72小时内记录 (短效无限量套餐暂无记录)</p>
        <div class="col-md-2" style="margin-bottom:10px;;padding:0;">
            <select v-model="list_info.packType" class="form-control  input-sm" style="height:auto;" @@change="get_used_list">
                <option value="21">短效包天套餐</option>
                <option value="22">短效包量套餐</option>
            </select>
        </div>
        <div class="col-sm-12">
            <table class="products-table responsive tablesaw tablesaw-stack" data-tablesaw-mode="stack">
                <thead>
                    <tr>
                        <th>使用类型</th>
                        <th>客户端IP</th>
                        <th>使用IP</th>
                        <th>端口号</th>
                        <th>使用时间</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="item in used_list">
                        <td>{{item.packType}}</td>
                        <td>{{item.userIp}}</td>
                        <td>{{item.ip}}</td>
                        <td>{{item.port}}</td>
                        <td>{{item.createTime}}</td>
                    </tr>
                </tbody>
            </table>
            
            <nav>
                <ul class="pager">
                    <li><a v-on:click="page_p()">上一页</a></li>
                    <li>当前页 第{{page.currentPage}}页 </li>
                    <li><a v-on:click="page_n()">下一页</a></li>
                </ul>
            </nav>
        </div>
    </div>
</div>
<script>
   var vm = new Vue({
	    el:'#app',
	    data:{
	        used_data:{},
	        used_list:[],
            list_info:{
                "page": 1, //必填，当前页数
                "limit": 50, //必填，每页显示条数，建议10~20，不可超过100
                "packType": 12 //必填，套餐类型，12-储值套餐，21-短效包天套餐，22-短效包量套餐
            },
            page:{},
	    },
        created:function(){
            this.get_used_info();
            this.get_used_list();
        },
	    methods:{
            get_used_info() {
                let data = {
                    cookie:document.cookie,
                }
                var that = this;
                $.ajax({
                    type: 'POST',
                    url: 'https://php-api.juip.com/http/user/dx_used',
                    dataType: "json",
                    contentType: "application/json",
                    data: JSON.stringify(data),
                    beforeSend: function(xhr) {
                        xhr.withCredentials = true;
                    },
                    crossDomain: true,
                    success: function (res) {
                        that.used_data = res.data
                    }
                });
            },
            get_used_list() {
                let data = {
                    cookie:document.cookie,
                    data:this.list_info,
                }
                var that = this;
                $.ajax({
                    type: 'POST',
                    url: 'https://php-api.juip.com/http/user/dx_used_log',
                    dataType: "json",
                    contentType: "application/json",
                    data: JSON.stringify(data),
                    beforeSend: function(xhr) {
                        xhr.withCredentials = true;
                    },
                    crossDomain: true,
                    success: function (res) {
                        that.used_list = res.data.d.items;
                        that.page = res.data.d.pager;
                    }
                });
            },
            page_p() {
                if (this.page.currentPage != 1) {
                    this.list_info.page--;
                    this.get_ip_list();
                }
            },
            page_n() {
                this.list_info.page++;
                this.get_used_list();
            },
	    }
	});
</script>