{$layout}
{$template "item_menu"}

<div class="left-right-box-container">
    <div class="right-box">
        <div class="config-section">
            <div class="section-title">
                <i class="icon chart line"></i>
                {{t('servers_metrics_item@指标详情')}}
            </div>

            <div class="config-item">
                <div class="item-label">{{t('servers_metrics_item@指标名称')}}</div>
                <div class="item-content">
                    <span>{{item.name}}</span>
                </div>
            </div>

            <div class="config-item">
                <div class="item-label">{{t('servers_metrics_item@状态')}}</div>
                <div class="item-content">
                    <label-on :v-is-on="item.isOn"></label-on>
                </div>
            </div>

            <div class="config-item">
                <div class="item-label">{{t('servers_metrics_item@统计对象')}}</div>
                <div class="item-content">
                    <span v-for="key in item.keys" style="margin-right: 0.5em">
                        <metric-key-label :v-key="key"></metric-key-label>
                    </span>
                </div>
            </div>

            <div class="config-item">
                <div class="item-label">{{t('servers_metrics_item@统计周期')}}</div>
                <div class="item-content">
                    <span>{{item.period}} {{item.periodUnitName}}</span>
                </div>
            </div>

            <div class="config-item">
                <div class="item-label">{{t('servers_metrics_item@统计数值')}}</div>
                <div class="item-content">
                    <span class="ui label small basic">{{item.valueName}}</span>
                </div>
            </div>

            <div class="config-item">
                <div class="item-label">{{t('servers_metrics_item@数据保留周期')}}</div>
                <div class="item-content">
                    <span v-if="item.expiresPeriod > 0">{{item.expiresPeriod}}</span>
                    <span v-else>{{t('servers_metrics_item@自动')}}</span>
                    <p class="comment" v-if="item.expiresPeriod > 0">{{t('servers_metrics_item@单位和统计周期一致')}}</p>
                </div>
            </div>

            <div class="config-item">
                <div class="item-label">{{t('servers_metrics_item@公用')}}</div>
                <div class="item-content">
                    <span class="green" v-if="item.isPublic">{{t('servers_metrics_item@公用')}}</span>
                    <span class="disabled" v-else>{{t('servers_metrics_item@非公用')}}</span>
                </div>
            </div>

            <div class="config-item">
                <div class="item-label">{{t('servers_metrics_item@内置')}}</div>
                <div class="item-content">
                    <span class="green" v-if="item.code.length > 0">{{t('servers_metrics_item@内置')}}</span>
                    <span class="disabled" v-else>{{t('servers_metrics_item@自建')}}</span>
                </div>
            </div>
        </div>

        <!-- 使用此指标的集群 -->
        <div class="margin"></div>
        <div class="config-section">
            <div class="section-title">
                <i class="icon cloud"></i>
                {{t('servers_metrics_item@绑定此指标的集群')}}
            </div>

            <div class="config-item" v-if="clusters.length == 0">
                <div class="item-content">
                    <b-empty>{{t('servers_metrics_item@暂时还没有集群使用此策略')}}</b-empty>
                </div>
            </div>
            <div class="config-item" v-for="cluster in clusters" v-if="clusters.length > 0">
                <div class="item-content">
                    <span><i class="icon server"></i> {{cluster.name}}<link-icon :href="'/clusters/cluster?clusterId=' + cluster.id"></link-icon></span>
                </div>
            </div>
        </div>
    </div>
</div>