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

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

<form method="get" action="/clusters/logs" class="ui form" autocomplete="off">
    <input type="hidden" name="type" :value="type"/>
    <div class="ui fields">
        <div class="ui field">
            <input type="text" name="dayFrom" :placeholder="t('clusters_logs@开始日期')" v-model="dayFrom" value="" style="width:8em" id="day-from-picker"/>
        </div>
        <div class="ui field">
            <input type="text" name="dayTo" :placeholder="t('clusters_logs@结束日期')" v-model="dayTo" value="" style="width:8em" id="day-to-picker"/>
        </div>
        <div class="ui field">
            <b-select
                name="level"
                v-model="level"
                :options="[
                    {label: t('clusters_logs@级别'), value: ''},
                    {label: t('clusters_logs@错误'), value: 'error'},
                    {label: t('clusters_logs@警告'), value: 'warning'},
                    {label: t('clusters_logs@信息'), value: 'info'},
                    {label: t('clusters_logs@成功'), value: 'success'},
                ]"
            ></b-select>

            <!-- <select class="ui dropdown" name="level" v-model="level">
                <option value="">[级别]</option>
                <option value="error">错误</option>
                <option value="warning">警告</option>
                <option value="info">信息</option>
                <option value="success">成功</option>
            </select> -->
        </div>
        <div class="ui field">
            <b-select
                name="tag"
                v-model="tag"
                :options="[
                    {label: t('clusters_logs@标签'), value: ''},
                    ...tags.map(tag => ({
                        label: tag.name??'',
                        value: tag.code??'',
                    }))
                ]"
            ></b-select>

            <!-- <select class="ui dropdown" name="tag" v-model="tag">
                <option value="">[标签]</option>
                <option v-for="tag in tags" :value="tag.code">{{tag.name}}</option>
            </select> -->
        </div>
        <div class="ui field">
            <input type="text" name="keyword" style="width:10em" v-model="keyword" :placeholder="t('clusters_logs@关键词')"/>
        </div>
        <div class="ui field">
            <node-cluster-combo-box :v-cluster-id="clusterId" @change="changeCluster"></node-cluster-combo-box>
        </div>
        <div class="ui field" v-if="clusterId > 0">
            <node-combo-box :v-cluster-id="clusterId" :v-node-id="nodeId"></node-combo-box>
        </div>
        <div class="ui field">
            <button type="submit" class="ui button">{{t('clusters_logs@查询')}}</button>
        </div>
        <div class="ui field" v-if="dayFrom.length > 0 || dayTo.length > 0 || keyword.length > 0 || level.length > 0 || tag.length > 0 || clusterId > 0 || nodeId > 0">
            <a :href="'/clusters/logs?type=' + type">{{t('clusters_logs@清除条件')}}</a>
        </div>
    </div>
</form>

<!-- 未读操作 -->
<div v-if="type == 'unread'">
    <div class="ui divider" style="margin-bottom: 0"></div>
    <second-menu v-if="logs.length > 0">
        <a href="" class="item" @click.prevent="updatePageRead()">{{t('clusters_logs@本页已读')}}</a>
        <a href="" class="item" @click.prevent="updateAllRead()">{{t('clusters_logs@全部已读')}}</a>
        <a href="" class="item" @click.prevent="updateNodeRead(firstUnreadNode.id)" v-if="firstUnreadNode != null">{{t('clusters_logs@节点已读')}}</a>
    </second-menu>
</div>

<!-- 未修复操作 -->
<div v-if="type == 'needFix'">
    <div class="ui divider" style="margin-bottom: 0"></div>
    <second-menu v-if="logs.length > 0">
        <a href="" class="item" @click.prevent="fixPageLogs()">{{t('clusters_logs@本页已修复')}}</a>
        <a href="" class="item" @click.prevent="fixAllLogs()">{{t('clusters_logs@全部已修复')}}</a>
    </second-menu>
    <p class="ui message" v-if="logs.length > 0">{{t('clusters_logs@已合并重复内容提示')}}</p>
</div>

<b-empty v-if="logs.length == 0">
    {{t('clusters_logs@暂时还没有日志')}}<span v-if="type == 'unread'">{{t('clusters_logs@未读日志后缀')}}</span><span v-if="type == 'needFix'">{{t('clusters_logs@需修复日志后缀')}}</span>{{t('clusters_logs@日志后缀')}}
</b-empty>

<div v-if="countLogs > 0 && searchedKeyword.length > 0" class="search-keyword-label">
    <div class="ui label basic small">{{t('clusters_logs@正在搜索关键词x共y条记录',[searchedKeyword, countLogs])}} &nbsp; <a href="" @click.prevent="deleteLogs"><span class="small">{{t('clusters_logs@清除日志')}}</span></a> </div>
</div>

<b-table
    v-if="logs.length > 0"
    :columns="columns"
    :data-source="logs"
    :row-key="'id'"
    :bordered="false"
    :pagination="false"
    size="middle"
>
    <template slot="clusterSlot" slot-scope="{ text, record }">
        <link-icon :href="'/clusters/cluster?clusterId=' + record.node.cluster.id">{{record.node.cluster.name}}</link-icon>
    </template>
    
    <template slot="nodeSlot" slot-scope="{ text, record }">
        <link-icon :href="'/clusters/cluster/node?clusterId=' + record.node.cluster.id + '&nodeId=' + record.node.id">{{record.node.name}}</link-icon>
    </template>
    
    <template slot="infoSlot" slot-scope="{ text, record }">
        <node-log-row :v-log="record" :v-keyword="keyword"></node-log-row>
    </template>
    
    <template slot="actionSlot" slot-scope="{ text, record }">
        <a href="" v-if="!record.isFixed" @click.prevent="fixLog(record.id)">{{t('clusters_logs@已修复')}}</a>
        <a href="" @click.prevent="updateRead(record.id)" v-if="record.isFixed && !record.isRead">{{t('clusters_logs@已读')}}</a>
    </template>
</b-table>

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