<template>
	<div>
		<div class="head">
			<el-row>
				<el-form-item>
					<el-tag class="ml-2" type="success" style="margin-right: 20px;">日志表</el-tag>
					<el-select filterable v-model="searchInfo.table_name" clearable placeholder="请选择表名">
						<el-option v-for="(item, index) in tablename_list" :key="index" :label="item" :value="item" />
					</el-select>
				</el-form-item>
				<el-form-item v-if="api_list.length>0">
					<el-tag class="ml-2" type="success" style="margin-right: 10px;">接口</el-tag>
					<el-select filterable v-model="searchInfo.request_url"  clearable placeholder="选择接口">
						<el-option v-for="(item, index) in api_list" :key="index" :label="item.request_url" :value="item.request_url" />
					</el-select>
				</el-form-item>
				<el-form-item v-if="api_list.length>0">
					<el-tag class="ml-2" type="success" style="margin-right: 10px;">字段</el-tag>
					<el-select filterable v-model="searchInfo.ziduan" clearable placeholder="选择字段">
						<el-option v-for="(item, index) in ziduan" :key="index" :label="item.name" :value="item.value" />
					</el-select>
				</el-form-item>
				<el-form-item v-if="api_list.length>0"  >
					 <el-input   v-model="searchInfo.ziduan_value"   placeholder="字段内容"/>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" style="margin-left: 10px;" @click="Search()">搜索</el-button>
				</el-form-item>
		
			</el-row>
			 
		</div>
		<el-table border  :data="tableData" style="width: 100%;" row-key="id" v-loading="loading">
			<el-table-column prop="id" label="Id" width="80" />
			<el-table-column prop="request_url" label="接口地址" width="150"/>
			<el-table-column prop="request_ip" label="ip" width="100"/>
			<el-table-column prop="post_data" label="post数据" />
			<el-table-column prop="get_data" label="get数据"  />
			<el-table-column prop="response_data" label="res数据" >
				<template #default="scope">
					 <div @click="toggleExpand(scope.row)" class="zhankai_button">
					            {{ isExpanded(scope.row) ? '收起' : '展开' }}
					          </div>
					          <div v-if="isExpanded(scope.row)"  >{{ scope.row.response_data }}</div>
				</template>
			 </el-table-column>
			<el-table-column prop="create_time" label="创建时间" width="180"/>
		</el-table>
		
		<div class="page">
			<el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize"
				:page-sizes="[15, 50, 100, 200]" layout="total,sizes, prev, pager, next" :total="total"
				@size-change="PageSizeChange" @current-change="PageCurrentChange" />
		</div>
	</div>
</template>

<script setup>
	import {
		ref,
		onMounted 
	} from 'vue'
	import {
		ElMessage
	} from 'element-plus'
	import {
		SystemLogGetList,GetLogTableName
	} from '@/api/api.js'
 
	  
 
	let loading = ref(false)
	let tableData = ref([])
	let currentPage = ref(1) //当前页码
	let pageSize = ref(15) //每页数量
	let total = 0 //总数量
	const PageSizeChange = (e) => { // 修改每页数量
		pageSize.value = e
		GetList()
	}
	const PageCurrentChange = (e) => { //切换页码
		currentPage.value = e
		GetList()
	}
	let ziduan=ref([
		{
			name:"发送的post数据",
			value:"post_data"
		},{
			name:"res数据",
			value:"response_data"
		}
		])
	let tablename_list=ref('')
	let api_list=ref('')
	const GetLogTable = () => {
		loading.value=true
		GetLogTableName().then(res => {
			loading.value=false
		 tablename_list.value=res.data.table_list
		})
	}
	const GetList = () => {
		loading.value=true
		SystemLogGetList({
			page: currentPage.value,
			pageSize: pageSize.value,
			searchInfo:searchInfo.value
		}).then(res => {
			loading.value=false
			if(res.status){
					tableData.value = res.data.list
					api_list.value=res.data.api_list
					total = res.data.count
			}else{
				ElMessage.error(res.msg)
			}
		})
	}
	let searchInfo=ref({
		table_name:'',
		request_url:'',
		ziduan:'',
		ziduan_value:''
	})
	const Search=()=>{
		currentPage.value=1
		GetList()
	}
	const zhankai=(row)=>{
		console.log(row)
	}
	let  expandedRows=ref({});
	// 切换展开状态的方法
	  const  toggleExpand=(row) =>{
	       expandedRows.value[row.id] = !expandedRows.value[row.id];
	    }
	    // 判断是否展开的方法
	 const isExpanded=(row) =>{
	      return expandedRows.value[row.id] === true;
	    }
	onMounted(() => {
		 GetLogTable()
		// GetList()
		
	})
</script>

<style scoped>
	.page {
		display: flex;
		justify-content: flex-end;
		margin-top: 10px;
	}
	.zhankai_button{
		color:#55aaff;
	}
</style>