<template>
	<div>
		<el-card :body-style="cardBodyStyle">
			<el-form :model="query" label-width="80px" inline center>
				<el-form-item label="URL">
					<el-input v-model="query.url"  style="width :200px;" clearable></el-input>
				</el-form-item>
				<el-form-item label="方法全名">
					<el-input v-model="query.className"  style="width :200px;" clearable></el-input>
				</el-form-item>
				<el-form-item label="日志ID">
					<el-input v-model="query.logId"  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 :150px;"></el-date-picker>
			</el-form-item>
			<el-form-item label="结束时间">
				<el-date-picker    v-model="endTime" value-format="yyyy-MM-dd"  style="width :150px;"></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">
			<div id="myChart1" :style="{width: chartWidth +'px', height: chartHeight+'px'}"></div>
		</el-card>
		<el-card :body-style="cardBodyStyle">
			<el-table :data="tableData" border> 
				<el-table-column prop="url" label="url" width="200" align="center" header-align="center"
					show-overflow-tooltip>
				</el-table-column>
				<el-table-column prop="methodType" label="类型" width="80" align="center" header-align="center"
					show-overflow-tooltip>
				</el-table-column>
				<el-table-column prop="encryptFlag" label="加密" width="80" align="center" header-align="center"
					show-overflow-tooltip>
				</el-table-column>
				<el-table-column prop="params" label="参数" width="120" align="center" header-align="center"
					show-overflow-tooltip>
				</el-table-column>
				<el-table-column prop="headers" label="请求头" width="80" align="center" header-align="center"
					show-overflow-tooltip>
				</el-table-column>
				<el-table-column prop="headerMessage" label="头消息" width="80" align="center" header-align="center"
					show-overflow-tooltip>
				</el-table-column>
				<el-table-column prop="token" label="令牌" width="80" align="center" header-align="center"
					show-overflow-tooltip>
				</el-table-column>
				<el-table-column prop="tokenMessage" label="令牌消息" width="80" align="center" header-align="center"
					show-overflow-tooltip>
				</el-table-column>
				<el-table-column prop="responseCode" label="响应码" width="80" align="center" header-align="center"
					show-overflow-tooltip>
				</el-table-column>
				<el-table-column prop="responseMessage" label="响应信息" width="80" align="center" header-align="center"
					show-overflow-tooltip>
				</el-table-column>
				<el-table-column prop="resultCode" label="结果码" width="80" align="center" header-align="center"
					show-overflow-tooltip>
				</el-table-column>
				<el-table-column prop="resultMessage" label="结果信息" width="80" align="center" header-align="center"
					show-overflow-tooltip>
				</el-table-column>
				<el-table-column prop="startTime" label="开始时间" width="180" align="center" header-align="center"
					show-overflow-tooltip>
				</el-table-column>
				<el-table-column prop="endTime" label="结束时间" width="180" align="center" header-align="center"
					show-overflow-tooltip>
				</el-table-column>
				<el-table-column prop="duration" label="耗时" width="100" align="center" header-align="center"
					show-overflow-tooltip>
				</el-table-column>
				<el-table-column prop="className" label="方法全名" align="center" header-align="center"
					show-overflow-tooltip>
				</el-table-column>
				<el-table-column prop="logId" label="日志ID" align="center" header-align="center" show-overflow-tooltip>
				</el-table-column>

				<el-table-column prop="addId" label="操作人ID" width="100" align="center" header-align="center"
					show-overflow-tooltip>
				</el-table-column>
				<el-table-column prop="addTime" label="操作时间" width="180" align="center" header-align="center"
					show-overflow-tooltip>
				</el-table-column>
				<el-table-column prop="belongId" label="belongID" width="100" align="center" header-align="center"
					show-overflow-tooltip>
				</el-table-column>
				<el-table-column prop="os" label="客户端" align="center" header-align="center" show-overflow-tooltip>
				</el-table-column>
				<el-table-column prop="menuId" label="界面ID" width="100" align="center" header-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="显示" :visible.sync="dialogVisible" width="500px">
			<el-input type="textarea" v-model="logData" autosize></el-input>
		</el-dialog>
	</div>
</template>

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

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

	import * as echarts from "echarts"
	const myEcharts = echarts


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

	const chartWidth = computed(() => document.body.clientWidth - 100)
	const chartHeight = computed(() => 300)


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

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



	const drawLine1 = () => {
		let myChart1 = myEcharts.init(document.getElementById('myChart1'), 'light')
		var url = 'log/Log/queryLine'
		var param = {
			params: JSON.stringify(query.value)
		}
		proxy.$axios.get(url, param).then(response => {
			if (response.data.code == '0') {
				myChart1.setOption({
					xAxis: {
						type: 'category',
						data: response.data.data.key
					},
					yAxis: {
						type: 'value'
					},
					series: [{
						data: response.data.data.value,
						type: 'line',
						smooth: true
					}]
				});
			} else {
				ElMessage({
					type: 'error',
					message: '操作失败!' + response.data.msg
				});
			}
		});
	}
	/**
	 *   查询 
	 */
	const query = ref({
		url: '',
		className: '',
		logId: '',
	})
	const tableData = ref([])
	const search = () => {
		currentPage.value = 1
		getTableData()
		drawLine1()
	}
	const getTableData = () => {
		loading.value = true
		var url = 'log/Log/query'
		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>
	/* 	.el-input {
		width: 300px;
	} */
</style>