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

<b-status-card>
    <b-status-card-item :label="t('clusters_ipaddrs_addr@IP地址Label')">
        {{addr.ip}}
    </b-status-card-item>
    <b-status-card-item :label="t('clusters_ipaddrs_addr@状态Label')">
        <span v-if="!addr.canAccess" class="red">{{t('clusters_ipaddrs@不公开访问')}}</span>
        <span v-else-if="!addr.isOn" class="red">{{t('clusters_ipaddrs@禁用')}}</span>
        <span v-else-if="addr.isUp && addr.backupIP.length > 0" class="orange">{{t('clusters_ipaddrs@备用')}}
            &nbsp; <a href="" @click.prevent="restoreBackup(addr.id)"><span class="small">{{t('clusters_ipaddrs_addr@恢复')}}</span></a>
            <br/><span class="grey small">{{addr.backupIP}}</span>
        </span>
        <span v-else-if="addr.isUp" class="green">{{t('clusters_ipaddrs@在线')}} &nbsp; <a href="" @click.prevent="updateUp(addr.id, false)"><span class="small">{{t('clusters_ipaddrs_addr@下线')}}</span></a></span>
        <span v-else class="red">{{t('clusters_ipaddrs@离线')}} &nbsp; <a href="" @click.prevent="updateUp(addr.id, true)"><span class="small">{{t('clusters_ipaddrs_addr@上线Button')}}</span></a>
        </span>
    </b-status-card-item>
    <b-status-card-item :label="t('clusters_ipaddrs_addr@所属主集群Label')">
        <link-icon :href="'/clusters/cluster?clusterId=' + addr.cluster.id">{{addr.cluster.name}}</link-icon>
    </b-status-card-item>
    <b-status-card-item :label="t('clusters_ipaddrs_addr@所属节点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="t('clusters_ipaddrs_addr@备注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="t('clusters_ipaddrs_addr@阈值设置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">{{t('clusters_ipaddrs_addr@没有设置阈值')}}</span>
    </b-status-card-item>
    <b-status-card-item :label="t('clusters_ipaddrs_addr@专属集群Label')">
        <span v-if="addr.clusters.length == 0">{{t('clusters_ipaddrs_addr@默认用于所有集群')}}</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">{{t('clusters_ipaddrs_addr@当前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="t('clusters_ipaddrs_addr@详情ActionText')"
    >
        {{t('clusters_ipaddrs_addr@区域监控')}}
    </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>