<template>
	<el-container>
		<el-header>
			<div class="left-panel">
				<div class="right-panel-search">
					<el-input v-model="search.id" placeholder="logId" clearable></el-input>
					<el-button type="primary" icon="el-icon-search" @click="getSearch"></el-button>
				</div>
			</div>
		</el-header>
		<el-main class="nopadding">
			<scTable ref="table" :apiObj="apiObj" row-key="id" stripe highlightCurrentRow @row-click="rowClick">
				<el-table-column label="#" type="index" width="50"></el-table-column>
				<el-table-column label="id" prop="id" min-width="250"></el-table-column>
				<el-table-column label="路径" prop="path" min-width="150"></el-table-column>
				<el-table-column label="view" prop="view" min-width="150"></el-table-column>
				<el-table-column label="method" prop="method" min-width="150"></el-table-column>
				<el-table-column label="操作"  align="center" width="100">
					<el-button type="text" size="small">查看详情</el-button>
				</el-table-column>
			</scTable>
		</el-main>
		<el-drawer v-model="infoDrawer" title="日志详情" :size="600" destroy-on-close>
			<logInfo ref="logInfo"></logInfo>
		</el-drawer>

	</el-container>
</template>
<script>
	import logInfo from './logInfo'
	export default {
		name: 'logs',
		components: {
			logInfo
		},
		data() {
			return {
				apiObj: this.$API.ops.logs.list,
				search:{
					id:null,
				},
				logLists:[],
				infoDrawer:false,
				logDetailVisible:false,
			}
		},
		mounted() {
		},
		methods: {
			getSearch(){
				this.$refs.table.reload(this.search);
			},
			rowClick(row){
				this.infoDrawer = true;
				this.$nextTick(() => {
					this.$refs.logInfo.setData(row)
				})
			}
		}
	}
</script>
<style scoped>
	.treeMain {height:280px;overflow: auto;border: 1px solid #dcdfe6;margin-bottom: 10px;}
</style>
