<template>
	<cl-crud @load="onLoad">
		<template #slot-clear-btn>
			<el-button size="mini" type="danger" @click="clear">清空</el-button>
		</template>
	</cl-crud>
</template>

<script>
import { mapGetters } from 'vuex';

export default {
	data() {
		return {
			crud: null
		};
	},

	computed: {
		...mapGetters(['permission'])
	},

	methods: {
		onLoad({ ctx, app }) {
			this.crud = app;

			ctx.service(this.$service.system.log)
				.set('table', {
					columns: [
						{
							prop: 'id',
							label: 'id',
							align: 'center'
						},
						{
							prop: 'userId',
							label: '用户id',
							align: 'center'
						},
						{
							prop: 'name',
							label: '昵称',
							align: 'center'
						},
						{
							prop: 'action',
							label: '请求地址',
							align: 'center',
							minWidth: '200',
							'show-overflow-tooltip': true
						},
						{
							prop: 'params',
							label: '参数',
							align: 'center',
							minWidth: '200',
							'show-overflow-tooltip': true
						},
						{
							prop: 'ip',
							label: 'ip',
							minWidth: '150',
							align: 'center'
						},
						{
							prop: 'ipAddr',
							label: 'ip地址',
							minWidth: '150',
							align: 'center'
						},
						{
							prop: 'createTime',
							label: '创建时间',
							minWidth: '150',
							align: 'center',
							sortable: true
						}
					],

					op: {
						visible: false
					},

					props: {
						'default-sort': {
							prop: 'createTime',
							order: 'descending'
						}
					}
				})
				.set('search', {
					key: { placeholder: '请输入请求地址, 参数，ip地址' }
				})
				.set('layout', [
					['refresh-btn', 'add-btn', 'slot-clear-btn', 'flex1', 'search-key'],
					['data-table'],
					['flex1', 'pagination']
				])
				.done();

			app.refresh();
		},

		clear() {
			this.$confirm('是否要清空日志', '提示', {
				type: 'warning'
			})
				.then(() => {
					this.$service.system.log
						.clear()
						.then(() => {
							this.$message.success('清空成功');
							this.crud.refresh({ page: 1 });
						})
						.catch(err => {
							this.$message.error(err);
						});
				})
				.catch(() => {});
		}
	}
};
</script>
