{$layout}
{$template "/echarts"}
{$template "menu"}

<b-status-card>
    <b-status-card-item label="IP地址">
        {{addr.ip}}
    </b-status-card-item>
    <b-status-card-item label="状态">
        <span v-if="!addr.canAccess" class="red">不公开访问</span>
        <span v-else-if="!addr.isOn" class="red">禁用</span>
        <span v-else-if="addr.isUp && addr.backupIP.length > 0" class="orange">备用
            &nbsp; <a href="" @click.prevent="restoreBackup(addr.id)"><span class="small">[恢复]</span></a>
            <br/><span class="grey small">{{addr.backupIP}}</span>
        </span>
        <span v-else-if="addr.isUp" class="green">在线 &nbsp; <a href="" @click.prevent="updateUp(addr.id, false)"><span class="small">[下线]</span></a></span>
        <span v-else class="red">离线 &nbsp; <a href="" @click.prevent="updateUp(addr.id, true)"><span class="small">[上线]</span></a>
        </span>
    </b-status-card-item>
    <b-status-card-item label="所属主集群">
        <link-icon :href="'/clusters/cluster?clusterId=' + addr.cluster.id">{{addr.cluster.name}}</link-icon>
    </b-status-card-item>
    <b-status-card-item label="所属节点">
        <link-icon :href="'/clusters/cluster/node?clusterId=' + addr.cluster.id + '&nodeId=' + addr.node.id">{{addr.node.name}}</link-icon>
    </b-status-card-item>
    <b-status-card-item label="备注">
        <span v-if="addr.name.length > 0">{{addr.name}}</span>
        <span v-else class="disabled">-</span>
    </b-status-card-item>
    <b-status-card-item label="阈值设置">
        <div v-if="addr.thresholds.length > 0">
            <node-ip-address-thresholds-view :v-thresholds="addr.thresholds"></node-ip-address-thresholds-view>
        </div>
        <span v-else class="disabled">没有设置阈值。</span>
    </b-status-card-item>
    <b-status-card-item label="专属集群">
        <span v-if="addr.clusters.length == 0">默认用于所有集群</span>
        <div v-if="addr.clusters.length > 0">
            <span v-for="cluster in addr.clusters" class="ui label basic small">{{cluster.name}}</span>
            <p class="comment">当前IP仅在所选集群中有效。</p>
        </div>
    </b-status-card-item>
</b-status-card>

<!-- <table class="ui table definition selectable">
    <tr>
        <td class="title">IP地址</td>
        <td>
            {{addr.ip}}
        </td>
    </tr>
    <tr>
        <td>状态</td>
        <td>
            <span v-if="!addr.canAccess" class="red">不公开访问</span>
            <span v-else-if="!addr.isOn" class="red">禁用</span>
            <span v-else-if="addr.isUp && addr.backupIP.length > 0" class="orange">备用
                &nbsp; <a href="" @click.prevent="restoreBackup(addr.id)"><span class="small">[恢复]</span></a>
                <br/><span class="grey small">{{addr.backupIP}}</span>
            </span>
            <span v-else-if="addr.isUp" class="green">在线 &nbsp; <a href="" @click.prevent="updateUp(addr.id, false)"><span class="small">[下线]</span></a></span>
            <span v-else class="red">离线 &nbsp; <a href="" @click.prevent="updateUp(addr.id, true)"><span class="small">[上线]</span></a>
            </span>
        </td>
    </tr>
    <tr>
        <td>所属主集群</td>
        <td>
            <link-icon :href="'/clusters/cluster?clusterId=' + addr.cluster.id">{{addr.cluster.name}}</link-icon>
        </td>
    </tr>
    <tr>
        <td>所属节点</td>
        <td>
            <link-icon :href="'/clusters/cluster/node?clusterId=' + addr.cluster.id + '&nodeId=' + addr.node.id">{{addr.node.name}}</link-icon>
        </td>
    </tr>
    <tr>
        <td>备注</td>
        <td>
            <span v-if="addr.name.length > 0">{{addr.name}}</span>
            <span v-else class="disabled">-</span>
        </td>
    </tr>
    <tr>
        <td>阈值设置</td>
        <td>
            <div v-if="addr.thresholds.length > 0">
                <node-ip-address-thresholds-view :v-thresholds="addr.thresholds"></node-ip-address-thresholds-view>
            </div>
            <span v-else class="disabled">没有设置阈值。</span>
        </td>
    </tr>
    <tr>
        <td>专属集群</td>
        <td>
            <span v-if="addr.clusters.length == 0">默认用于所有集群</span>
            <div v-if="addr.clusters.length > 0">
                <span v-for="cluster in addr.clusters" class="ui label basic small">{{cluster.name}}</span>
                <p class="comment">当前IP仅在所选集群中有效。</p>
            </div>
        </td>
    </tr>
</table> -->

<!-- 监控信息 -->
<div v-if="results.length > 0">
    <div class="margin"></div>
    <b-settings-header
        :href="Tea.url('.reports', {addrId: addr.id})"
        action-text="详情"
    >
        区域监控
    </b-settings-header>
    <!-- <h4>区域监控 <a :href="Tea.url('.reports', {addrId: addr.id})"><span>[详情]</span></a></h4> -->
    <div class="ui divider"></div>
    <div class="chart-box" id="reports-chart-box"></div>
</div>