{$layout}
{$template "/clusters/cluster/node/node_menu"}
{$template "/left_menu_with_menu"}

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

    <div class="right-box">

        <div>
            <second-menu>
                <menu-item @click.prevent="createThreshold">[{{t('node_thresholds_index@添加阈值')}}]</menu-item>
            </second-menu>
        </div>

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

        <b-table
            v-if="thresholds.length > 0"
            :columns="[
                { title: t('node_thresholds_index@监控项'), dataIndex: 'itemName', key: 'itemName' },
                { title: t('node_thresholds_index@参数'), dataIndex: 'paramName', key: 'paramName' },
                { title: t('node_thresholds_index@操作符'), dataIndex: 'operatorName', key: 'operatorName' },
                { title: t('node_thresholds_index@对比值'), key: 'value', scopedSlots: { customRender: 'valueSlot' } },
                { title: t('node_thresholds_index@统计时间段'), key: 'duration', scopedSlots: { customRender: 'durationSlot' } },
                { title: t('node_thresholds_index@状态'), dataIndex: 'isOn', key: 'status', width: '100px', scopedSlots: { customRender: 'statusSlot' } },
                { title: t('node_thresholds_index@操作'), key: 'action', width: '150px', scopedSlots: { customRender: 'actionSlot' } }
            ]"
            :data-source="thresholds"
            :row-key="'id'"
            :loading="loading"
            :pagination="false"
        >
            <template slot="valueSlot" slot-scope="{ text, record }">
                {{record.value}}<span v-if="record.paramIsPercent">%</span>
            </template>
            <template slot="durationSlot" slot-scope="{ text, record }">
                {{record.duration}}{{record.durationUnitName}}
            </template>
            <template slot="statusSlot" slot-scope="{ text, record }">
                <label-on :v-is-on="record.isOn"></label-on>
            </template>
             <template slot="actionSlot" slot-scope="{ text, record }">
                 <a-button type="link" @click.prevent="updateThreshold(record.id)">{{t('node_thresholds_index@修改')}}</a-button>
                 <a-button type="link" danger @click.prevent="deleteThreshold(record.id)">{{t('node_thresholds_index@删除')}}</a-button>
             </template>
        </b-table>
    </div>
</div>