{$layout}

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

<first-menu>
    <menu-item @click.prevent="createScript">
        <i class="pi pi-pen-to-square"></i>
        {{t('scripts@创建脚本')}}
    </menu-item>
    <span class="item"><tip-icon :content="t('scripts@脚本上下文提示')"></tip-icon></span>
</first-menu>

<p class="ui message" v-if="hasUpdates">
    <a href="" @click.prevent="publishScripts">{{t('scripts@发布提示')}}</a>
</p>

<b-empty v-if="scripts.length == 0">{{t('scripts@暂时还没有脚本')}}</b-empty>

<b-table
    v-if="scripts.length > 0"
    :columns="[
        {
            title: t('scripts@脚本文件名'),
            key: 'filename',
            dataIndex: 'filename',
            scopedSlots: { customRender: 'filename' }
        },
        {
            title: t('scripts@脚本说明'),
            key: 'name',
            dataIndex: 'name'
        },
        {
            title: t('scripts@修改时间'),
            key: 'updatedTime',
            dataIndex: 'updatedTime'
        },
        {
            title: t('scripts@状态'),
            key: 'status',
            dataIndex: 'status',
            width: '120px',
            scopedSlots: { customRender: 'status' }
        },
        {
            title: t('scripts@操作'),
            key: 'actions',
            width: '120px',
            scopedSlots: { customRender: 'actions' }
        }
    ]"
    :data-source="scripts"
    row-key="id"
    :bordered="false"
    :pagination="false"
    >

    <!-- 脚本文件名列 -->
    <template slot="filename" slot-scope="{ text, record }">
        <div class="script-filename">
            <a :href="'/servers/scripts/script?scriptId=' + record.id">{{record.filename}}</a>
            <span class="modified-mark" v-if="record.isChanged" :title="t('scripts@已修改Title')">*</span>
        </div>
    </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/scripts/script?scriptId=' + record.id">{{t('scripts@详情')}}</a> &nbsp;
        <a href="" @click.prevent="deleteScript(record.id)">{{t('scripts@删除')}}</a>
    </template>
</b-table>

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