{$layout}

<first-menu>
    <a href="/dns/providers" class="item">{{t('dns_providers@dnsAccountList')}}</a>
    <span class="separator">|</span>
    <a :href="'/dns/providers/provider?providerId=' + provider.id" class="item active">{{provider.name}}</a>
</first-menu>

<div class="left-right-box-container">
    <div class="right-box">
        <!-- 账号信息 -->
        <div class="config-section">
            <div class="section-title">
                <i class="icon info circle"></i>
                {{t('dns_providers@accountInformation')}}
                <a href="" @click.prevent="updateProvider(provider.id)"
                    class="ant-btn-link">{{t('dns_providers@modify')}}</a>
            </div>

            <div class="config-item">
                <div class="item-label">{{t('dns_providers@accountDescription')}}</div>
                <div class="item-content">{{provider.name}}</div>
            </div>

            <div class="config-item">
                <div class="item-label">{{t('dns_providers@serviceProvider')}}</div>
                <div class="item-content">{{provider.typeName}}</div>
            </div>

            <!-- DNSPod -->
            <template v-if="provider.type == 'dnspod'">
                <div class="config-item">
                    <div class="item-label">{{t('dns_providers@keyType')}}</div>
                    <div class="item-content">
                        <span
                            v-if="provider.apiParams.apiType == 'tencentDNS'">{{t('dns_providers@tencentCloudApiKey')}}</span>
                        <span v-else>{{t('dns_providers@dnspodToken')}}</span>
                    </div>
                </div>
                <div class="config-item" v-if="provider.apiParams.apiType == 'tencentDNS'">
                    <div class="item-label">{{t('dns_providers@secretIdLabel')}}</div>
                    <div class="item-content">{{provider.apiParams.accessKeyId}}</div>
                </div>
                <div class="config-item" v-if="provider.apiParams.apiType == 'tencentDNS'">
                    <div class="item-label">{{t('dns_providers@secretKeyLabel')}}</div>
                    <div class="item-content">{{provider.apiParams.accessKeySecret}}</div>
                </div>
                <div class="config-item" v-if="provider.apiParams.apiType != 'tencentDNS'">
                    <div class="item-label">{{t('dns_providers@dnspodKeyIDLabel')}}</div>
                    <div class="item-content">{{provider.apiParams.id}}</div>
                </div>
                <div class="config-item" v-if="provider.apiParams.apiType != 'tencentDNS'">
                    <div class="item-label">{{t('dns_providers@dnspodKeyTokenLabel')}}</div>
                    <div class="item-content">{{provider.apiParams.token}}</div>
                </div>
                <div class="config-item" v-if="provider.apiParams.apiType != 'tencentDNS'">
                    <div class="item-label">{{t('dns_providers@regionLabel')}}</div>
                    <div class="item-content">
                        <span
                            v-if="provider.apiParams.region == 'international'">{{t('dns_providers@internationalStation')}}</span>
                        <span v-else>{{t('dns_providers@chinaStation')}}</span>
                    </div>
                </div>
            </template>

            <!-- AliDNS -->
            <template v-if="provider.type == 'alidns'">
                <div class="config-item">
                    <div class="item-label">{{t('dns_providers@accessKeyIdLabel')}}</div>
                    <div class="item-content">{{provider.apiParams.accessKeyId}}</div>
                </div>
                <div class="config-item">
                    <div class="item-label">{{t('dns_providers@accessKeySecretLabel')}}</div>
                    <div class="item-content">{{provider.apiParams.accessKeySecret}}</div>
                </div>
                <div class="config-item">
                    <div class="item-label">{{t('dns_providers@aliDnsRegionIdLabel')}}</div>
                    <div class="item-content">
                        <span
                            v-if="provider.apiParams.regionId != null && provider.apiParams.regionId.length > 0">{{provider.apiParams.regionId}}</span>
                        <span v-else class="disabled">{{t('dns_providers@notSet')}}</span>
                    </div>
                </div>
            </template>

            <!-- HuaweiDNS -->
            <template v-if="provider.type == 'huaweiDNS'">
                <div class="config-item">
                    <div class="item-label">{{t('dns_providers@accessKeyIdLabel')}}</div>
                    <div class="item-content">{{provider.apiParams.accessKeyId}}</div>
                </div>
                <div class="config-item">
                    <div class="item-label">{{t('dns_providers@accessKeySecretLabel')}}</div>
                    <div class="item-content">{{provider.apiParams.accessKeySecret}}</div>
                </div>
                <div class="config-item">
                    <div class="item-label">{{t('dns_providers@huaweiDnsEndpointLabel')}}</div>
                    <div class="item-content">
                        <span
                            v-if="provider.apiParams.endpoint != null && provider.apiParams.endpoint.length > 0">{{provider.apiParams.endpoint}}</span>
                        <span v-else class="disabled">{{t('dns_providers@defaultLabel')}}</span>
                    </div>
                </div>
            </template>

            <!-- CloudFlare -->
            <template v-if="provider.type == 'cloudFlare'">
                <div class="config-item">
                    <div class="item-label">{{t('dns_providers@apiKeyLabel')}}</div>
                    <div class="item-content">{{provider.apiParams.apiKey}}</div>
                </div>
                <div class="config-item">
                    <div class="item-label">{{t('dns_providers@cloudFlareAccountEmailLabel')}}</div>
                    <div class="item-content">{{provider.apiParams.email}}</div>
                </div>
            </template>

            <!-- GoDaddy -->
            <template v-if="provider.type == 'godaddy'">
                <div class="config-item">
                    <div class="item-label">{{t('dns_providers@goDaddyKeyLabel')}}</div>
                    <div class="item-content">{{provider.apiParams.key}}</div>
                </div>
                <div class="config-item">
                    <div class="item-label">{{t('dns_providers@goDaddySecretLabel')}}</div>
                    <div class="item-content">{{provider.apiParams.secret}}</div>
                </div>
            </template>

            <!-- ClouDNS -->
            <template v-if="provider.type == 'cloudns'">
                <div class="config-item" v-if="provider.apiParams.authId > 0">
                    <div class="item-label">
                        {{t('dns_providers@clouDnsUserAuthIdLabel')}}<em>{{t('dns_providers@clouDnsAuthIdParenthesis')}}</em>
                    </div>
                    <div class="item-content">{{provider.apiParams.authId}}</div>
                </div>
                <div class="config-item" v-if="provider.apiParams.subAuthId > 0">
                    <div class="item-label">
                        {{t('dns_providers@clouDnsSubUserAuthIdLabel')}}<em>{{t('dns_providers@clouDnsSubAuthIdParenthesis')}}</em>
                    </div>
                    <div class="item-content">{{provider.apiParams.subAuthId}}</div>
                </div>
                <div class="config-item">
                    <div class="item-label">
                        {{t('dns_providers@clouDnsAuthPasswordLabel')}}<em>{{t('dns_providers@clouDnsAuthPasswordParenthesis')}}</em>
                    </div>
                    <div class="item-content">{{provider.apiParams.authPassword}}</div>
                </div>
            </template>

            <!-- DNS.COM -->
            <template v-if="provider.type == 'dnscom'">
                <div class="config-item">
                    <div class="item-label">{{t('dns_providers@dnsComApiKeyLabel')}}</div>
                    <div class="item-content">{{provider.apiParams.key}}</div>
                </div>
                <div class="config-item">
                    <div class="item-label">{{t('dns_providers@dnsComApiSecretLabel')}}</div>
                    <div class="item-content">{{provider.apiParams.secret}}</div>
                </div>
            </template>

            <!-- DNS.LA -->
            <template v-if="provider.type == 'dnsla'">
                <div class="config-item">
                    <div class="item-label">{{t('dns_providers@dnsLaApiIdLabel')}}</div>
                    <div class="item-content">{{provider.apiParams.apiId}}</div>
                </div>
                <div class="config-item">
                    <div class="item-label">{{t('dns_providers@apiKeyLabel')}}</div>
                    <div class="item-content">{{provider.apiParams.secret}}</div>
                </div>
            </template>

            <!-- VolcEngine -->
            <template v-if="provider.type == 'volcEngine'">
                <div class="config-item">
                    <div class="item-label">{{t('dns_providers@accessKeyIDTextLabel')}}</div>
                    <div class="item-content">{{provider.apiParams.accessKeyId}}</div>
                </div>
                <div class="config-item">
                    <div class="item-label">{{t('dns_providers@secretAccessKeyTextLabel')}}</div>
                    <div class="item-content">{{provider.apiParams.accessKeySecret}}</div>
                </div>
            </template>

            <!-- Amazon Route 53 -->
            <template v-if="provider.type == 'amazonRoute53'">
                <div class="config-item">
                    <div class="item-label">{{t('dns_providers@accessKeyIDTextLabel')}}</div>
                    <div class="item-content">{{provider.apiParams.accessKeyId}}</div>
                </div>
                <div class="config-item">
                    <div class="item-label">{{t('dns_providers@secretAccessKeyTextLabel')}}</div>
                    <div class="item-content">{{provider.apiParams.accessKeySecret}}</div>
                </div>
                <div class="config-item">
                    <div class="item-label">{{t('dns_providers@amazonRoute53ApiRegionLabel')}}</div>
                    <div class="item-content">
                        <span
                            v-if="provider.apiParams.region != null && provider.apiParams.region.length > 0">{{provider.apiParams.region}}</span>
                        <span v-else class="disabled">{{t('dns_providers@notSetYet')}}</span>
                    </div>
                </div>
            </template>

            <!-- Azure DNS -->
            <template v-if="provider.type == 'azureDNS'">
                <div class="config-item">
                    <div class="item-label">{{t('dns_providers@subscriptionIdLabel')}} <br /><em>(Subscription ID)</em>
                    </div>
                    <div class="item-content">{{provider.apiParams.subscriptionId}}</div>
                </div>
                <div class="config-item">
                    <div class="item-label">{{t('dns_providers@tenantIdLabel')}} <br /><em>(Directory Tenant ID)</em>
                    </div>
                    <div class="item-content">{{provider.apiParams.tenantId}}</div>
                </div>
                <div class="config-item">
                    <div class="item-label">{{t('dns_providers@clientIdLabel')}} <br /><em>(Client ID)</em></div>
                    <div class="item-content">{{provider.apiParams.clientId}}</div>
                </div>
                <div class="config-item">
                    <div class="item-label">{{t('dns_providers@clientSecretValueLabel')}} <br /><em>(Client Secret
                            Value)</em></div>
                    <div class="item-content">{{provider.apiParams.clientSecret}}</div>
                </div>
                <div class="config-item">
                    <div class="item-label">{{t('dns_providers@resourceGroupLabel')}} <br /><em>(Resource Group
                            Name)</em></div>
                    <div class="item-content">{{provider.apiParams.resourceGroupName}}</div>
                </div>
            </template>

            <!-- bunny.net -->
            <template v-if="provider.type == 'bunnyNet'">
                <div class="config-item">
                    <div class="item-label">{{t('dns_providers@apiKeyLabel')}}</div>
                    <div class="item-content">{{provider.apiParams.apiKey}}</div>
                </div>
            </template>

            <!-- Local EdgeDNS -->
            <template v-if="provider.type == 'localEdgeDNS'">
                <div class="config-item">
                    <div class="item-label">{{t('dns_providers@localEdgeDnsClusterLabel')}}</div>
                    <div class="item-content">{{provider.localEdgeDNS.name}}</div>
                </div>
            </template>

            <!-- EdgeDNS API -->
            <template v-if="provider.type == 'edgeDNSAPI'">
                <div class="config-item">
                    <div class="item-label">{{t('dns_providers@edgeDnsApiAddressLabel')}}</div>
                    <div class="item-content">{{provider.apiParams.host}}</div>
                </div>
                <div class="config-item">
                    <div class="item-label">{{t('dns_providers@edgeDnsAccessKeyTypeLabel')}}</div>
                    <div class="item-content">
                        <span v-if="provider.apiParams.role == 'user'">{{t('dns_providers@platformUser')}}</span>
                        <span v-if="provider.apiParams.role == 'admin'">{{t('dns_providers@administrator')}}</span>
                    </div>
                </div>
                <div class="config-item">
                    <div class="item-label">{{t('dns_providers@accessKeyIDTextLabel')}}</div>
                    <div class="item-content">{{provider.apiParams.accessKeyId}}</div>
                </div>
                <div class="config-item">
                    <div class="item-label">{{t('dns_providers@edgeDnsAccessKeySecretLabel')}}</div>
                    <div class="item-content">{{provider.apiParams.accessKeySecret}}</div>
                </div>
            </template>

            <!-- CustomHTTP -->
            <template v-if="provider.type == 'customHTTP'">
                <div class="config-item">
                    <div class="item-label">{{t('dns_providers@customHttpUrlLabel')}}</div>
                    <div class="item-content">{{provider.apiParams.url}}</div>
                </div>
                <div class="config-item">
                    <div class="item-label">{{t('dns_providers@customHttpPrivateKeyLabel')}}</div>
                    <div class="item-content">{{provider.apiParams.secret}}</div>
                </div>
            </template>

            <!-- DigitalOcean -->
            <tamplate v-if="provider.type == 'digitalOcean'">
                <div class="config-item">
                    <div class="item-label">{{t('dns_providers@apiKeyLabel')}}</div>
                    <div class="item-content">
                        {{provider.apiParams.apiKey}}
                    </div>
                </div>
            </tamplate>

            <!-- Linode -->
            <template v-if="provider.type == 'linode'">
                <div class="config-item">
                    <div class="item-label">{{t('dns_providers@apiKeyLabel')}}</div>
                    <div class="item-content">
                        {{provider.apiParams.apiKey}}
                    </div>
                </div>
            </template>

            <!-- DNS Made Easy -->
            <template v-if="provider.type == 'dnsMadeEasy'">
                <div class="config-item">
                    <div class="item-label">{{t('dns_providers@apiKeyLabel')}}</div>
                    <div class="item-content">
                        {{provider.apiParams.apiKey}}
                    </div>
                </div>
                <div class="config-item">
                    <div class="item-label">{{t('dns_providers@secretKeyLabel')}}</div>
                    <div class="item-content">
                        {{provider.apiParams.secretKey}}
                    </div>
                </div>
            </template>

            <!-- easyDNS -->
            <template v-if="provider.type == 'easyDNS'">
                <div class="config-item">
                    <div class="item-label">{{t('dns_providers@apiKeyLabel')}}</div>
                    <div class="item-content">
                        {{provider.apiParams.apiKey}}
                    </div>
                </div>
                <div class="config-item">
                    <div class="item-label">API Token</div>
                    <div class="item-content">
                        {{provider.apiParams.apiToken}}
                    </div>
                </div>
            </template>

            <!-- Sakura Cloud -->
            <template v-if="provider.type == 'sakuraCloud'">
                <div class="config-item">
                    <div class="item-label">API Token</div>
                    <div class="item-content">
                        {{provider.apiParams.apiToken}}
                    </div>
                </div>
                <div class="config-item">
                    <div class="item-label">{{t('dns_providers@apiKeyLabel')}}</div>
                    <div class="item-content">
                        {{provider.apiParams.apiSecret}}
                    </div>
                </div>
            </template>

            <!-- Scaleway -->
            <template v-if="provider.type == 'scaleway'">
                <div class="config-item">
                    <div class="item-label">Access Key</div>
                    <div class="item-content">
                        {{provider.apiParams.accessKey}}
                    </div>
                </div>
                <div class="config-item">
                    <div class="item-label">Secret Key</div>
                    <div class="item-content">
                        {{provider.apiParams.secretKey}}
                    </div>
                </div>
                <div class="config-item">
                    <div class="item-label">Project ID</div>
                    <div class="item-content">
                        {{provider.apiParams.projectId}}
                    </div>
                </div>
            </template>

            <div class="config-item" v-if="provider.minTTL > 0">
                <div class="item-label">{{t('dns_providers@minTTLLabel')}}</div>
                <div class="item-content">{{provider.minTTL}}{{t('dns_providers@secondsUnit')}}</div>
            </div>
        </div>

        <!-- 管理的域名 -->
        <div class="config-section">
            <div class="section-title">
                <i class="icon globe"></i>
                {{t('dns_providers@managedDomainsTitle')}}
                <div class="action-links" style="display: inline-flex; gap: 10px;">
                    <a class="ant-btn-link" href=""
                        @click.prevent="syncDomains()">{{t('dns_providers@refreshDomainsAction')}}</a>
                    <a class="ant-btn-link" href=""
                        @click.prevent="createDomain()">{{t('dns_providers@addDomainAction')}}</a>
                </div>
            </div>

            <div class="ui message" v-if="isUpdatingDomains">{{t('dns_providers@checkingDomainStatusMessage')}}</div>

            <second-menu>
                <menu-item :href="'/dns/providers/provider?providerId=' + provider.id + '&filter='"
                    :active="filter == ''">{{t('dns_providers@filterNormalStatus')}}</menu-item>
                <menu-item :href="'/dns/providers/provider?providerId=' + provider.id + '&filter=down'"
                    :active="filter == 'down'">{{t('dns_providers@filterOfflineStatus')}}</menu-item>
                <menu-item :href="'/dns/providers/provider?providerId=' + provider.id + '&filter=deleted'"
                    :active="filter == 'deleted'">{{t('dns_providers@filterDeletedStatus')}}</menu-item>
            </second-menu>

            <div class="item-content" style="padding: 0 10px 10px 10px;">
                <b-empty v-if="domains.length == 0">
                    {{t('dns_providers@emptyDomainsPrefix')}}<span
                        v-if="filter == 'deleted'">{{t('dns_providers@filterDeletedStatus')}}</span><span
                        v-if="filter == 'down'">{{t('dns_providers@filterOfflineStatus')}}</span><span
                        v-if="filter == ''">{{t('dns_providers@canManageText')}}</span>{{t('dns_providers@emptyDomainsSuffix')}}
                </b-empty>

                <b-table v-if="domains.length > 0" :columns="[
                    {
                        title: t('dns_providers@columnDomain'),
                        dataIndex: 'name',
                        key: 'name'
                    },
                    {
                        title: t('dns_providers@columnRoutes'),
                        dataIndex: 'countRoutes',
                        key: 'countRoutes',
                        width: '7em',
                        align: 'center',
                        scopedSlots: { customRender: 'countRoutes' }
                    },
                    {
                        title: t('dns_providers@columnClusters'),
                        dataIndex: 'countClusters',
                        key: 'countClusters',
                        width: '6em',
                        align: 'center',
                        scopedSlots: { customRender: 'countClusters' }
                    },
                    {
                        title: t('dns_providers@columnNodeDomains'),
                        dataIndex: 'countAllNodes',
                        key: 'countAllNodes',
                        width: '7em',
                        align: 'center',
                        scopedSlots: { customRender: 'countAllNodes' }
                    },
                    {
                        title: t('dns_providers@columnServerDomains'),
                        dataIndex: 'countAllServers',
                        key: 'countAllServers',
                        width: '7em',
                        align: 'center',
                        scopedSlots: { customRender: 'countAllServers' }
                    },
                    {
                        title: t('dns_providers@columnDataUpdateTime'),
                        dataIndex: 'dataUpdatedTime',
                        key: 'dataUpdatedTime',
                        scopedSlots: { customRender: 'dataUpdatedTime' }
                    },
                    {
                        title: t('dns_providers@columnStatus'),
                        key: 'status',
                        width: '10%',
                        align: 'center',
                        scopedSlots: { customRender: 'status' }
                    },
                    {
                        title: t('dns_providers@columnActions'),
                        key: 'action',
                        width: '15%',
                        scopedSlots: { customRender: 'action' }
                    }
                ]" :data-source="domains" row-key="id" :bordered="false" :pagination="false">
                    <template slot="countRoutes" slot-scope="{ text, record }">
                        <a href="" v-if="record.countRoutes > 0" @click.prevent="showRoutes(record.id)">
                            {{record.countRoutes}}{{t('dns_providers@itemUnit')}}<popup-icon></popup-icon>
                        </a>
                        <span v-else class="disabled">0{{t('dns_providers@itemUnit')}}</span>
                    </template>

                    <template slot="countClusters" slot-scope="{ text, record }">
                        <a href="" v-if="record.countClusters > 0" @click.prevent="viewClusters(record.id)">
                            {{record.countClusters}}{{t('dns_providers@itemUnit')}}<popup-icon></popup-icon>
                        </a>
                        <span v-else class="disabled">0{{t('dns_providers@itemUnit')}}</span>
                    </template>

                    <template slot="countAllNodes" slot-scope="{ text, record }">
                        <a href="" v-if="record.countAllNodes > 0" @click.prevent="viewNodes(record.id)">
                            {{record.countNodeRecords}}/{{record.countAllNodes}}{{t('dns_providers@itemUnit')}}<popup-icon></popup-icon>
                        </a>
                        <span v-else class="disabled">0{{t('dns_providers@itemUnit')}}</span>
                    </template>

                    <template slot="countAllServers" slot-scope="{ text, record }">
                        <a href="" v-if="record.countAllServers > 0" @click.prevent="viewServers(record.id)">
                            {{record.countServerRecords}}/{{record.countAllServers}}{{t('dns_providers@itemUnit')}}<popup-icon></popup-icon>
                        </a>
                        <span v-else class="disabled">0{{t('dns_providers@itemUnit')}}</span>
                    </template>

                    <template slot="dataUpdatedTime" slot-scope="{ text, record }">
                        <span v-if="record.dataUpdatedTime.length > 0">{{record.dataUpdatedTime}}</span>
                        <span v-else class="disabled">{{t('dns_providers@notUpdatedYet')}}</span>
                    </template>

                    <template slot="status" slot-scope="{ text, record }">
                        <span v-if="!record.isOn"><label-on :v-is-on="record.isOn"></label-on></span>
                        <div v-else-if="record.countRoutes == 0 || record.nodesChanged || record.serversChanged">
                            <a href="" style="border-bottom: 1px #db2828 dashed"
                                :title="t('dns_providers@syncWithDnsProviderTitle')"
                                @click.prevent="syncDomain(index,record)" v-if="!record.isSyncing">
                                <span class="red">{{t('dns_providers@needsSyncStatus')}}</span>
                            </a>
                            <span v-else>{{t('dns_providers@syncingStatus')}}</span>
                        </div>
                        <div v-else-if="!record.isUp">
                            <a href="" style="border-bottom: 1px #db2828 dashed" @click.prevent="alertDown">
                                <span class="red">{{t('dns_providers@filterOfflineStatus')}}</span>
                            </a>
                        </div>
                    </template>

                    <template slot="action" slot-scope="{ text, record, index }">
                        <a href="" @click.prevent="syncDomain(index, record)"
                            v-if="!record.isSyncing">{{t('dns_providers@syncAction')}}</a>
                        <span v-else>{{t('dns_providers@syncingStatus')}}</span>&nbsp;
                        <a href="" @click.prevent="updateDomain(record.id)"
                            v-if="!record.isSyncing">{{t('dns_providers@modify')}}</a> &nbsp;
                        <a href="" @click.prevent="deleteDomain(record)"
                            v-if="!record.isSyncing && !record.isDeleted">{{t('dns_providers@deleteAction')}}</a>
                        <a href="" @click.prevent="recoverDomain(record)"
                            v-if="!record.isSyncing && record.isDeleted">{{t('dns_providers@recoverAction')}}</a>
                    </template>
                </b-table>
            </div>
        </div>
    </div>
</div>

<page-box></page-box>