{$layout}
{$template "../menu"}
{$template "/left_menu_with_menu"}

<div class="left-right-box-container">

    <div class="right-box">
        <first-menu>
            <menu-item :href="'/clusters/cluster/settings/metrics?category=http&clusterId=' + clusterId" :active="category == 'http'">HTTP</menu-item>
            <!--<menu-item :href="'/clusters/cluster/settings/metrics?category=tcp&clusterId=' + clusterId" :active="category == 'tcp'">TCP</menu-item>
            <menu-item :href="'/clusters/cluster/settings/metrics?category=udp&clusterId=' + clusterId" :active="category == 'udp'">UDP</menu-item>-->
            <span class="item disabled">|</span>
            <menu-item @click.prevent="createItem"><i class="pi pi-plus" style="font-size: 12px;margin-right: 0.2em;"></i> {{t('clusters_cluster_settings_metrics_index@添加指标')}}</menu-item>
            <span class="item disabled">|</span>
            <span class="item"><tip-icon :content="t('clusters_cluster_settings_metrics_index@指标设置提示')"></tip-icon></span>
        </first-menu>

        <!-- 全局配置选项 -->
        <div class="config-section" v-show="!isGlobal">
            <div class="section-title">
                <i class="icon setting"></i>
                {{t('clusters_cluster_settings_metrics_index@全局配置选项')}}
            </div>
            <form class="ui form" data-tea-action="$" data-tea-success="success">
                <csrf-token></csrf-token>
                <input type="hidden" name="clusterId" :value="clusterId"/>
                <div class="config-item">
                    <div class="item-label">{{t('clusters_cluster_settings_metrics_index@使用全局配置')}}</div>
                    <div class="item-content">
                        <checkbox name="useGlobal" v-model="useGlobal"></checkbox>
                        <p class="comment">{{t('clusters_cluster_settings_metrics_index@确定当前配置是否使用全局集群配置')}}</p>
                    </div>
                </div>
                <div class="config-item">
                    <div class="item-label"></div>
                    <div class="item-content">
                        <submit-btn></submit-btn>
                    </div>
                </div>
            </form>
        </div>

        <div class="margin" v-show="!isGlobal"></div>

        <!-- 指标列表 -->
        <b-table
            v-if="items.length > 0"
            :columns="columns"
            :data-source="items"
            :row-key="'id'"
            size="middle"
        >
            <!-- 指标名称 -->
            <template slot="nameSlot" slot-scope="{ record }">
                {{record.name}}
                <div style="margin-top: 0.3em" v-if="record.isPublic || record.code.length > 0">
                    <span class="ui label olive tiny basic" v-if="record.isPublic">{{t('clusters_cluster_settings_metrics_index@公用')}}</span>
                    <span class="ui label olive tiny basic" v-if="record.code.length > 0">{{t('clusters_cluster_settings_metrics_index@内置')}}</span>
                </div>
            </template>

            <!-- 统计对象 -->
            <template slot="keysSlot" slot-scope="{ record }">
                 <div v-if="record.keys != null" v-for="key in record.keys" style="margin-top: 0.2em; margin-bottom: 0.2em"><metric-key-label :v-key="key"></metric-key-label></div>
            </template>

            <!-- 统计周期 -->
             <template slot="periodSlot" slot-scope="{ record }">
                 {{record.period}} {{record.periodUnitName}}
            </template>

            <!-- 统计数值 -->
             <template slot="valueSlot" slot-scope="{ record }">
                 <span class="ui label small basic">{{record.valueName}}</span>
            </template>

            <!-- 状态 -->
             <template slot="statusSlot" slot-scope="{ record }">
                 <label-on :v-is-on="record.isOn"></label-on>
            </template>

            <!-- 操作 -->
             <template slot="actionSlot" slot-scope="{ record }">
                 <a-button type="link" @click="deleteItem(record.id)">
                     <i class="pi pi-trash" style="font-size: 12px;margin-right: 0.2em;"></i> {{t('clusters_cluster_settings_metrics_index@删除')}}
                 </a-button>
            </template>
        </b-table>

        <b-empty v-if="items.length == 0">{{t('clusters_cluster_settings_metrics_index@暂时还没有添加指标')}}</b-empty>
    </div>
</div>