{$layout}

<first-menu>
	<a href="" class="item" @click.prevent="createProvider()">
        <i class="pi pi-plus" style="font-size: 12px; margin-right: 5px;"></i>
        {{t('dns_providers_index@添加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="t('dns_providers_index@账号说明')" v-model="keyword"/>
        </div>
        <div class="ui field">
            <input type="text" name="domain" :placeholder="t('dns_providers_index@域名')" v-model="domain"/>
        </div>
        <div class="ui field" v-if="providerTypes.length > 0">
            <b-select
                name="providerType"
                v-model="providerType"
                auto-width
                :options="[
                    {label: t('dns_providers_index@服务商厂家'), 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="">{{t('dns_providers_index@服务商厂家')}}</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">{{t('dns_providers_index@搜索')}}</button>
            &nbsp;
            <a :href="Tea.url('.')" v-if="keyword.length > 0 || domain.length > 0 || providerType.length > 0">{{t('dns_providers_index@清除条件')}}</a>
        </div>
    </div>
</form>
<div class="margin"></div>
<b-empty v-if="providers.length == 0">{{t('dns_providers_index@暂时还没有第三方DNS服务商')}}</b-empty>

<div v-if="providers.length > 0">
    <b-table
        :columns="[
            {
                title: t('dns_providers_index@账号说明Header'),
                dataIndex: 'name',
                key: 'name',
                scopedSlots: { customRender: 'name' }
            },
            {
                title: t('dns_providers_index@服务商'),
                dataIndex: 'typeName',
                key: 'typeName',
                width: '20%'
            },
            {
                title: t('dns_providers_index@域名Header'),
                dataIndex: 'countDomains',
                key: 'countDomains',
                width: '10%',
                align: 'center',
                scopedSlots: { customRender: 'countDomains' }
            },
            {
                title: t('dns_providers_index@操作'),
                key: 'action',
                width: '15%',
                scopedSlots: { customRender: 'action' }
            }
        ]"
        :data-source="providers"
        row-key="id"
        :bordered="false"
        :pagination="false"
    >
        <template slot="name" slot-scope="{ text, record }">
            <a :href="'/dns/providers/provider?providerId=' + record.id">
                <keyword :v-word="keyword">{{record.name}}</keyword>
            </a>
        </template>

        <template slot="countDomains" slot-scope="{ text, record }">
            <span v-if="record.countDomains == 0" class="disabled">0</span>
            <span v-else>{{record.countDomains}}</span>
        </template>

        <template slot="action" slot-scope="{ text, record }">
            <a :href="'/dns/providers/provider?providerId=' + record.id">{{t('dns_providers_index@详情')}}</a> &nbsp; &nbsp; 
            <a href="" @click.prevent="deleteProvider(record.id)">{{t('dns_providers_index@删除')}}</a>
        </template>
    </b-table>
</div>

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