{$layout}
{$template "menu"}

<style>
.httpdns-mini-action {
    display: inline-block;
    font-size: 12px;
    color: #6b7280;
    margin-left: .55em;
    line-height: 1.6;
}
.httpdns-mini-action:hover {
    color: #1e70bf;
}
.httpdns-mini-action .icon {
    margin-right: 0 !important;
    font-size: .92em !important;
}
</style>

<div>
    <div class="ui form" style="margin-bottom: 1.5em;">
        <div class="ui fields inline">
            <div class="field">
                <label style="font-weight: 600;">目标应用</label>
            </div>
            <div class="field">
                <select class="ui dropdown auto-width" v-model="selectedAppId" @change="onAppChange">
                    <option value="">[请选择应用]</option>
                    <option v-for="app in apps" :value="app.appId">{{app.name}} ({{app.appId}})</option>
                </select>
            </div>
        </div>
    </div>

    <div v-show="selectedAppId.length == 0" class="ui segment center aligned" style="padding:4em 1em; color:#999;">
        <i class="icon cogs" style="font-size:3em;"></i>
        <p style="margin-top:1em; font-size:1.1em;">请先选择应用，然后查看配置并完成 SDK 接入。</p>
    </div>

    <div v-show="selectedAppId.length > 0">
        <div class="ui two steps mini" style="margin-bottom: 0;">
            <a class="step" :class="{active: currentStep == 1}" @click.prevent="currentStep=1">
                <i class="icon file alternate outline"></i>
                <div class="content">
                    <div class="title">01 查看配置</div>
                    <div class="description">查看 SDK 初始化参数</div>
                </div>
            </a>
            <a class="step" :class="{active: currentStep == 2}" @click.prevent="currentStep=2">
                <i class="icon code"></i>
                <div class="content">
                    <div class="title">02 开发接入</div>
                    <div class="description">下载 SDK 并集成项目</div>
                </div>
            </a>
        </div>

        <div class="ui segment" v-show="currentStep == 1"
            style="border-top:none; margin-top:0; border-top-left-radius:0; border-top-right-radius:0;">
            <h4 class="ui header">查看配置</h4>
            <table class="ui table definition">
                <tr>
                    <td class="four wide">App ID</td>
                    <td>
                        <code>{{selectedApp.appId}}</code>
                        <a href="" class="httpdns-mini-action" title="复制 App ID" @click.prevent="copyText(selectedApp.appId, 'App ID')"><i class="copy outline icon"></i></a>
                    </td>
                </tr>
                <tr>
                    <td>应用名称</td>
                    <td><strong>{{selectedApp.name}}</strong></td>
                </tr>
                <tr>
                    <td>集群服务地址</td>
                    <td>
                        <code>{{selectedApp.gatewayDomainDisplay}}</code>
                        <a href="" class="httpdns-mini-action" title="复制服务地址" @click.prevent="copyText(selectedApp.gatewayDomainDisplay, '服务地址')"><i class="copy outline icon"></i></a>
                        <p class="comment" v-if="selectedApp.gatewayDomains && selectedApp.gatewayDomains.length > 1">已启用主备：第一个为主集群，后续为备集群。</p>
                    </td>
                </tr>
                <tr>
                    <td>加签 Secret</td>
                    <td>
                        <code>{{signSecretVisible ? selectedApp.signSecret : selectedApp.signSecretMasked}}</code>
                        <a href="" class="httpdns-mini-action" @click.prevent="signSecretVisible = !signSecretVisible" :title="signSecretVisible ? '隐藏明文' : '查看明文'"><i class="icon" :class="signSecretVisible ? 'eye slash' : 'eye'"></i></a>
                        <a href="" class="httpdns-mini-action" title="复制加签 Secret" @click.prevent="copyText(selectedApp.signSecret, '加签 Secret')"><i class="copy outline icon"></i></a>
                    </td>
                </tr>
                <tr>
                    <td>请求验签</td>
                    <td>
                        <span class="green" v-if="selectedApp.signEnabled">已开启</span>
                        <span class="grey" v-else>已关闭</span>
                    </td>
                </tr>
            </table>
            <a href="" class="ui button small" @click.prevent="currentStep=2">
                下一步 <i class="icon arrow right"></i>
            </a>
        </div>

        <div class="ui segment" v-show="currentStep == 2"
            style="border-top:none; margin-top:0; border-top-left-radius:0; border-top-right-radius:0;">
            <h4 class="ui header">开发接入</h4>
            <p class="grey">选择对应平台 SDK 下载并查阅集成文档。</p>

            <div class="ui three cards" style="margin-top: 1.5em;">
                <div class="card">
                    <div class="content">
                        <div class="header"><i class="icon android green"></i> Android SDK</div>
                        <div class="description" style="margin-top:.5em;">
                            适用于 Android 5.0+ 的原生 SDK，支持 Java / Kotlin。
                        </div>
                    </div>
                    <div class="extra content">
                        <a class="ui button primary mini"><i class="icon download"></i> 下载 SDK</a>
                        <a class="ui button basic mini"><i class="icon book"></i> 集成帮助文档</a>
                    </div>
                </div>
                <div class="card">
                    <div class="content">
                        <div class="header"><i class="icon apple grey"></i> iOS SDK</div>
                        <div class="description" style="margin-top:.5em;">
                            适用于 iOS 12+ 的原生 SDK，支持 Swift / Objective-C。
                        </div>
                    </div>
                    <div class="extra content">
                        <a class="ui button primary mini"><i class="icon download"></i> 下载 SDK</a>
                        <a class="ui button basic mini"><i class="icon book"></i> 集成帮助文档</a>
                    </div>
                </div>
                <div class="card">
                    <div class="content">
                        <div class="header"><i class="icon mobile alternate blue"></i> Flutter SDK</div>
                        <div class="description" style="margin-top:.5em;">
                            跨平台 Flutter 插件，同时支持 Android 和 iOS。
                        </div>
                    </div>
                    <div class="extra content">
                        <a class="ui button primary mini"><i class="icon download"></i> 下载 SDK</a>
                        <a class="ui button basic mini"><i class="icon book"></i> 集成帮助文档</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>