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

<second-menu>
    <menu-item @click.prevent="createRecord">
        <i class="pi pi-pen-to-square"></i>
        {{t('ns_domains_records_index@创建记录Link')}}
    </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: t('ns_domains_records_index@记录类型Select'), value: ''},
                ...types.map(t => ({
                    label: t.type,
                    value: t.type,
                }))
            ]"
            ></b-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="t('ns_domains_records_index@搜索Placeholder')" name="keyword" v-model="keyword" style="width: 20em"/>
        </div>
        <div class="ui field">
            <button type="submit" class="ui button">{{t('ns_domains_records_index@搜索Button')}}</button>
        </div>
    </div>
</form>

<b-empty v-if="records.length == 0">{{t('ns_domains_records_index@无记录Empty')}}</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)">{{t('ns_domains_records_index@精确搜索NameLink', [searchingKeyword])}}</a>
    <a href="" v-if="enableValueSearch" class="ui label basic small" style="font-weight: normal" @click.prevent="searchWithValue(searchingKeyword)">{{t('ns_domains_records_index@精确搜索ValueLink', {keyword: searchingKeyword})}}</a>
</div>

<div class="margin"></div>
<b-table
    v-if="records.length > 0"
    :columns="columns"
    :data-source="records"
    :row-key="'id'"
>
    <!-- Name Slot -->
    <template slot="nameSlot" slot-scope="{ text, record }">
        <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>
    </template>

    <!-- Type Slot -->
    <template slot="typeSlot" slot-scope="{ text, record }">
        {{record.type}}
    </template>

    <!-- Value Slot -->
    <template slot="valueSlot" slot-scope="{ text, record }">
        <keyword :v-word="keyword">{{record.value}}</keyword>
    </template>

    <!-- TTL Slot -->
    <template slot="ttlSlot" slot-scope="{ text, record }">
        {{formatTTL(record.ttl)}}
    </template>

    <!-- Routes Slot -->
    <template slot="routesSlot" slot-scope="{ text, record }">
        <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>
    </template>

    <!-- Health Check Slot (根据需要渲染) -->
    <template slot="healthCheckSlot" slot-scope="{ text, record }">
         <div v-if="record.type == 'A' || record.type == 'AAAA'" class="health-check-status-box">
            <span v-if="record.healthCheck.isOn">
                <span v-if="record.isUp" :title="t('ns_domains_records_index@在线Status')"><i class="icon green circle small"></i><span class="status green">{{t('ns_domains_records_index@在线Status')}}</span></span>
                <span v-if="!record.isUp" :title="t('ns_domains_records_index@离线Status')"><i class="icon red circle small"></i><span class="status red">{{t('ns_domains_records_index@离线Status')}}</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)">{{t('ns_domains_records_index@设置Link')}}</a>
            <span v-if="!record.isUp">&nbsp; <a href="" @click.prevent="upRecord(record)">{{t('ns_domains_records_index@上线Link')}}</a></span>
        </div>
    </template>

    <!-- Stat Slot -->
    <template slot="statSlot" slot-scope="{ text, record }">
         <a href="" @click.prevent="showStat(record.id)" :title="t('ns_domains_records_index@查看统计Title')"><i class="icon chart area small"></i></a>
        <span v-if="record.stat.countRequests > 0" style="margin-left: 3px;">{{record.stat.countRequestsFormat}}</span>
        <span v-else class="disabled" style="margin-left: 3px;">-</span>
    </template>

    <!-- Status Slot -->
    <template slot="statusSlot" slot-scope="{ text, record }">
        <label-on :v-is-on="record.isOn"></label-on>
    </template>

    <!-- Action Slot -->
    <template slot="actionSlot" slot-scope="{ text, record }">
        <a href="" @click.prevent="updateRecord(record.id)">{{t('ns_domains_records_index@修改Link')}}</a> &nbsp;
        <a href="" @click.prevent="deleteRecord(record.id)">{{t('ns_domains_records_index@删除Link')}}</a>
    </template>
</b-table>

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