{$layout} 
{$template "menu"}

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

<form
  class="ui form"
  method="get"
  action="/ns/domains"
  v-show="!hasSelectedDomains"
>
  <div class="ui fields inline">
    <div class="ui field" v-if="hasGroups">
      <ns-domain-group-selector
        :v-domain-group-id="groupId"
        ref="groupSelector"
      ></ns-domain-group-selector>
    </div>
    <div class="ui field">
      <input
        type="text"
        name="keyword"
        v-model="keyword"
        placeholder="域名..."
      />
    </div>
    <div class="ui field">
      <button class="ui button" type="submit">搜索</button>
      &nbsp;
      <a :href="Tea.url('.')" v-if="groupId > 0 || keyword.length > 0"
        >[清除条件]</a
      >
    </div>

    <div class="ui field"></div>
  </div>
</form>


<form class="ui form" v-show="hasSelectedDomains">
  <div class="ui fields inline">
    <div class="ui field" v-if="hasVerifyingDomains">
      <button
        class="ui button basic"
        type="button"
        @click.prevent="verifyDomains"
      >
        批量验证选中域名
      </button>
    </div>
    <div class="ui field">
      <button
        class="ui button basic"
        type="button"
        @click.prevent="deleteDomains"
      >
        批量删除选中域名
      </button>
    </div>
    <div class="ui field">
      <button
        class="ui button basic"
        type="button"
        @click.prevent="cancelDomains"
      >
        取消
      </button>
    </div>
  </div>
</form>

<div v-if="domains.length == 0">
  <div class="margin"></div>
  <!-- <p class="comment">暂时还没有域名。</p> -->
  <b-empty>暂时还没有域名。</b-empty>
</div>


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

<b-table
    v-if="domains.length > 0"
    :columns="columns"
    :data-source="domains"
    :row-key="'id'"
    :row-selection="{
        type: 'checkbox',
        selectedRowKeys: selectedDomainIds,
        onChange: (selectedRowKeys) => {
            selectedDomainIds = selectedRowKeys;
            updateSelectedDomains();
        }
    }"
    :scroll="{ x: 800 }"
    size="middle"
>
    <template slot="nameSlot" slot-scope="{ text, record }">
        <a :href="'/ns/domains/domain?domainId=' + record.id">
            <keyword :v-word="keyword">{{record.name}}</keyword>
        </a>
        <div v-if="record.groups.length > 0">
            <a
                v-for="group in record.groups"
                :href="'/ns/domains?userId=' + group.userId + '&groupId=' + group.id"
            >
                <grey-label :key="group.id">{{group.name}}</grey-label>
            </a>
        </div>
    </template>

    <template slot="statusSlot" slot-scope="{ text, record }">
        <span v-if="!record.isOn" class="red">已停用</span>
        <span v-if="record.isOn">
            <a
                href=""
                v-if="record.status == 'none'"
                @click.prevent="verifyDomain(record.id)"
            ><span class="red" style="border-bottom: 1px #db2828 dashed">未验证</span></a>
            <span
                v-else
                :class="{green:record.status == 'verified', red:record.status == 'rejected' || record.status == 'forbidden'}"
            >{{record.statusName}}</span>
        </span>
    </template>

    <template slot="actionSlot" slot-scope="{ text, record }">
        <a-button type="link" @click="goToDomain(record.id)">
            <i class="pi pi-cog" style="font-size: 12px; padding: 4px;"></i> 详情
        </a-button>
        <a-button type="link" @click="deleteDomain(record.id)">
            <i class="pi pi-trash" style="font-size: 12px; padding: 4px;"></i> 删除
        </a-button>
    </template>
</b-table>

<page-box></page-box>
