{$layout}

{$var "header"}
<link rel="stylesheet" href="./index.css">
{$end}

<first-menu>
    <menu-item :href="'/servers/metrics?category=http'" :active="category == 'http'">HTTP</menu-item>
    <!--<menu-item :href="'/servers/metrics?category=tcp'" :active="category == 'tcp'">TCP</menu-item>
    <menu-item :href="'/servers/metrics?category=udp'" :active="category == 'udp'">UDP</menu-item>-->
    <span class="item disabled">|</span>
    <menu-item @click.prevent="createItem">
        <i class="pi pi-pen-to-square"></i>
        {{t('servers_metrics_index@创建指标')}}
    </menu-item>
    <span class="item disabled">|</span>
    <span class="item"><tip-icon :content="t('servers_metrics_item@创建指标提示')"></tip-icon></span>
</first-menu>

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

<b-table
    v-if="items.length > 0"
    :columns="[
        {
            title: t('servers_metrics_index@指标名称'),
            key: 'name',
            dataIndex: 'name',
            scopedSlots: { customRender: 'name' }
        },
        {
            title: t('servers_metrics_index@统计对象'),
            key: 'keys',
            dataIndex: 'keys',
            scopedSlots: { customRender: 'keys' }
        },
        {
            title: t('servers_metrics_index@统计周期'),
            key: 'period',
            dataIndex: 'period',
            scopedSlots: { customRender: 'period' }
        },
        {
            title: t('servers_metrics_index@统计数值'),
            key: 'value',
            dataIndex: 'value',
            width: '180px',
            scopedSlots: { customRender: 'value' }
        },
        {
            title: t('servers_metrics_index@状态'),
            key: 'status',
            dataIndex: 'status',
            width: '120px',
            scopedSlots: { customRender: 'status' }
        },
        {
            title: t('servers_metrics_index@操作'),
            key: 'actions',
            width: '120px',
            scopedSlots: { customRender: 'actions' }
        }
    ]"
    :data-source="items"
    row-key="id"
    :bordered="false"
    :pagination="false"
    >

    <!-- 指标名称列 -->
    <template slot="name" slot-scope="{ text, record }">
        <a :href="'/servers/metrics/item?itemId=' + record.id">{{record.name}}</a>
        <div class="metric-tags" v-if="record.isPublic || record.code.length > 0">
            <span class="ui label olive tiny basic" v-if="record.isPublic">{{t('servers_metrics_index@公用')}}</span>
            <span class="ui label olive tiny basic" v-if="record.code.length > 0">{{t('servers_metrics_index@内置')}}</span>
        </div>
    </template>

    <!-- 统计对象列 -->
    <template slot="keys" slot-scope="{ text, record }">
        <div v-if="record.keys != null" v-for="key in record.keys" class="metric-key">
            <metric-key-label :v-key="key"></metric-key-label>
        </div>
    </template>

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

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

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

    <!-- 操作列 -->
    <template slot="actions" slot-scope="{ text, record }">
        <a :href="'/servers/metrics/item?itemId=' + record.id">{{t('servers_metrics_index@详情')}}</a> &nbsp;
        <a href="" @click.prevent="deleteItem(record.id)">{{t('servers_metrics_index@删除')}}</a>
    </template>
</b-table>

<div class="page" v-html="filterPageContent(page)"></div>