{$layout}
{$template "menu"}
{$template "/datepicker"}

<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">
						<b-select
							name="level"
							v-model="level"
							:options="[
								{label: '[级别]', value: ''},
								...levelOptions.map(levelOption => ({
									label: levelOption.name,
									value: levelOption.code,
								}))
							]"
						></b-select>

            <!-- <select class="ui dropdown" name="level" v-model="level">
                <option value="">[级别]</option>
                <option v-for="levelOption in levelOptions" :value="levelOption.code">{{levelOption.name}}</option>
            </select> -->
        </div>
        <div class="ui field">
						<b-select
							name="userType"
							v-model="userType"
							auto-width
							:options="[
								{label: '[用户类型]', value: ''},
								{label: '管理员', value: 'admin'},
								{label: '用户', value: 'user'},
							]"
						></b-select>
						
            <!-- <select class="ui dropdown auto-width" name="userType" v-model="userType">
                <option value="">[用户类型]</option>
                <option value="admin">管理员</option>
                <option value="user">用户</option>
            </select> -->
        </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 || level.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">
	<b-empty>暂时还没有日志。</b-empty>
</div>

<table class="ui table selectable" v-for="log in logs">
	<tr :class="{error: log.level == 'error', warning: log.level == 'warn'}">
		<td class="log-row">{{log.createdTime}} <span class="grey"> <span
                v-if="log.userName.length > 0">| <span v-if="log.userId>0">用户 &nbsp;|&nbsp;</span> {{log.userName}}</span> | <keyword :v-word="keyword">{{log.ip}}</keyword><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>
			<span class="buttons"><a v-if="logConfig.canDelete" href="" title="删除" @click.prevent="deleteLog(log.id)"><i class="pi pi-times"></i></a> </span>
		</td>
	</tr>
	<tr :class="{error: log.level == 'error', warning: log.level == 'warn'}">
        <td><keyword :v-word="keyword">{{log.description}}</keyword></td>
	</tr>
</table>

<div class="page" v-html="filterPageContent(page)"></div>