<template>
	<div>
		<el-card :body-style="cardBodyStyle">
			<el-form :model="query" label-width="80px" inline center>
				<el-form-item label="操作人">
					<el-input v-model="query.userDesc"  style="width :200px;" clearable></el-input>
				</el-form-item>
				<el-form-item label="界面名称">
					<el-input v-model="query.menuName"  style="width :200px;" clearable ></el-input>
				</el-form-item>
				<el-form-item label="开始时间">
					<el-date-picker  v-model="startTime" value-format="yyyy-MM-dd"
						style="width :200px;" clearable></el-date-picker>
				</el-form-item>
				<el-form-item label="结束时间">
					<el-date-picker  v-model="endTime" value-format="yyyy-MM-dd"
						style="width :200px;" clearable></el-date-picker>
				</el-form-item>
				<el-form-item>
					<el-button v-prevent-re-click type="primary"  @click="search">查询</el-button>
				</el-form-item>
			</el-form>
		</el-card>
		<el-card :body-style="cardBodyStyle">
			<el-table v-loading="loading" :data="tableData" border style="width: 99%">
				<el-table-column prop="id" label="Id" v-if="isShow" width="100" show-overflow-tooltip>
				</el-table-column>
				<el-table-column prop="userDesc" label="操作人" width="120" align="center" show-overflow-tooltip>
				</el-table-column>
				<el-table-column prop="menuName" label="操作界面" width="120" align="center" show-overflow-tooltip>
				</el-table-column>
				<el-table-column prop="operateType" label="类名" width="230" align="center" show-overflow-tooltip>
				</el-table-column>
				<el-table-column prop="operateInfo" label="方法名" width="180" align="center" show-overflow-tooltip>
				</el-table-column>
				<el-table-column prop="operateTime" label="操作时间" width="120" align="center" show-overflow-tooltip>
				</el-table-column>
				<el-table-column prop="logId" label="日志ID" width="160" align="center" show-overflow-tooltip>
				</el-table-column>

			</el-table>
			<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
				:current-page="currentPage" :page-sizes="pageSizes" :page-size="pageSize"
				layout="total, sizes, prev, pager, next, jumper" :total="totalRows">
			</el-pagination>
		</el-card>
		<el-dialog :close-on-click-modal="false" title="显示" v-model="dialogVisible" width="500px">
			<el-input type="textarea" v-model="logData" autosize></el-input>
		</el-dialog>
	</div>
</template>

<script setup>
	import {
		ref,
		reactive,
		onMounted,
		onBeforeMount,
		getCurrentInstance
	} from 'vue'
	const {
		proxy
	} = getCurrentInstance()

	import style from '@/tools/style'
	const cardBodyStyle = ref(style.card)

	onMounted(() => {
		search()
	})



	const startTime = ref('')
	const endTime = ref('')
	//表格初始化参数 
	const dialogVisible = ref(false)
	const logData = ref('')

 
	const isShow = ref(false)
	const loading = ref(true)



	/**
	 *   查询 
	 */
	const query = ref({
		userDesc: '',
		menuName: '',
	})
	const tableData = ref([])
	const search = () => {
		currentPage.value = 1
		getTableData()
	}
	const getTableData = () => {
		loading.value = true
		var url = 'log/Log/queryOperate'
		var param = {
			page: currentPage.value,
			rows: pageSize.value,
			params: JSON.stringify(query.value)
		}
		proxy.$axios.get(url, param).then(response => {
			if (response.data.code == '0') {
				tableData.value = response.data.data.records
				totalRows.value = response.data.data.total
			} else {
				ElMessage.error('操作失败！' + response.data.msg)
			}
			loading.value = false
		})
	}


	/**
	 *   查询 
	 */

	/**
	 * 分页 
	 */
	const currentPage = ref(1)
	const totalRows = ref(0)
	const pageSizes = ref([5, 10, 20, 30, 40])
	const pageSize = ref(10)
	const handleSizeChange = (val) => {
		pageSize.value = val
		getTableData()
	}
	const handleCurrentChange = (val) => {
		currentPage.value = val
		getTableData()
	}
	/**
	 * 分页 
	 */


	const show = (row) => {
		dialogVisible.value = true
		logData.value = row.logData
	}
</script>
<style>

</style>