{$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>
</div>

<!-- 域名列表 -->
<table class="ui table selectable celled" v-if="domains.length > 0">
    <thead>
    <tr>
        <th style="width: 1em">
            <checkbox v-model="selectedAll"></checkbox>
        </th>
        <th>域名</th>
        <th class="width5">状态</th>
        <th class="two op">操作</th>
    </tr>
    </thead>
    <tr v-for="domain in domains">
        <td>
            <checkbox ref="domainCheckbox" :v-value="domain.id" :checked="selectedAll ? 'checked' : ''"
                      @input="changeSelectedDomains" :status="domain.status"></checkbox>
        </td>
        <td>
            <a :href="'/ns/domains/domain?domainId=' + domain.id">
                <keyword :v-word="keyword">{{domain.name}}</keyword>
            </a>
            <div v-if="domain.groups.length > 0">
                <a v-for="group in domain.groups" :href="'/ns/domains?userId=' + group.userId + '&groupId=' + group.id">
                    <grey-label :key="group.id">{{group.name}}</grey-label>
                </a>
            </div>
        </td>
        <td>
            <span v-if="!domain.isOn" class="red">已停用</span>
            <span v-if="domain.isOn">
                <a href="" v-if="domain.status == 'none'" @click.prevent="verifyDomain(domain.id)"><span class="red"
                                                                                                         style="border-bottom: 1px #db2828 dashed">未验证</span></a>
                <span v-else
                      :class="{green:domain.status == 'verified', red:domain.status == 'rejected' || domain.status == 'forbidden'}">{{domain.statusName}}</span>
            </span>
        </td>
        <td>
            <a :href="'/ns/domains/domain?domainId=' + domain.id">详情</a> &nbsp; <a href=""
                                                                                     @click.prevent="deleteDomain(domain.id)">删除</a>
        </td>
    </tr>
</table>

<page-box></page-box>