<!-- 日志管理 -->
<template>
	<div class='logManage'>
		<div class="logHeader">
			<el-date-picker
							v-model="time"
							type="datetimerange"
							range-separator="至"
							start-placeholder="开始时间"
							:editable="false"
							:clearable="false"
							value-format="yyyy-MM-dd HH:mm:ss"
							:default-time="['00:00:00', '23:59:59']"
							@change="timeChange"
							end-placeholder="结束时间">
			</el-date-picker>
		</div>
		<div>
			<el-table
							v-loading="loading"
							:data="logList"
							style="width: 100%">
				<el-table-column
								prop="userName"
								align="center"
								label="姓名">
				</el-table-column>
				<el-table-column
								prop="logTime"
								align="center"
								label="时间">
				</el-table-column>
				<el-table-column
								prop="description"
								align="center"
								show-overflow-tooltip
								label="操作">
				</el-table-column>
			</el-table>
		</div>
		<div class="pageClass">
			<el-pagination
							hide-on-single-page
							background
							@size-change="handleSizeChange"
							@current-change="handleCurrentChange"
							:current-page.sync="currentPage"
							:page-size="pageSize"
							layout="prev, pager, next, jumper"
							:total="total">
			</el-pagination>
		</div>
	</div>
</template>

<script>
	//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
	//例如：import 《组件名称》 from '《组件路径》';

	export default {
		name: "logManage",
//import引入的组件需要注入到对象中才能使用
		components: {},
		data () {
//这里存放数据
			return {
				loading: false,
				time: '',
				logList: [],
				currentPage: 1,
				pageSize: 10,
				total: 0
			};
		},
//监听属性 类似于data概念
		computed: {},
//监控data中的数据变化
		watch: {},
//方法集合
		methods: {
			getLog() { // 获取数据
				let start = '';
				let end = '';
				if (this.time[0] !== undefined) {
					start = this.time[0];
				} else {
					start = null;
				}
				if (this.time[1] !== undefined) {
					end = this.time[1];
				} else {
					end = null;
				}
				let obj = {
					currentPage: this.currentPage,
					startTime: start,
					endTime: end,
					pageSize: 10,
					totalCount: null
				}
				console.log(obj)
				this.$axios.postLogData(obj).then((res) => {
					console.log(res)
					this.loading = false;
					this.logList = res.data.rows;
					this.total = res.data.totalCount;
				})
			},
			timeChange(val) {
				console.log(val)
				this.currentPage = 1;
				this.time = val;
				this.getLog();
			},
			handleSizeChange(val) {
				console.log(`每页 ${val} 条`);
			},
			handleCurrentChange(val) {
				this.currentPage = val;
				this.getLog();
				// console.log(`当前页: ${val}`);
			},
		},
//生命周期 - 创建完成（可以访问当前this实例）
		created () {

		},
//生命周期 - 挂载完成（可以访问DOM元素）
		mounted () {
			let data = this.$common.timeYMDFilter(new Date());
			this.time = [data + ' ' + '00:00:00', data + ' ' + '23:59:59'];
			let that = this;
			setTimeout(function () {
				that.getLog();
			}, 100)
		},
		beforeCreate () {
		}, //生命周期 - 创建之前
		beforeMount () {
		}, //生命周期 - 挂载之前
		beforeUpdate () {
		}, //生命周期 - 更新之前
		updated () {
		}, //生命周期 - 更新之后
		beforeDestroy () {
		}, //生命周期 - 销毁之前
		destroyed () {
		}, //生命周期 - 销毁完成
		activated () {
		}, //如果页面有keep-alive缓存功能，这个函数会触发
	}
</script>
<style scoped>
	.logManage{

	}

	.logHeader{
		margin: 15px 0px;
	}
	/deep/ .el-date-editor .el-range__icon {
		font-size: 14px;
		margin-left: -5px;
		color: #C0C4CC;
		float: left;
		line-height: 32px;
		margin-bottom: 0px;
	}

	/deep/ .el-date-editor .el-range-separator {
		padding: 0 5px;
		line-height: 32px;
		width: 5%;
		color: #303133;
		margin-bottom: 1px;
	}

	/deep/ .el-date-editor .el-range__close-icon {
		font-size: 14px;
		color: #C0C4CC;
		width: 25px;
		display: inline-block;
		float: right;
		line-height: 30px;
	}

	.pageClass {
		text-align: center;
		position: fixed;
		bottom:25px;
		left:0;
		right:0;
		width: 500px;
		margin-left: 44%;
	}
</style>
