{$layout}

<div class="ui margin"></div>

<div>
    <div class="ui grid stackable">
        <!-- Left: 解析测试 -->
        <div class="six wide column">
            <div class="ui segment">
                <h4 class="ui header" style="margin-top:0;">解析测试</h4>
                <div class="ui form">
                    <div class="field">
                        <label>目标应用 *</label>
                        <select class="ui dropdown" name="appId" v-model="request.appId" @change="onAppChanged">
                            <option value="">[请选择应用]</option>
                            <option v-for="app in apps" :value="app.appId">{{app.name}} ({{app.appId}})</option>
                        </select>
                    </div>
                    <div class="field">
                        <label>所属集群 *</label>
                        <select class="ui dropdown" name="clusterId" v-model="request.clusterId">
                            <option value="">[请选择所属集群]</option>
                            <option v-for="cluster in clusters" :value="String(cluster.id)">{{cluster.name}}</option>
                        </select>
                    </div>
                    <div class="field">
                        <label>解析域名 *</label>
                        <select class="ui dropdown" name="domain" v-model="request.domain">
                            <option value="">[请选择域名]</option>
                            <option v-for="domain in currentDomains" :value="domain">{{domain}}</option>
                        </select>
                    </div>
                    <div class="field">
                        <label>模拟客户端 IP</label>
                        <input type="text" v-model="request.clientIp" placeholder="留空使用当前 IP" />
                        <p class="comment">用于测试 ECS 掩码与区域调度效果。</p>
                    </div>
                    <div class="field">
                        <label>解析类型</label>
                        <div class="ui buttons mini">
                            <button class="ui button" :class="{primary: request.qtype=='A'}"
                                @click.prevent="request.qtype='A'" type="button">A</button>
                            <button class="ui button" :class="{primary: request.qtype=='AAAA'}"
                                @click.prevent="request.qtype='AAAA'" type="button">AAAA</button>
                        </div>
                    </div>

                    <div class="ui divider"></div>

                    <button class="ui button primary" type="button" @click.prevent="sendTestRequest"
                        :class="{loading: isRequesting, disabled: isRequesting}">
                        <i class="icon search"></i> 在线解析
                    </button>
                    <button class="ui button basic" type="button" @click.prevent="resetForm">重置</button>
                </div>
            </div>
        </div>

        <!-- Right: 解析结果 -->
        <div class="ten wide column">
            <!-- Empty state -->
            <div v-show="!response.hasResult && !isRequesting" class="ui segment placeholder">
                <p class="grey" style="text-align:center;">请在左侧配置参数后点击「在线解析」。</p>
            </div>

            <!-- Loading -->
            <div v-show="isRequesting" class="ui segment" style="min-height:200px;">
                <div class="ui active dimmer">
                    <div class="ui text loader">解析中...</div>
                </div>
            </div>

            <!-- Result -->
            <div v-show="response.hasResult && !isRequesting">
                <!-- Status banner -->
                <div class="ui message small" :class="{positive: response.code === 0, negative: response.code !== 0}">
                    <div class="header">
                        <span v-if="response.code === 0"><i class="icon check circle"></i> 解析成功</span>
                        <span v-else><i class="icon times circle"></i> 解析失败 ({{response.code}})</span>
                    </div>
                    <p v-if="response.code !== 0">{{response.message}}</p>
                    <p class="grey small" style="margin-top:.3em;">Request ID: <code>{{response.requestId}}</code></p>
                </div>

                <!-- Result details -->
                <div v-if="response.code === 0 && response.data" style="margin-top: 1em;">
                    <h5 class="ui header">解析结果</h5>
                    <div class="ui segment" style="margin-top:.4em;">
                        <div style="font-weight: 600; margin-bottom: .5em;">请求URL</div>
                        <div style="word-break: break-all;">
                            <code>{{response.data.request_url || '-'}}</code>
                        </div>
                    </div>

                    <h5 class="ui header" style="margin-top:1.2em;">解析结果详情</h5>
                    <div class="ui three column stackable grid" style="margin-top:0;">
                        <div class="column">
                            <div class="ui segment">
                                <div class="grey">客户端 IP</div>
                                <div style="margin-top:.4em;">
                                    <code>{{response.data.client_ip || request.clientIp || '-'}}</code></div>
                            </div>
                        </div>
                        <div class="column">
                            <div class="ui segment">
                                <div class="grey">地区</div>
                                <div style="margin-top:.4em;">{{response.data.client_region || '-'}}</div>
                            </div>
                        </div>
                        <div class="column">
                            <div class="ui segment">
                                <div class="grey">线路</div>
                                <div style="margin-top:.4em;">{{response.data.line_name || '-'}}</div>
                            </div>
                        </div>
                    </div>

                    <!-- IP results table -->
                    <h5 class="ui header" style="margin-top:1.2em;">解析记录</h5>
                    <table class="ui table celled compact">
                        <thead>
                            <tr>
                                <th>解析域名</th>
                                <th>解析类型</th>
                                <th>IP地址</th>
                                <th>TTL</th>
                                <th>地区</th>
                                <th>线路</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr v-for="(row, idx) in response.resultRows">
                                <td v-if="idx === 0" :rowspan="response.resultRows.length">{{row.domain ||
                                    request.domain}}</td>
                                <td>{{row.type || request.qtype}}</td>
                                <td><code>{{row.ip}}</code></td>
                                <td>{{row.ttl}}s</td>
                                <td>{{row.region || '-'}}</td>
                                <td>{{row.line || '-'}}</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>