{$layout}

<first-menu>
    <menu-item :href="'/dns'">{{t('dns_clusters_cluster@所有集群')}}</menu-item>
    <span class="separator">|</span>
    <menu-item :href="'/dns/clusters/cluster?clusterId=' + cluster.id" active="true">{{cluster.name}}</menu-item>
</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_clusters_cluster@基本信息')}}
            </div>

            <div class="config-item">
                <div class="item-label">{{t('dns_clusters_cluster@集群Label')}}</div>
                <div class="item-content">
                    <link-icon :href="'/clusters/cluster?clusterId=' + cluster.id">{{cluster.name}}</link-icon>
                </div>
            </div>

            <div class="config-item">
                <div class="item-label">{{t('dns_clusters_cluster@DNS子域名')}}</div>
                <div class="item-content">
                    <span
                        v-if="dnsInfo.domainName.length > 0"><var>{{dnsInfo.dnsName}}</var>.{{dnsInfo.domainName}}</span>
                    <span v-else class="disabled">{{t('dns_clusters_cluster@没有设置')}}</span>
                    &nbsp; <a href="" @click.prevent="updateCluster(cluster.id)">{{t('dns_clusters_cluster@修改Link')}}</a>
                </div>
            </div>

            <div class="config-item">
                <div class="item-label">{{t('dns_clusters_cluster@DNS服务商')}}</div>
                <div class="item-content">
                    <div v-if="dnsInfo.providerName.length > 0">
                        <link-icon
                            :href="'/dns/providers/provider?providerId=' + dnsInfo.providerId">{{dnsInfo.providerTypeName}}
                            - {{dnsInfo.providerName}}</link-icon>
                    </div>
                    <span v-else-if="dnsInfo.domainName.length == 0" class="disabled">{{t('dns_clusters_cluster@请先设置域名')}}</span>
                    <span v-else class="disabled">{{t('dns_clusters_cluster@没有设置')}}</span>
                </div>
            </div>

            <div class="config-item">
                <div class="item-label">{{t('dns_clusters_cluster@自动设置CNAMERecord')}}</div>
                <div class="item-content">
                    <span v-if="dnsInfo.cnameRecords.length == 0">{{t('dns_clusters_cluster@暂时还没有设置')}}</span>
                    <span v-for="record in dnsInfo.cnameRecords" class="ui label basic">{{record}}</span>
                </div>
            </div>

            <div class="config-item" v-if="dnsInfo.domainName.length > 0">
                <div class="item-label">{{t('dns_clusters_cluster@操作Label')}}</div>
                <div class="item-content">
                    <div v-if="!isSyncing">
                        <link-red v-if="dnsHasChanges"
                            @click.prevent="syncCluster(cluster.id)">{{t('dns_clusters_cluster@检测到解析记录有变化需同步')}}</link-red>
                        <a href="" @click.prevent="syncCluster(cluster.id)" v-else>{{t('dns_clusters_cluster@DNSServiceSync')}}</a>
                    </div>
                    <span v-else>{{t('dns_clusters_cluster@DNSServiceSyncing')}}</span>
                </div>
            </div>
        </div>

        <!-- 当前任务 -->
        <div class="config-section" v-if="tasks.length > 0">
            <div class="section-title">
                <i class="icon tasks"></i>
                {{t('dns_clusters_cluster@正在执行的任务')}}
            </div>
            <div class="item-content" style="padding: 10px;">
                <b-table :columns="[
                        {
                            title: t('dns_clusters_cluster@对象Col'),
                            dataIndex: 'object',
                            key: 'object',
                            scopedSlots: { customRender: 'object' }
                        },
                        {
                            title: t('dns_clusters_cluster@任务Col'),
                            dataIndex: 'task',
                            key: 'task',
                            scopedSlots: { customRender: 'task' }
                        },
                        {
                            title: t('dns_clusters_cluster@状态Col'),
                            dataIndex: 'status',
                            key: 'status',
                            width: '26em',
                            scopedSlots: { customRender: 'status' }
                        },
                        {
                            title: t('dns_clusters_cluster@触发时间Col'),
                            dataIndex: 'updatedTime',
                            key: 'updatedTime'
                        },
                        {
                            title: '',
                            key: 'action',
                            width: '5em',
                            scopedSlots: { customRender: 'action' }
                        }
                    ]" :data-source="tasks" row-key="id" :bordered="false" :pagination="false">
                    <template slot="object" slot-scope="{ text, record }">
                        <span
                            v-if="(record.type == 'clusterChange' || record.type == 'clusterNodesChange') && record.cluster != null">
                            {{record.cluster.name}}
                            <link-icon :href="'/dns/clusters/cluster?clusterId=' + record.cluster.id"
                                target="_top"></link-icon>
                        </span>
                        <span v-if="record.type == 'nodeChange'">{{record.node.name}}</span>
                        <span v-if="record.type == 'serverChange'">{{record.server.name}}</span>
                        <span v-if="record.type == 'domainChange'">{{record.domain.name}}</span>
                    </template>

                    <template slot="task" slot-scope="{ text, record }">
                        <span v-if="record.type == 'clusterChange' || record.type == 'clusterNodesChange'">{{t('dns_clusters_cluster@集群TaskType')}}</span>
                        <span v-if="record.type == 'nodeChange'">{{t('dns_clusters_cluster@节点TaskType')}}</span>
                        <span v-if="record.type == 'serverChange'">{{t('dns_clusters_cluster@网站TaskType')}}</span>
                        <span v-if="record.type == 'domainChange'">{{t('dns_clusters_cluster@域名TaskType')}}</span>
                    </template>

                    <template slot="status" slot-scope="{ text, record }">
                        <span v-if="record.isDone" class="red">{{record.error}}</span>
                        <span v-else>{{t('dns_clusters_cluster@正在同步Status')}}</span>
                    </template>

                    <template slot="action" slot-scope="{ text, record }">
                        <a href="" :title="t('dns_clusters_cluster@删除Title')" class="remove-btn" @click.prevent="deleteTask(record.id)">
                            <i class="pi pi-times grey"></i>
                        </a>
                    </template>
                </b-table>
            </div>

        </div>

        <!-- 问题合集 -->
        <div class="config-section" v-if="issues.length > 0">
            <div class="section-title">
                <i class="icon warning"></i>
                {{t('dns_clusters_cluster@需要修复的问题')}}
            </div>
            <div class="item-content" style="padding: 10px;">
                <b-table :columns="[
                        {
                            title: t('dns_clusters_cluster@问题对象Col'),
                            dataIndex: 'target',
                            key: 'target',
                            scopedSlots: { customRender: 'target' }
                        },
                        {
                            title: t('dns_clusters_cluster@问题描述Col'),
                            dataIndex: 'description',
                            key: 'description'
                        },
                        {
                            title: t('dns_clusters_cluster@操作Col'),
                            key: 'action',
                            width: '8em',
                            scopedSlots: { customRender: 'action' }
                        }
                    ]" :data-source="issues" row-key="id" :bordered="false" :pagination="false">
                    <template slot="target" slot-scope="{ text, record }">
                        <div v-if="record.type == 'cluster'">
                            {{t('dns_clusters_cluster@集群IssueType')}} "{{record.target}}" <link-icon
                                :href="'/clusters/cluster?clusterId=' + record.targetId"></link-icon>
                        </div>
                        <div v-if="record.type == 'node'">
                            {{t('dns_clusters_cluster@集群IssueType')}} "{{record.params.clusterName}}" {{t('dns_clusters_cluster@节点IssueType')}} "{{record.target}}" <link-icon
                                :href="'/clusters/cluster/node?clusterId=' + record.params.clusterId + '&nodeId=' + record.targetId"></link-icon>
                        </div>
                    </template>

                    <template slot="action" slot-scope="{ text, record }">
                        <div v-if="record.type == 'cluster'">
                            <link-red @click.prevent="updateCluster(record.targetId)">{{t('dns_clusters_cluster@修复Link')}}</link-red>
                        </div>
                        <div v-if="record.type == 'node'">
                            <link-red
                                @click.prevent="updateNode(record.params.clusterId, record.targetId)">{{t('dns_clusters_cluster@修复Link')}}</link-red>
                        </div>
                    </template>
                </b-table>
            </div>

        </div>

        <p class="comment">{{t('dns_clusters_cluster@DNS解析记录手动添加提示')}}</p>

        <!-- 节点DNS解析记录 -->
        <div class="config-section">
            <div class="section-title">
                <i class="icon sitemap"></i>
                {{t('dns_clusters_cluster@节点DNS解析记录')}} <span>&nbsp; ({{nodes.length}}{{t('dns_clusters_cluster@个')}})</span>
            </div>
            <div class="item-content" style="padding: 10px;">
                <b-empty v-if="nodes.length == 0">{{t('dns_clusters_cluster@暂时没有需要设置的DNS记录')}}</b-empty>

                <b-table v-if="nodes.length > 0" :columns="[
                        {
                            title: t('dns_clusters_cluster@节点Col'),
                            dataIndex: 'name',
                            key: 'name',
                            scopedSlots: { customRender: 'name' }
                        },
                        {
                            title: t('dns_clusters_cluster@子域名Col'),
                            dataIndex: 'dnsName',
                            key: 'dnsName',
                            scopedSlots: { customRender: 'dnsName' }
                        },
                        {
                            title: t('dns_clusters_cluster@记录类型Col'),
                            dataIndex: 'ipAddr1',
                            key: 'ipAddr1',
                            scopedSlots: { customRender: 'recordType' }
                        },
                        {
                            title: t('dns_clusters_cluster@记录值Col'),
                            dataIndex: 'ipAddr',
                            key: 'ipAddr',
                            scopedSlots: { customRender: 'ipAddr' }
                        },
                        {
                            title: t('dns_clusters_cluster@线路Col'),
                            dataIndex: 'route',
                            key: 'route',
                            scopedSlots: { customRender: 'route' }
                        },
                        {
                            title: t('dns_clusters_cluster@状态ColNode'), // Differentiated from other status columns
                            key: 'status',
                            scopedSlots: { customRender: 'status' }
                        },
                        {
                            title: t('dns_clusters_cluster@操作ColNode'), // Differentiated from other action columns
                            key: 'action',
                            width: '8em',
                            scopedSlots: { customRender: 'action' }
                        }
                    ]" :data-source="nodes" row-key="id" :bordered="false" :pagination="false">
                    <template slot="name" slot-scope="{ text, record }">
                        <link-icon
                            :href="'/clusters/cluster/node?clusterId=' + record.clusterId + '&nodeId=' + record.id">{{record.name}}</link-icon>
                    </template>

                    <template slot="dnsName" slot-scope="{ text, record }">
                        <span v-if="dnsInfo.dnsName.length > 0">{{dnsInfo.dnsName}}</span>
                        <link-red v-else @click.prevent="updateCluster(cluster.id)">{{t('dns_clusters_cluster@没有设置')}}</link-red>
                    </template>

                    <template slot="recordType" slot-scope="{ text, record }">
                        <span v-if="record.ipAddr.indexOf(':') > -1">AAAA</span>
                        <span v-else>A</span>
                    </template>

                    <template slot="ipAddr" slot-scope="{ text, record }">
                        <span v-if="record.ipAddr.length > 0">{{record.ipAddr}}</span>
                        <link-red :title="t('dns_clusters_cluster@点击设置Title')" v-else
                            @click.prevent="updateNode(record.clusterId, record.id, record.ipAddrId)">{{t('dns_clusters_cluster@没有设置')}}</link-red>
                    </template>

                    <template slot="route" slot-scope="{ text, record }">
                        <span v-if="record.route.code.length > 0">{{record.route.name}}</span>
                        <link-red v-else :title="t('dns_clusters_cluster@点击设置Title')"
                            @click.prevent="updateNode(record.clusterId, record.id, record.ipAddrId)">{{t('dns_clusters_cluster@没有设置')}}</link-red>
                    </template>

                    <template slot="status" slot-scope="{ text, record }">
                        <span v-if="record.isBackup" class="red">{{t('dns_clusters_cluster@备用节点')}}</span>
                        <span v-else-if="record.isOffline" class="red">{{t('dns_clusters_cluster@已下线')}}</span>
                        <div v-else="">
                            <span v-if="record.isInstalled">
                                <span class="green" v-if="record.isResolved">{{t('dns_clusters_cluster@已解析')}}</span>
                                <span v-else class="red">{{t('dns_clusters_cluster@未解析')}}</span>
                            </span>
                            <link-red
                                :href="'/clusters/cluster/node/install?clusterId=' + cluster.id + '&nodeId=' + record.id"
                                v-if="!record.isInstalled" :title="t('dns_clusters_cluster@节点未安装Title')">
                                <span class="red">{{t('dns_clusters_cluster@未安装')}}</span>
                            </link-red>
                        </div>
                    </template>

                    <template slot="action" slot-scope="{ text, record }">
                        <link-popup
                            @click.prevent="updateNode(record.clusterId, record.id, record.ipAddrId)">{{t('dns_clusters_cluster@修改LinkNode')}}</link-popup>
                    </template>
                </b-table>
            </div>

        </div>

        <!-- 网站解析记录 -->
        <div class="config-section">
            <div class="section-title">
                <i class="icon globe"></i>
                {{t('dns_clusters_cluster@网站解析记录')}} <span>&nbsp; ({{servers.length}}{{t('dns_clusters_cluster@个')}})</span>
            </div>
            <div class="item-content" style="padding: 10px;">
                <b-empty v-if="servers.length == 0">{{t('dns_clusters_cluster@暂时没有需要设置的DNS记录')}}</b-empty>

                <b-table v-if="servers.length > 0" :columns="[
                        {
                            title: t('dns_clusters_cluster@网站Col'),
                            dataIndex: 'name',
                            key: 'name',
                            scopedSlots: { customRender: 'name' }
                        },
                        {
                            title: t('dns_clusters_cluster@子域名ColServer'), // Differentiated
                            dataIndex: 'dnsName',
                            key: 'dnsName'
                        },
                        {
                            title: t('dns_clusters_cluster@记录类型ColServer'), // Differentiated
                            dataIndex: 'type',
                            key: 'type',
                            customRender: () => 'CNAME'
                        },
                        {
                            title: t('dns_clusters_cluster@记录值ColServer'), // Differentiated
                            dataIndex: 'value',
                            key: 'value',
                            scopedSlots: { customRender: 'value' }
                        },
                        {
                            title: t('dns_clusters_cluster@状态ColServer'), // Differentiated
                            key: 'status',
                            scopedSlots: { customRender: 'status' }
                        }
                    ]" :data-source="servers" row-key="id" :bordered="false" :pagination="false">
                    <template slot="name" slot-scope="{ text, record }">
                        <link-icon :href="'/servers/server?serverId=' + record.id">{{record.name}}</link-icon>
                    </template>

                    <template slot="value" slot-scope="{ text, record }">
                        <span
                            v-if="dnsInfo.domainName.length > 0"><var>{{dnsInfo.dnsName}}</var>.{{dnsInfo.domainName}}.</span>
                        <link-red :title="t('dns_clusters_cluster@点击设置Title')" v-else @click.prevent="updateCluster(cluster.id)">{{t('dns_clusters_cluster@没有设置')}}</link-red>
                    </template>

                    <template slot="status" slot-scope="{ text, record }">
                        <span class="green" v-if="record.isResolved">{{t('dns_clusters_cluster@已解析')}}</span>
                        <span v-else class="red">{{t('dns_clusters_cluster@未解析')}}</span>
                    </template>
                </b-table>
            </div>

        </div>
    </div>
</div>