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

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

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

        <div v-show="!http3Policy.isOn">
            <div class="margin"></div>
            <p class="ui message">{{t('clusters_cluster_settings_http3_test@尚未启用HTTP3')}}</p>
        </div>

        <div v-show="http3Policy.isOn">
            <div class="margin"></div>
            <form class="ui form" data-tea-action="$" data-tea-before="before" data-tea-done="done" data-tea-success="success" data-tea-timeout="1800">
            <input type="hidden" name="clusterId" :value="clusterId"/>
            <input type="hidden" name="port" :value="http3Policy.port"/>
            <div class="config-section">
                <div class="section-title">{{t('clusters_cluster_settings_http3_test@HTTP3功能测试')}}</div>
                <div class="config-item">
                    <div class="item-label">{{t('clusters_cluster_settings_http3_test@测试网址')}} *</div>
                    <div class="item-content">
                         <input type="text" name="url" ref="focus" placeholder="https://..."/>
                        <p class="comment">{{t('clusters_cluster_settings_http3_test@测试网址提示_1')}}<strong>{{t('clusters_cluster_settings_http3_test@测试网址提示_strong')}}</strong>{{t('clusters_cluster_settings_http3_test@测试网址提示_2')}}</p>
                    </div>
                </div>
            </div>

            <submit-btn v-if="!isRequesting">{{t('clusters_cluster_settings_http3_test@开始测试')}}</submit-btn>
            <button class="ui button disabled" type="button" v-if="isRequesting">{{t('clusters_cluster_settings_http3_test@测试中请耐心等待')}}</button>
            </form>

            <!-- 测试结果 -->
            <div v-if="isTested" style="margin-top: 2em;">
                <b-settings-header
                    style="font-size: 0.8em"
                    @action="resetResults"
                    :action-text="t('clusters_cluster_settings_http3_test@清除')"
                >
                    {{t('clusters_cluster_settings_http3_test@测试结果')}}
                </b-settings-header>
                <b-empty v-if="results.length == 0">{{t('clusters_cluster_settings_http3_test@暂时还没有任何可以测试的节点')}}</b-empty>
                <div v-if="results.length > 0">
                    <b-table
                        :columns="[
                            { title: t('clusters_cluster_settings_http3_test@节点'), key: 'node', width: '18em', scopedSlots: { customRender: 'nodeSlot' } },
                            { title: t('clusters_cluster_settings_http3_test@IP'), dataIndex: 'ip', key: 'ip', width: '18em' },
                            { title: t('clusters_cluster_settings_http3_test@测试结果'), key: 'result', scopedSlots: { customRender: 'resultSlot' } }
                        ]"
                        :data-source="results"
                        :row-key="'nodeId'"
                        :pagination="false"
                        style="width: 50em; margin-top: 0.5em"
                    >
                         <template slot="nodeSlot" slot-scope="{ text, record }">
                             {{record.nodeName}} <link-icon :href="'/clusters/cluster/node?clusterId=' + clusterId + '&nodeId=' + record.nodeId"></link-icon>
                         </template>
                        <template slot="resultSlot" slot-scope="{ text, record }">
                             <Tag v-if="record.isOk" color="green">{{t('clusters_cluster_settings_http3_test@成功')}}</Tag>
                             <span v-else>
                                 <Tag color="red">{{t('clusters_cluster_settings_http3_test@失败')}} <tip-icon :content="record.error"></tip-icon></Tag>
                             </span>
                        </template>
                    </b-table>
                </div>
            </div>
        </div>
    </div>
</div>