{$layout}

{$var "header"}
<!-- datepicker -->
<script type="text/javascript" src="/js/moment.min.js"></script>
<script type="text/javascript" src="/js/pikaday.js"></script>
<link rel="stylesheet" href="/js/pikaday.css"/>
<link rel="stylesheet" href="/js/pikaday.theme.css"/>
<link rel="stylesheet" href="/js/pikaday.triangle.css"/>
{$end}


<div class="margin"></div>

<form method="get" action="/log" class="ui form" autocomplete="off">
	<div class="ui fields inline">
		<div class="ui field">
			<input type="text" name="dayFrom" placeholder="开始日期" v-model="dayFrom" value="" style="width:8em" id="day-from-picker"/>
		</div>
		<div class="ui field">
			<input type="text" name="dayTo" placeholder="结束日期" v-model="dayTo" value="" style="width:8em" id="day-to-picker"/>
		</div>
		<div class="ui field">
			<input type="text" name="keyword" style="width:10em" v-model="keyword" placeholder="关键词"/>
		</div>
		<div class="ui field">
			<button type="submit" class="ui button">查询</button>
		</div>
		<div class="ui field" v-if="dayFrom.length > 0 || dayTo.length > 0 || keyword.length > 0">
			<a href="/log">[清除条件]</a>
		</div>
		<div class="ui field">
			<a href="" @click.prevent="exportExcel">[导出到Excel]</a>
		</div>
	</div>
</form>

<div v-if="logs.length == 0">
	<div class="ui margin"></div>
	<p class="comment">暂时还没有日志。</p>
</div>

<table class="ui table selectable" v-for="log in logs">
	<tr :class="{error: log.level == 'error', warning: log.level == 'warn'}">
		<td>{{log.createdTime}} <span class="grey"> <span
						v-if="log.userName.length > 0">| {{log.userName}}</span> | {{log.ip}}<span
						v-if="log.region.length > 0"> | {{log.region}}</span> &nbsp; <a href="" @click.prevent="showMore(log)" title="显示更多">...</a> &nbsp;<span v-if="log.moreVisible">{{log.action}}</span></span></td>
	</tr>
	<tr :class="{error: log.level == 'error', warning: log.level == 'warn'}">
		<td>{{log.description}}</td>
	</tr>
</table>

<div class="page" v-html="page"></div>