{extend name="public:base" /}
{block name="css"}{/block}
{block name="content"}
<div class="page-content" id="log">
	<div class="panel">
		<div class="panel-heading">
			<h3 class="panel-title panel-title-blue"><i class="iconfont">&#xe6f0;</i>登录日志</h3>
		</div>
		<div class="panel-body">
			<div class="row" style="float:right;">
				<div style="display:none;">
					按时间：
					<input type="text" class="omgui-input" id="startDate" placeholder="开始日期">
					&nbsp;至&nbsp; 
					<input type="text" class="omgui-input" id="endDate" placeholder="终止日期">
					<div style="float:right;margin-left:10px;">
						<el-button v-on:click="search()" id="search" type="success" icon="el-icon-search">查询</el-button>
					</div>
				</div>
				<div class="btn-group omgui-btn-box">
					<button data-type="today" type="button" class="btn btn-icon btn-pink"><i class="layui-icon">&#xe628;</i> <span class="hidden-xs">今天</span></button>
					<button data-type="yesterday" type="button" class="btn btn-icon"><i class="layui-icon">&#xe60e;</i> <span class="hidden-xs">昨天</span></button>
					<button data-type="week" type="button" class="btn btn-icon"><i class="layui-icon">&#xe637;</i> <span class="hidden-xs">7天</span></button>
					<button data-type="month" type="button" class="btn btn-icon"><i class="layui-icon">&#xe638;</i> <span class="hidden-xs">30天</span></button>
					<button data-type="all" type="button" class="btn btn-icon"><i class="layui-icon">&#xe63c;</i> <span class="hidden-xs">全部</span></button>
				</div>
			</div>
			<template>
				<el-table 
				:header-cell-style="{ textAlign: 'center' }" 
				:data="tableData"
				border fit highlight-current-row style="width: 100%">
				<template slot="empty">
					<div class='nonedata'><img src='__STATIC__/images/none.png'/><p>暂无数据</p></div>
				</template>
					<el-table-column type="index" label="序号" align="center" width="50"></el-table-column>
					<el-table-column prop="ip" label="登录IP" align="center">
					</el-table-column>
					<el-table-column prop="address" label="登录地址" align="center" show-overflow-tooltip="true" min-width="125">
					</el-table-column>
					<el-table-column prop="create_time" label="登录时间" align="center" show-overflow-tooltip="true" min-width="125">
					</el-table-column>
				</el-table>
				<!-- 分页器 -->
				<div class="el-page">
					<el-pagination align='center' @size-change="handleSizeChange" @current-change="handleCurrentChange" 
					:current-page="currentPage" 
					:page-sizes="[10,20,30,40,50,100]" 
					:page-size="pageSize" 
					layout="total, sizes, prev, pager, next, jumper" 
					:total="total">
					</el-pagination>
				</div>
			</template>
		</div>
	</div>
</div>
{/block} 
{block name="javascript"}
<!--layui日期控件的代码都写在laydate.js文件里-->
<script src="__STATIC__/js/laydate.js"></script>
<script type="text/javascript">
//切换右侧导航选中项
switchTab(2);
var log = new Vue({
	el: '#log',
	data: function() {
		return {
			tableData:[],
			currentPage: 1,
            total: 0,
            pageSize: Number({$config['page_num']}),
			jsonData:{}
		}
	},
	/*初始化*/
	created: function() {
		this.getData();
	},
	methods: {
		handleSizeChange(val) {
            /*改变每页显示的条数*/
            this.pageSize=val
			/*在改变每页显示的条数时，要将页码显示到第一页*/
            this.currentPage=1
            this.getData()
        },
        handleCurrentChange(val) {
            /*改变默认的页数*/
            this.currentPage=val
            this.getData()
        },
		getData(){
			var that = this;
			that.jsonData["page"] = that.currentPage;
			that.jsonData["limit"] = that.pageSize;
			$.ajax({
				type: "GET",
				url: '{:url("@Admin/Member/log_data")}',
				dataType: "json",
				data: that.jsonData,
				contentType: "application/json;charset=UTF-8",
				success: function(res) {
					if(res.code == 1) {
						that.tableData = res.data;
						that.total = res.count;
					}
				},
				error: function(error) {
					console.log("请求数据异常，Error："+error);
				}
			});
		},
		search(){
			var that = this;
			var startdate=document.getElementById("startDate").value;
			var enddate=document.getElementById("endDate").value;
			var start = new Date(startdate);
			var end = new Date(enddate);
			if(start.getTime() > end.getTime()){
                mui.alert('结束日期不能小于开始日期', '提示');
                return;
            } 
			that.jsonData={
				'start_time':startdate,
				'end_time':enddate
			}
			that.getData();
		}
    }
});
</script>
{/block}