{$layout}
{$template "../menu"}
{$template "/left_menu_with_menu"}

<div class="left-right-box-container">

    <div class="right-box">
        {$template "menu"}

        <!-- 基本信息 - 使用 div 布局 -->
        <div class="config-section">
            <div class="section-title">{{t('dns_records@基本信息')}}</div>
            <div class="config-item">
                <div class="item-label">{{t('dns_records@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_records@没有设置')}}</span>
                </div>
            </div>
            <div class="config-item">
                <div class="item-label">{{t('dns_records@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_records@请先设置域名')}}</span>
                    <span v-else class="disabled">{{t('dns_records@没有设置')}}</span>
                </div>
            </div>
            <div class="config-item">
                <div class="item-label">{{t('dns_records@自动设置CNAME记录')}}</div>
                <div class="item-content">
                    <b-empty v-if="dnsInfo.cnameRecords.length == 0">{{t('dns_records@暂时还没有设置')}}</b-empty>
                    <div v-else>
                        <span v-for="record in dnsInfo.cnameRecords" class="ui label basic small">{{record}}</span>
                    </div>
                </div>
            </div>
            <div class="config-item" v-if="dnsInfo.domainName.length > 0">
                <div class="item-label">{{t('dns_records@操作')}}</div>
                <div class="item-content">
                    <div v-if="!isSyncing">
                        <link-red v-if="dnsHasChanges" @click.prevent="syncCluster(cluster.id)">{{t('dns_records@检测到解析记录有变化需要同步')}}</link-red>
                        <a href="" @click.prevent="syncCluster(cluster.id)" v-else>{{t('dns_records@DNS服务商同步')}}</a>
                    </div>
                    <span v-else>{{t('dns_records@DNS服务商同步中')}}</span>
                </div>
            </div>
        </div>

        <!-- 当前任务 -->
        <div class="config-section" v-if="tasks.length > 0">
            <div class="section-title">{{t('dns_records@正在执行的任务')}}</div>
            <div style="padding: 1em;">
                <b-table
                    :columns="[
                        { title: t('dns_records@对象'), key: 'target', scopedSlots: { customRender: 'targetSlot' } },
                        { title: t('dns_records@任务'), key: 'taskType', width: '180px', scopedSlots: { customRender: 'taskTypeSlot' } },
                        { title: t('dns_records@状态'), key: 'status', width: '120px', scopedSlots: { customRender: 'statusSlot' } },
                        { title: t('dns_records@触发时间'), dataIndex: 'updatedTime', key: 'time', width: '150px' },
                        { title: t('dns_records@操作'), key: 'action', width: '200px', align: 'center', scopedSlots: { customRender: 'actionSlot' } }
                    ]"
                    :data-source="tasks"
                    :row-key="'id'"
                    :pagination="false"
                    style="margin: 0;"
                >
                    <template slot="targetSlot" 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="taskTypeSlot" slot-scope="{ text, record }">
                        <span v-if="record.type == 'clusterChange' || record.type == 'clusterNodesChange'">{{t('dns_records@集群')}}</span>
                        <span v-if="record.type == 'nodeChange'">{{t('dns_records@节点')}}</span>
                        <span v-if="record.type == 'serverChange'">{{t('dns_records@网站')}}</span>
                        <span v-if="record.type == 'domainChange'">{{t('dns_records@域名')}}</span>
                    </template>
                    <template slot="statusSlot" slot-scope="{ text, record }">
                         <span v-if="record.isDone" class="red">{{record.error}}</span>
                         <span v-else>{{t('dns_records@正在同步')}}</span>
                    </template>
                     <template slot="actionSlot" slot-scope="{ text, record }">
                         <a-button type="link" danger icon="delete" :title="t('dns_records@删除')" @click.prevent="deleteTask(record.id)"></a-button>
                     </template>
                </b-table>
            </div>
        </div>

        <!-- 问题合集 -->
        <div class="config-section" v-if="issues.length > 0">
            <div class="section-title">{{t('dns_records@需要修复的问题')}}</div>
            <div style="padding: 1em;">
                <b-table
                    :columns="[
                        { title: t('dns_records@问题对象'), key: 'target', scopedSlots: { customRender: 'issueTargetSlot', width: '200px' } },
                        { title: t('dns_records@问题描述'), dataIndex: 'description', key: 'description' },
                        { title: t('dns_records@操作'), key: 'action', width: '150px', scopedSlots: { customRender: 'issueActionSlot' } }
                    ]"
                    :data-source="issues"
                    :row-key="(record, index) => index"
                    :pagination="false"
                    style="margin: 0;"
                >
                    <template slot="issueTargetSlot" slot-scope="{ text, record }">
                         <div v-if="record.type == 'cluster'">
                            {{t('dns_records@集群_1')}} "{{record.target}}" <link-icon :href="'/clusters/cluster?clusterId=' + record.targetId"></link-icon>
                        </div>
                        <div v-if="record.type == 'node'">
                            {{t('dns_records@集群_2')}} "{{record.params.clusterName}}" {{t('dns_records@节点_1')}} "{{record.target}}" <link-icon :href="'/clusters/cluster/node?clusterId=' + record.params.clusterId + '&nodeId=' + record.targetId"></link-icon>
                        </div>
                    </template>
                     <template slot="issueActionSlot" slot-scope="{ text, record }">
                         <div v-if="record.type == 'cluster'">
                            <a-button type="link" @click.prevent="updateCluster(record.targetId)">{{t('dns_records@修复')}}</a-button>
                         </div>
                         <div v-if="record.type == 'node'">
                             <a-button type="link" @click.prevent="updateNode(record.params.clusterId, record.targetId)">{{t('dns_records@修复')}}</a-button>
                         </div>
                     </template>
                </b-table>
                <div class="margin"></div>
            </div>
        </div>

        <div class="config-section">
            <div class="section-title">{{t('dns_records@解析记录')}}</div>
            <div style="padding: 1em;">
                <p class="comment" style="padding: 0;">{{t('dns_records@下面的DNS解析记录也可以手工在DNS服务商提供的管理平台添加')}}</p>

                <!-- 节点DNS解析记录 -->
                <h3 style="padding: 0; margin-top: 1em;font-size: 1.2em;">{{t('dns_records@节点DNS解析记录')}} <span>&nbsp; ({{nodes.length}}{{t('dns_records@个')}})</span></h3>
                <p class="comment" v-if="nodes.length == 0" style="padding: 0;">{{t('dns_records@暂时没有需要设置的DNS记录')}}</p>
                <b-table
                    v-if="nodes.length > 0"
                    :columns="[
                        { title: t('dns_records@节点'), key: 'node', scopedSlots: { customRender: 'nodeSlot' } },
                        { title: t('dns_records@子域名'), key: 'subdomain', scopedSlots: { customRender: 'subdomainSlot' } },
                        { title: t('dns_records@记录类型'), key: 'recordType', width: '100px', scopedSlots: { customRender: 'recordTypeSlot' } },
                        { title: t('dns_records@记录值'), key: 'value', scopedSlots: { customRender: 'valueSlot' } },
                        { title: t('dns_records@线路'), key: 'route', scopedSlots: { customRender: 'routeSlot' } },
                        { title: t('dns_records@状态'), key: 'status', width: '100px', scopedSlots: { customRender: 'nodeStatusSlot' } },
                        { title: t('dns_records@操作'), key: 'action', width: '180px', scopedSlots: { customRender: 'nodeActionSlot' } }
                    ]"
                    :data-source="nodes"
                    :row-key="'id'"
                    :pagination="false"
                    style="margin-top: 0.5em;"
                >
                    <template slot="nodeSlot" slot-scope="{ text, record }">
                        <link-icon :href="'/clusters/cluster/node?clusterId=' + record.clusterId + '&nodeId=' + record.id">{{record.name}}</link-icon>
                    </template>
                    <template slot="subdomainSlot" slot-scope="{ text, record }">
                        <span v-if="dnsInfo.dnsName.length > 0">{{dnsInfo.dnsName}}</span>
                        <a-button v-else type="link" @click.prevent="updateCluster(cluster.id)">{{t('dns_records@没有设置')}}</a-button>
                    </template>
                    <template slot="recordTypeSlot" slot-scope="{ text, record }">
                        <span v-if="record.ipAddr.indexOf(':') > -1">AAAA</span>
                        <span v-else>A</span>
                    </template>
                     <template slot="valueSlot" slot-scope="{ text, record }">
                         <span v-if="record.ipAddr.length > 0">{{record.ipAddr}}</span>
                         <a-button v-else type="link" @click.prevent="updateNode(record.clusterId, record.id, record.ipAddrId)">{{t('dns_records@没有设置')}}</a-button>
                     </template>
                     <template slot="routeSlot" slot-scope="{ text, record }">
                         <span v-if="record.route.code.length > 0">{{record.route.name}}</span>
                         <a-button v-else type="link" @click.prevent="updateNode(record.clusterId, record.id, record.ipAddrId)">{{t('dns_records@没有设置')}}</a-button>
                     </template>
                    <template slot="nodeStatusSlot" slot-scope="{ text, record }">
                         <Tag v-if="record.isBackup" color="orange">{{t('dns_records@备用节点')}}</Tag>
                         <Tag v-else-if="record.isOffline" color="red">{{t('dns_records@已下线')}}</Tag>
                         <div v-else>
                            <span v-if="record.isInstalled">
                                <Tag v-if="record.isResolved" color="green">{{t('dns_records@已解析')}}</Tag>
                                <Tag v-else color="red">{{t('dns_records@未解析')}}</Tag>
                            </span>
                             <a-button v-if="!record.isInstalled" type="link" :href="'/clusters/cluster/node/install?clusterId=' + cluster.id + '&nodeId=' + record.id" :title="t('dns_records@节点未安装')"><Tag color="red">{{t('dns_records@未安装')}}</Tag></a-button>
                        </div>
                    </template>
                     <template slot="nodeActionSlot" slot-scope="{ text, record }">
                         <a-button type="link" @click.prevent="updateNode(record.clusterId, record.id, record.ipAddrId)">{{t('dns_records@修改')}}</a-button>
                     </template>
                </b-table>

                <!-- 网站解析记录 -->
                <h3 style="padding: 0; margin-top: 1.5em;font-size: 1.2em;">{{t('dns_records@网站解析记录')}} <span>&nbsp; ({{servers.length}}{{t('dns_records@个')}})</span></h3>
                <p class="comment" v-if="servers.length == 0" style="padding: 0;">{{t('dns_records@暂时没有需要设置的DNS记录')}}</p>
                <b-table
                    v-if="servers.length > 0"
                    :columns="[
                        { title: t('dns_records@网站'), key: 'server', scopedSlots: { customRender: 'serverSlot' } },
                        { title: t('dns_records@子域名'), dataIndex: 'dnsName', key: 'subdomain' },
                        { title: t('dns_records@记录类型'), key: 'recordType', width: '100px' },
                        { title: t('dns_records@记录值'), key: 'value', scopedSlots: { customRender: 'serverValueSlot' } },
                        { title: t('dns_records@状态'), key: 'status', width: '150px', scopedSlots: { customRender: 'serverStatusSlot' } }
                    ]"
                    :data-source="servers"
                    :row-key="'id'"
                    :pagination="false"
                    style="margin-top: 0.5em;"
                >
                     <template slot="serverSlot" slot-scope="{ text, record }">
                         <link-icon :href="'/servers/server?serverId=' + record.id">{{record.name}}</link-icon>
                     </template>
                    <template slot="recordTypeSlot" slot-scope="{ text, record }">
                        CNAME
                    </template>
                    <template slot="serverValueSlot" slot-scope="{ text, record }">
                         <span v-if="dnsInfo.domainName.length > 0"><var>{{dnsInfo.dnsName}}</var>.{{dnsInfo.domainName}}.</span>
                         <a-button v-else type="link" @click.prevent="updateCluster(cluster.id)">{{t('dns_records@没有设置')}}</a-button>
                    </template>
                     <template slot="serverStatusSlot" slot-scope="{ text, record }">
                         <Tag v-if="record.isResolved" color="green">{{t('dns_records@已解析')}}</Tag>
                         <Tag v-else color="red">{{t('dns_records@未解析')}}</Tag>
                     </template>
                </b-table>
            </div>
        </div>
    </div>
</div>