{$layout}

<form class="ui form" data-tea-action="$" data-tea-timeout="30" data-tea-before="before" data-tea-success="success" data-tea-done="done">
    <table class="ui table definition selectable">
        <tr>
            <td class="title">集群 *</td>
            <td>
                <b-select
                    name="clusterId"
                    v-model="clusterId"
                    @change="changeCluster"
                    auto-width
                    :options="[
                        ...clusters.map(cluster => ({
                            label: cluster.name,
                            value: cluster.id,
                        }))
                    ]"
                ></b-select>

                <!-- <select class="ui dropdown auto-width" name="clusterId" v-model="clusterId" @change="changeCluster">
                    <option v-for="cluster in clusters" :value="cluster.id">{{cluster.name}}</option>
                </select> -->
                <p class="comment">这里只列出有节点的集群。</p>
            </td>
        </tr>
        <tr v-if="clusterId > 0">
            <td>节点 *</td>
            <td>
                <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>

                        <!-- <select class="ui dropdown auto-width" name="nodeId" v-model="nodeId" @change="changeNode">
                            <option v-for="node in nodes" :value="node.id">{{node.name}}</option>
                        </select> -->
                    </div>
                    <div class="ui field" v-if="selectedNode != null">
                        &nbsp; &nbsp; 节点IP：
                    </div>
                    <div class="ui field" v-if="selectedNode != null">
                        <b-select
                            name="ip"
                            v-model="ip"
                            auto-width
                            :options="[
                                ...selectedNode.addrs.map(ip => ({
                                    label: ip,
                                    value: ip,
                                }))
                            ]"
                        ></b-select>

                        <!-- <select class="ui dropdown auto-width" name="ip">
                            <option v-for="ip in selectedNode.addrs" :value="ip">{{ip}}</option>
                        </select> -->
                    </div>
                    <div class="ui field">
                        &nbsp; &nbsp;端口：
                    </div>
                    <div class="ui field">
                        <b-select
                            name="port"
                            v-model="port"
                            :options="[
                                ...ports.map(portConfig => ({
                                    label: (portConfig.port??'') + '/' + (portConfig.protocol??''),
                                    value: (portConfig.port??'') + '/' + (portConfig.protocol??''),
                                }))
                            ]"
                        ></b-select>

                        <!-- <select class="ui dropdown" name="port" v-model="port">
                            <option v-for="portConfig in ports" :value="portConfig.port + '/' + portConfig.protocol">{{portConfig.port}}/{{portConfig.protocol}}</option>
                        </select> -->
                    </div>
                </div>
            </td>
        </tr>
        <tr>
            <td class="title">域名 *</td>
            <td>
                <div class="ui fields inline">
                    <div class="ui field">
                        <input type="text" name="domain" size="60" maxlength="200" ref="focus" placeholder="example.com" 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>

                        <!-- <select class="ui dropdown auto-width" name="type">
                            <option v-for="type in recordTypes" :value="type.type">{{type.type}}</option>
                        </select> -->
                    </div>
                </div>

                <p class="comment">要解析的域名和记录类型。</p>
            </td>
        </tr>
        <tr>
            <td>模拟客户端IP</td>
            <td>
                <input type="text" name="clientIP" style="width: 12em" maxlength="128" placeholder="x.x.x.x"/>
                <p class="comment">可选项，用来模拟客户端IP。</p>
            </td>
        </tr>
        <tr>
            <td>解析结果</td>
            <td>
                <div v-if="result != null">
                    <div v-if="result.domain == null">
                        <span class="red">主域名不存在或未通过验证。</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">
                            可能的原因有：
                            <ul>
                                <li>1. DNS节点IP填写错误；</li>
                                <li>2. DNS节点没有启动；</li>
                                <li>3. DNS节点{{port}}端口没有加入到节点防火墙规则或者其他安全策略中：</li>
                                <li>4. DNS节点IP地址填写错误；</li>
                                <li>5. DNS节点和API节点之间的网络状况不佳；</li>
                                <li>6. 其他原因。</li>
                            </ul>
                        </div>

                        <div v-if="result.isOk">
                            <pre class="pre-box"><span class="green">{{result.result}}</span></pre>
                        </div>
                    </div>
                </div>
            </td>
        </tr>
    </table>
    <submit-btn v-if="!isDoing">开始解析</submit-btn>
    <button class="ui button disabled" type="button" v-if="isDoing">解析中...</button>
</form>