<template>
	<div style="cursor: default">
		<el-breadcrumb separator-class="el-icon-arrow-right">
			<el-breadcrumb-item>系统管理</el-breadcrumb-item>
			<el-breadcrumb-item>日志管理</el-breadcrumb-item>
		</el-breadcrumb>
		<div class="searchBox">
			<el-input
				style="cursor: pointer"
				placeholder="请输入操作者或操作对象"
				size="mini"
				@change="listData(1, userName, start, end)"
				suffix-icon="el-icon-search"
				v-model="userName"
				clearable
			></el-input>
			<el-date-picker
				style="cursor: pointer"
				size="mini"
				v-model="timeRange"
				type="daterange"
				range-separator="至"
				start-placeholder="开始日期"
				end-placeholder="结束日期"
				@change="DateChange"
			></el-date-picker>
		</div>
		<el-card class="box-card">
			<el-table
				:data="tableData"
				stripe
				style="width: 100%"
				empty-text="暂无数据"
			>
				<el-table-column label="时间" width="300">
					<template slot-scope="scope">
						{{ (scope.row.addtime * 1000) | formatTime }}
					</template>
				</el-table-column>
				<el-table-column
					prop="operate_name"
					label="操作者"
					width="200"
				></el-table-column>
				<el-table-column
					prop="target_name"
					label="操作对象"
					width="300"
				></el-table-column>
				<el-table-column label="操作记录">
					<template slot-scope="scope">
						<el-popover
							ref="popover"
							placement="bottom"
							title="操作记录"
							width="400"
							trigger="click"
							:content="scope.row.content"
						>
						</el-popover>
						<div>
							{{ scope.row.content | contentFormat
							}}<el-button size="mini" v-popover:popover>详情</el-button>
						</div>
						<el-popover
							ref="popover"
							placement="bottom"
							title="操作记录"
							width="400"
							trigger="click"
							:content="scope.row.content"
						>
						</el-popover>
					</template>
				</el-table-column>
				<el-table-column prop="ip" label="用户IP" width="240"></el-table-column>
			</el-table>
			<el-pagination
				background
				layout="prev, pager, next"
				:total="nums"
				:current-page="page"
				@current-change="changePage"
			></el-pagination>
		</el-card>
	</div>
</template>

<script>
import '@/plugin/flexible.js'
export default {
	data() {
		return {
			timeRange: '',
			userName: '',
			page: 1,
			// totalNum: 20,
			tableData: [],
			fullHeight: document.documentElement.clientHeight, //自适应高度
			nums: 1,
			start: '', //转换后的开始时间
			end: '' //转换后的结束时间
		}
	},
	filters: {
		contentFormat(value) {
			return value.slice(0, 10) + '...'
		}
	},
	watch: {
		fullHeight(val) {
			//监控浏览器高度变化
			if (!this.timer) {
				this.fullHeight = val
				this.timer = true
				let that = this
				setTimeout(function () {
					//防止过度调用监测事件，导致卡顿
					that.timer = false
				}, 400)
			}
		}
	},
	methods: {
		// 时间筛选请求数据
		DateChange() {
			if (this.timeRange) {
				this.start = parseInt(new Date(this.timeRange[0]).getTime() / 1000)
				this.end = parseInt(new Date(this.timeRange[1]).getTime() / 1000)
			} else {
				this.start = ''
				this.end = ''
			}
			this.listData(1, this.userName, this.start, this.end)
		},
		// 点击下一页请求数据
		changePage(e) {
			var start = this.start
			var end = this.end
			this.listData(e, this.userName, start, end)
		},
		//列表数据请求
		listData(page, uname, time_begin, time_end) {
			let that = this
			let postData = that.qs.stringify({
				page: page, //页数
				user_name: uname, //用户名
				start_time: time_begin, //开始时间
				end_time: time_end //结束时间
			})
			that
				.$axios({
					method: 'post',
					url: 'api/api_gateway?method=user.operation.operation_logs_show',
					data: postData
				})
				.then((res) => {
					if (res.data.message == '') {
						var data = res.data.data
						that.tableData = data.data
						that.nums = data.count
					}
				})
				.catch((err) => {
					this.$message.error(err)
				})
		}
	},
	created() {},
	mounted() {
		this.listData(this.page, '', '', '') //列表数据请求
	}
}
</script>

<style lang='less' scoped>
.searchBox {
	display: flex;
	margin-bottom: 20px;
	.el-input {
		width: 222px;
		margin-right: 20px;
	}
}
</style>