{$layout} 
{$template "../menu_domain"}
<div class="margin"></div>
<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="ant-btn">搜索</button>
    </div>
    <div class="ui field">
      <button type="button" class="ant-btn" @click.prevent="createRecord">
        <i class="pi pi-plus"></i>
        创建记录
      </button>
    </div>
  </div>
</form>

<!-- <p class="comment" v-if="records.length == 0">暂时还没有记录。</p> -->
<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 blue"
    style="font-weight: normal"
    @click.prevent="searchWithName(searchingKeyword)"
    >使用name:"{{searchingKeyword}}"精确搜索</a
  >
  <a
    href=""
    v-if="enableValueSearch"
    class="ui label basic small blue"
    style="font-weight: normal"
    @click.prevent="searchWithValue(searchingKeyword)"
    >使用value:"{{searchingKeyword}}"精确搜索</a
  >
</div>
<div class="margin"></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.type == 'MX'"
          >优先级：{{record.mxPriority}}</span
        >
        <span class="grey small" v-if="record.weight > 0"
          >权重：{{record.weight}}</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="page"></div>
