{$layout}

<first-menu>
  <a href="" class="item" @click.prevent="createProvider()"
    >[添加DNS账号信息]</a
  >
</first-menu>

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

<form class="ui form" method="get" action="/dns/providers">
  <div class="ui fields inline">
    <div class="ui field">
      <input
        type="text"
        name="keyword"
        placeholder="账号说明..."
        v-model="keyword"
      />
    </div>
    <div class="ui field" v-if="providerTypes.length > 0">
      <b-select
        name="providerType"
        v-model="providerType"
        auto-width
        :options="[
            {label: '[服务商厂家]', value: ''},
            ...providerTypes.map(p => ({
                label: p.name + '（' + p.count + '）',
                value: p.code,
            }))
        ]"
      ></b-select>

      <!-- <select class="ui dropdown auto-width" name="providerType" v-model="providerType">
                <option value="">[服务商厂家]</option>
                <option v-for="p in providerTypes" :value="p.code">{{p.name}}({{p.count}})</option>
            </select> -->
    </div>
    <div class="ui field">
      <button class="ui button" type="submit">搜索</button>
      &nbsp;
      <a
        :href="Tea.url('.')"
        v-if="keyword.length > 0 || domain.length > 0 || providerType.length > 0"
        >[清除条件]</a
      >
    </div>
  </div>
</form>

<!-- <p class="comment" v-if="providers.length == 0">暂时还没有第三方DNS服务商。</p> -->
<b-empty v-if="providers.length == 0">暂时还没有第三方DNS服务商。</b-empty>

<table class="ui table selectable celled" v-if="providers.length > 0">
  <thead>
    <tr>
      <th>账号说明</th>
      <th class="three wide">服务商</th>
      <th class="two op">操作</th>
    </tr>
  </thead>
  <tr v-for="(provider, index) in providers">
    <td>
      <a :href="'/dns/providers/provider?providerId=' + provider.id"
        ><keyword :v-word="keyword">{{provider.name}}</keyword></a
      >
    </td>
    <td>{{provider.typeName}}</td>
    <td>
      <a :href="'/dns/providers/provider?providerId=' + provider.id">详情</a>
      &nbsp; &nbsp;
      <a href="" @click.prevent="deleteProvider(provider.id)">删除</a>
    </td>
  </tr>
</table>

<div class="page" v-html="page"></div>
