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

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

    <div class="right-box">
        <first-menu>
            <menu-item @click.prevent="createThreshold"><i class="icon add"></i> {{t('clusters_cluster_settings_thresholds_index@添加阈值')}}</menu-item>
        </first-menu>

        <!-- 全局配置选项 -->
        <div class="config-section" v-show="!isGlobal">
            <div class="section-title">
                <i class="icon setting"></i>
                {{t('clusters_cluster_settings_thresholds_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_thresholds_index@使用全局配置')}}</div>
                    <div class="item-content">
                        <p-switch name="useGlobal" v-model="useGlobal"></p-switch>
                        <p class="comment">{{t('clusters_cluster_settings_thresholds_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="thresholds.length > 0"
            :columns="[
                {
                    title: t('clusters_cluster_settings_thresholds_index@监控项'),
                    key: 'itemName',
                    scopedSlots: { customRender: 'itemSlot' }
                },
                {
                    title: t('clusters_cluster_settings_thresholds_index@参数'),
                    key: 'paramName',
                    scopedSlots: { customRender: 'paramSlot' }
                },
                {
                    title: t('clusters_cluster_settings_thresholds_index@操作符'),
                    key: 'operatorName',
                    scopedSlots: { customRender: 'operatorSlot' },
                    width: '100px',
                    align: 'center'
                },
                 {
                    title: t('clusters_cluster_settings_thresholds_index@对比值'),
                    key: 'value',
                    scopedSlots: { customRender: 'valueSlot' },
                    align: 'center'
                },
                {
                    title: t('clusters_cluster_settings_thresholds_index@统计时间段'),
                    key: 'duration',
                    scopedSlots: { customRender: 'durationSlot' },
                    width: '120px',
                    align: 'center'
                },
                {
                    title: t('clusters_cluster_settings_thresholds_index@状态'),
                    key: 'status',
                    scopedSlots: { customRender: 'statusSlot' },
                    width: '100px',
                    align: 'center'
                },
                {
                    title: t('clusters_cluster_settings_thresholds_index@操作'),
                    key: 'action',
                    scopedSlots: { customRender: 'actionSlot' },
                    width: '150px',
                    align: 'center'
                }
            ]"
            :data-source="thresholds"
            :row-key="'id'"
            size="middle"
        >
            <template slot="itemSlot" slot-scope="{ record }">
                {{record.itemName}}
                <div v-if="record.node != null" style="margin-top: 0.3em">
                    <a :href="'/clusters/cluster/node/settings/thresholds?clusterId=' + clusterId + '&nodeId=' + record.node.id" class="ui label basic tiny" :title="t('clusters_cluster_settings_thresholds_index@节点专属阈值设置')"><span class="small">{{t('clusters_cluster_settings_thresholds_index@节点')}}：{{record.node.name}}</span></a>
                </div>
            </template>

            <template slot="paramSlot" slot-scope="{ record }">
                {{record.paramName}}
            </template>

             <template slot="operatorSlot" slot-scope="{ record }">
                {{record.operatorName}}
            </template>

             <template slot="valueSlot" slot-scope="{ record }">
                {{record.value}}<span v-if="record.paramIsPercent">%</span>
            </template>

            <template slot="durationSlot" slot-scope="{ record }">
                 {{record.duration}}{{record.durationUnitName}}
            </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="updateThreshold(record.id)">
                    <i class="pi pi-pen-to-square"></i> {{t('clusters_cluster_settings_thresholds_index@修改')}}
                 </a-button>
                 <a-button type="link" @click="deleteThreshold(record.id)">
                    <i class="pi pi-trash"></i> {{t('clusters_cluster_settings_thresholds_index@删除')}}
                 </a-button>
            </template>

        </b-table>

        <b-empty v-if="thresholds.length == 0">{{t('clusters_cluster_settings_thresholds_index@暂时还没有设置阈值')}}</b-empty>
    </div>
</div>