{$layout}

<div class="config-section">
    <div class="section-title">
        <i class="icon compass outline"></i>
        {{t('ns_test_index@DNS解析测试')}}
    </div>

    <form class="ui form" data-tea-action="$" data-tea-timeout="30" data-tea-before="before" data-tea-success="success" data-tea-done="done">
        <div class="config-item">
            <div class="item-label">{{t('ns_test_index@集群*')}}</div>
            <div class="item-content">
                <b-select
                    name="clusterId"
                    v-model="clusterId"
                    @change="changeCluster"
                    auto-width
                    :options="[
                        ...clusters.map(cluster => ({
                            label: cluster.name,
                            value: cluster.id,
                        }))
                    ]"
                ></b-select>
                <p class="comment">{{t('ns_test_index@这里只列出有节点的集群')}}</p>
            </div>
        </div>

        <div class="config-item" v-if="clusterId > 0">
            <div class="item-label">{{t('ns_test_index@节点*')}}</div>
            <div class="item-content">
                <div class="ui fields inline">
                     <div class="ui field">
                         <b-select
                            name="nodeId"
                            v-model="nodeId"
                            @change="changeNode"
                            auto-width
                            :options="[
                                ...nodes.map(node => ({
                                    label: node.name,
                                    value: node.id,
                                }))
                            ]"
                        ></b-select>
                    </div>
                    <div class="ui field" v-if="selectedNode != null">
                        <label>{{t('ns_test_index@节点IPLabel')}}</label>
                        <b-select
                            name="ip"
                            v-model="ip"
                            auto-width
                            :options="[
                                ...selectedNode.addrs.map(ip => ({
                                    label: ip,
                                    value: ip,
                                }))
                            ]"
                        ></b-select>
                    </div>
                    <div class="ui field">
                        <label>{{t('ns_test_index@端口Label')}}</label>
                         <b-select
                            name="port"
                            v-model="port"
                            :options="[
                                ...ports.map(portConfig => ({
                                    label: (portConfig.port??'') + '/' + (portConfig.protocol??''),
                                    value: (portConfig.port??'') + '/' + (portConfig.protocol??''),
                                }))
                            ]"
                        ></b-select>
                    </div>
                </div>
            </div>
        </div>

        <div class="config-item">
            <div class="item-label">{{t('ns_test_index@域名*')}}</div>
            <div class="item-content">
                <div class="ui fields inline">
                     <div class="ui field">
                        <input type="text" name="domain" maxlength="200" ref="focus" :placeholder="t('ns_test_index@exampleCom')" v-model="domain" @input="changeDomain"/>
                     </div>
                     <div class="ui field">
                         <b-select
                            name="type"
                            v-model="type"
                            auto-width
                            :options="[
                                ...recordTypes.map(type => ({
                                    label: type.type,
                                    value: type.type,
                                }))
                            ]"
                        ></b-select>
                     </div>
                </div>
                 <p class="comment">{{t('ns_test_index@要解析的域名和记录类型')}}</p>
            </div>
        </div>

         <div class="config-item">
            <div class="item-label">{{t('ns_test_index@模拟客户端IP')}}</div>
            <div class="item-content">
                <input type="text" name="clientIP" maxlength="128" :placeholder="t('ns_test_index@xxxClientIPPlaceholder')"/>
                <p class="comment">{{t('ns_test_index@可选项用来模拟客户端IP')}}</p>
            </div>
        </div>

        <div class="config-item">
             <div class="item-label">{{t('ns_test_index@解析结果')}}</div>
             <div class="item-content">
                <div v-if="result != null">
                    <div v-if="result.domain == null">
                        <span class="red">{{t('ns_test_index@主域名不存在或未通过验证')}}</span>
                    </div>
                    <div v-if="result.domain != null">
                        <span class="red" v-if="!result.isOk">{{result.err}}</span>
                        <div class="reasons" v-if="result.isNetErr">
                            {{t('ns_test_index@可能的原因有')}}
                            <ul>
                                <li>{{t('ns_test_index@DNS节点IP填写错误')}}</li>
                                <li>{{t('ns_test_index@DNS节点没有启动')}}</li>
                                <li>{{t('ns_test_index@DNS节点Port端口没有加入到节点防火墙规则或者其他安全策略中', { port: port })}}</li>
                                <li>{{t('ns_test_index@DNS节点IP地址填写错误')}}</li>
                                <li>{{t('ns_test_index@DNS节点和API节点之间的网络状况不佳')}}</li>
                                <li>{{t('ns_test_index@其他原因')}}</li>
                            </ul>
                        </div>

                        <div v-if="result.isOk">
                            <pre class="pre-box"><span class="green">{{result.result}}</span></pre>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="config-item">
            <div class="item-label"></div>
            <div class="item-content">
                <submit-btn v-if="!isDoing">{{t('ns_test_index@开始解析')}}</submit-btn>
                <button class="ui button disabled" type="button" v-if="isDoing">{{t('ns_test_index@解析中')}}</button>
            </div>
        </div>
    </form>
</div>