{$layout}

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

<style>
    .httpdns-log-summary {
        color: #556070;
        font-size: 12px;
        line-height: 1.6;
        white-space: nowrap;
    }

    .httpdns-log-summary code {
        font-size: 12px;
    }
</style>

<div>
    <form method="get" action="/httpdns/resolveLogs" class="ui form small" autocomplete="off">
        <div class="ui fields inline">
            <div class="ui field">
                <select class="ui dropdown" name="clusterId" v-model="clusterId">
                    <option value="">[API服务地址]</option>
                    <option v-for="cluster in clusters" :value="cluster.id">{{cluster.displayName}}</option>
                </select>
            </div>
            <div class="ui field">
                <input type="text" name="appId" v-model="appId" placeholder="AppID" />
            </div>
            <div class="ui field">
                <input type="text" name="domain" v-model="domain" placeholder="域名" />
            </div>
            <div class="ui field">
                <select class="ui dropdown" name="status" v-model="status">
                    <option value="">[状态]</option>
                    <option value="success">解析成功</option>
                    <option value="failed">解析失败</option>
                </select>
            </div>
            <div class="ui field">
                <input type="text" name="keyword" v-model="keyword" placeholder="应用/域名/IP/结果IP" />
            </div>
            <div class="ui field">
                <button type="submit" class="ui button small">查询</button>
            </div>
            <div class="ui field"
                v-if="clusterId.toString().length > 0 || appId.length > 0 || domain.length > 0 || status.length > 0 || keyword.length > 0">
                <a href="/httpdns/resolveLogs">[清除条件]</a>
            </div>
        </div>
    </form>
</div>

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

<not-found-box v-if="resolveLogs.length == 0">暂时还没有访问日志。</not-found-box>

<div v-if="resolveLogs.length > 0">
    <div style="overflow-x:auto;">
        <table class="ui table selectable celled">
            <thead>
                <tr>
                    <th>API服务地址</th>
                    <th>域名</th>
                    <th>类型</th>
                    <th>概要</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="log in resolveLogs">
                    <td>{{log.serviceDomain}}</td>
                    <td>{{log.domain}}</td>
                    <td>{{log.query}}</td>
                    <td>
                        <div class="httpdns-log-summary">
                            {{log.time}}
                            | {{log.appName}} (<code>{{log.appId}}</code>)
                            | <code>{{log.clientIp}}</code>
                            | {{log.os}}/{{log.sdkVersion}}
                            | {{log.query}} {{log.domain}} ->
                            <code v-if="log.ips && log.ips.length > 0">{{log.ips}}</code>
                            <span class="grey" v-else>[无记录]</span>
                            |
                            <span class="green" v-if="log.status == 'success'"><strong>成功</strong></span>
                            <span class="red" v-else><strong>失败</strong></span>
                            <span class="grey" v-if="log.errorCode != 'none'">({{log.errorCode}})</span>
                            | {{log.costMs}}ms
                        </div>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</div>