{$layout}
{$template "../menu_domain"}

<second-menu>
    <menu-item @click.prevent="createRecord">
        <i class="pi pi-pen-to-square"></i>
        创建记录
    </menu-item>
</second-menu>

<form class="ui form" method="get" action="/ns/domains/records" ref="recordsSearchForm">
    <input type="hidden" name="domainId" :value="domain.id"/>
    <div class="ui fields inline">
        <div class="ui field">
            <b-select
            name="type"
            v-model="type"
            :options="[
                {label: '[记录类型]', value: ''},
                ...types.map(t => ({
                    label: t.type,
                    value: t.type,
                }))
            ]"
            ></b-select>

            <!-- <select class="ui dropdown" name="type" v-model="type">
                <option value="">[记录类型]</option>
                <option v-for="t in types" :value="t.type">{{t.type}}</option>
            </select> -->
        </div>
        <div class="ui field">
            <ns-route-selector :v-route-code="routeCode"></ns-route-selector>
        </div>
        <div class="ui field">
            <input type="text" placeholder="记录名、备注..." name="keyword" v-model="keyword" style="width: 20em"/>
        </div>
        <div class="ui field">
            <button type="submit" class="ui button">搜索</button>
        </div>
    </div>
</form>

<b-empty v-if="records.length == 0">暂时还没有记录。</b-empty>

<div v-if="enableNameSearch || enableValueSearch" style="margin-top: 1em">
    <a href="" v-if="enableNameSearch" class="ui label basic small" style="font-weight: normal" @click.prevent="searchWithName(searchingKeyword)">使用name:"{{searchingKeyword}}"精确搜索</a>
    <a href="" v-if="enableValueSearch" class="ui label basic small" style="font-weight: normal" @click.prevent="searchWithValue(searchingKeyword)">使用value:"{{searchingKeyword}}"精确搜索</a>
</div>

<table class="ui table selectable celled" v-if="records.length > 0">
    <thead>
        <tr>
            <th class="two wide">记录名 <sort-arrow name="nameOrder"></sort-arrow>
                <br/><span>&nbsp;</span>
            </th>
            <th class="two wide">记录类型 <sort-arrow name="typeOrder"></sort-arrow><br/><span>&nbsp;</span></th>
            <th>记录值<br/><span>&nbsp;</span></th>
            <th class="two wide">TTL <sort-arrow name="ttlOrder"></sort-arrow><br/><span>&nbsp;</span></th>
            <th class="two wide">线路<br/><span>&nbsp;</span></th>
            <th style="width: 8em; text-align: center" v-show="domainHealthCheckIsOn">健康检查 <sort-arrow name="upOrder"></sort-arrow><br/><span>&nbsp;</span></th>
            <th class="two wide">解析次数<br/><span class="grey">当前小时内</span></th>
            <th class="width6">状态<br/><span>&nbsp;</span></th>
            <th class="two op">操作<br/><span>&nbsp;</span></th>
        </tr>
    </thead>
    <tr v-for="record in records">
        <td><keyword :v-word="keyword">{{record.name}} &nbsp;</keyword>
            <div v-if="(record.description != null && record.description.length > 0) || record.weight > 0 || (record.type == 'MX')">
                <span class="grey small" v-if="record.description != null && record.description.length > 0"><keyword :v-word="keyword">{{record.description}}</keyword></span>
                <span class="grey small" v-if="record.weight > 0">权重：{{record.weight}}</span>
                <span class="grey small" v-if="record.type == 'MX'">优先级：{{record.mxPriority}}</span>
            </div>
        </td>
        <td>{{record.type}}</td>
        <td><keyword :v-word="keyword">{{record.value}}</keyword></td>
        <td>{{formatTTL(record.ttl)}}</td>
        <td>
            <div v-for="route in record.routes" style="margin-top: 0.3em; margin-bottom: 0.3em">
                <span class="ui label basic text tiny">{{route.name}}</span>
            </div>
        </td>
        <td v-show="domainHealthCheckIsOn" class="health-check-status-box">
            <div v-if="record.type == 'A' || record.type == 'AAAA'">
                <span v-if="record.healthCheck.isOn">
                    <span v-if="record.isUp" title="在线"><i class="icon green circle small"></i><span class="status green">在线</span></span>
                    <span v-if="!record.isUp" title="离线"><i class="icon red circle small"></i><span class="status red">离线</span></span>
                </span>
                <span v-else class="disabled">
                    <i class="icon circle small"></i>
                </span>
                <br/>
                <a href="" style="font-size: 0.9em; margin-top: 0.12em" @click.prevent="updateRecordHealthCheck(record.id)">[设置]</a>
                <span v-if="!record.isUp">&nbsp; <a href="" @click.prevent="upRecord(record)">[上线]</a></span>
            </div>
        </td>
        <td>
            <a href="" @click.prevent="showStat(record.id)" title="查看统计"><i class="icon chart area small"></i></a>
            <span v-if="record.stat.countRequests > 0">{{record.stat.countRequestsFormat}}</span>
            <span v-else class="disabled">-</span>
        </td>
        <td><label-on :v-is-on="record.isOn"></label-on></td>
        <td>
            <a href="" @click.prevent="updateRecord(record.id)">修改</a> &nbsp;
            <a href="" @click.prevent="deleteRecord(record.id)">删除</a>
        </td>
    </tr>
</table>

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