{$layout}
{$template "menu"}

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

<b-empty v-if="logs.length == 0">{{t('clusters_ipaddrs@暂时还没有日志')}}</b-empty>

<b-table
    v-if="logs.length > 0"
    :columns="[
        {
            title: t('clusters_ipaddrs@操作人Col'),
            key: 'admin',
            dataIndex: 'admin',
            width: '200px',
            scopedSlots: { customRender: 'admin' }
        },
        {
            title: t('clusters_ipaddrs@状态LogsCol'),
            key: 'status',
            dataIndex: 'status',
            width: '150px',
            scopedSlots: { customRender: 'status' }
        },
        {
            title: t('clusters_ipaddrs@描述Col'),
            key: 'description',
            dataIndex: 'description',
            scopedSlots: { customRender: 'description' }
        },
        {
            title: t('clusters_ipaddrs@时间Col'),
            key: 'createdTime',
            dataIndex: 'createdTime',
            width: '180px',
            scopedSlots: { customRender: 'createdTime' }
        }
    ]"
    :data-source="logs"
    row-key="id"
    :bordered="false"
    :pagination="false"
    :scroll="{ x: '1000px' }"
    >
    <!-- 操作人列 -->
    <template slot="admin" slot-scope="{ text, record }">
        <span :class="{'admin-name': true, 'grey': record.admin.id == 0}">
            <i class="pi pi-user"></i>
            {{record.admin.name}}
        </span>
    </template>

    <!-- 状态列 -->
    <template slot="status" slot-scope="{ text, record }">
        <span v-if="!record.isOn" class="log-status red">
            <i class="pi pi-ban"></i>
            {{t('clusters_ipaddrs@停用')}}
        </span>
        <span v-else-if="!record.canAccess" class="log-status red">
            <i class="pi pi-lock"></i>
            {{t('clusters_ipaddrs@不公开访问')}}
        </span>
        <span v-else-if="record.isUp && record.backupIP.length > 0" class="log-status orange">
            <i class="pi pi-sync"></i>
            {{t('clusters_ipaddrs@备用')}}
            <br/>
            <span class="grey small">{{record.backupIP}}</span>
        </span>
        <span v-else-if="record.isUp" class="log-status green">
            <i class="pi pi-check-circle"></i>
            {{t('clusters_ipaddrs@上线')}}
        </span>
        <span v-else class="log-status red">
            <i class="pi pi-times-circle"></i>
            {{t('clusters_ipaddrs@离线')}}
        </span>
    </template>

    <!-- 描述列 -->
    <template slot="description" slot-scope="{ text, record }">
        <span class="log-description">{{record.description}}</span>
    </template>

    <!-- 时间列 -->
    <template slot="createdTime" slot-scope="{ text, record }">
        <span class="log-time">
            <i class="pi pi-clock"></i>
            {{record.createdTime}}
        </span>
    </template>
</b-table>

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