{$layout}
{$template "../item_menu"}

<second-menu>
    <menu-item @click.prevent="createChart">
        <i class="pi pi-pen-to-square"></i>
        {{t('metrics_charts@创建图表')}}
    </menu-item>
</second-menu>

<b-empty v-if="charts.length == 0">{{t('metrics_charts@暂时还没有图表')}}</b-empty>

<b-table
    v-if="charts.length > 0"
    :columns="[
        {
            title: t('metrics_charts@图表名称'),
            dataIndex: 'name',
            key: 'name'
        },
        {
            title: t('metrics_charts@类型'),
            dataIndex: 'typeName',
            key: 'typeName'
        },
        {
            title: t('metrics_charts@状态'),
            dataIndex: 'isOn',
            key: 'status',
            width: '200px',
            scopedSlots: { customRender: 'status' }
        },
        {
            title: t('metrics_charts@操作'),
            key: 'action',
            width: '200px',
            scopedSlots: { customRender: 'action' }
        }
    ]"
    :data-source="charts"
    row-key="id"
    :bordered="false"
    :pagination="false"
>
    <!-- 状态列 -->
    <template slot="status" slot-scope="{ text, record }">
        <label-on :v-is-on="record.isOn"></label-on>
    </template>

    <!-- 操作列 -->
    <template slot="action" slot-scope="{ text, record }">
        <a :href="Tea.url('.chart', {chartId: record.id})">{{t('metrics_charts@详情')}}</a> &nbsp;
        <a href="" @click.prevent="deleteChart(record.id)">{{t('metrics_charts@删除')}}</a>
    </template>
</b-table>

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