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

<second-menu>
    <menu-item @click.prevent="createReporter"><i class="pi pi-plus" style="font-size: 12px; margin-right: 0.5em;"></i>{{t('clusters_monitors_reporters@添加终端')}}</menu-item>
</second-menu>

<form class="ui form" method="get" action="/clusters/monitors/reporters">
    <div class="ui fields inline">
        <div class="ui field" v-if="groups.length > 0">
            <b-select
                name="groupId"
                v-model="groupId"
                auto-width
                :options="[
                    {label: t('clusters_monitors_reporters@全部分组'), value: '0'},
                    ...groups.map(group => ({
                        label: group.name??'',
                        value: group.id??'',
                    }))
                ]"
            ></b-select>
            
            <!-- <select class="ui dropdown auto-width" name="groupId" v-model="groupId">
                <option value="0">[全部分组]</option>
                <option v-for="group in groups" :value="group.id">{{group.name}}</option>
            </select> -->
        </div>
        <div class="ui field">
            <input type="text" name="keyword" v-model="keyword" :placeholder="t('clusters_monitors_reporters@名称地域IP')"/>
        </div>
        <div class="ui field">
            <button class="ui button" type="submit">{{t('clusters_monitors_reporters@搜索')}}</button>
            &nbsp;
            <a href="/clusters/monitors/reporters" v-if="groupId > 0 || keyword.length > 0">{{t('clusters_monitors_reporters@清除条件')}}</a>
        </div>
    </div>
</form>
<div class="margin"></div>
<b-empty v-if="reporters.length == 0">{{t('clusters_monitors_reporters@暂时还没有终端')}}</b-empty>

<b-table
    v-if="reporters.length > 0"
    :columns="[
        {
            title: t('clusters_monitors_reporters@终端名称'),
            dataIndex: 'name',
            key: 'name',
            scopedSlots: { customRender: 'nameSlot' }
        },
        {
            title: t('clusters_monitors_reporters@区域'),
            dataIndex: 'location',
            key: 'location',
            scopedSlots: { customRender: 'locationSlot' }
        },
        {
            title: t('clusters_monitors_reporters@网络提供商'),
            dataIndex: 'isp',
            key: 'isp',
            scopedSlots: { customRender: 'ispSlot' }
        },
        {
            title: t('clusters_monitors_reporters@当前IP'),
            dataIndex: 'status.ip',
            key: 'ip',
            scopedSlots: { customRender: 'ipSlot' }
        },
        {
            title: t('clusters_monitors_reporters@状态'),
            dataIndex: 'isOn',
            key: 'status',
            width: '100px',
            scopedSlots: { customRender: 'statusSlot' }
        },
        {
            title: t('clusters_monitors_reporters@操作'),
            key: 'action',
            width: '150px',
            scopedSlots: { customRender: 'actionSlot' }
        }
    ]"
    :data-source="reporters"
    :row-key="'id'"
    :bordered="false"
    :pagination="false"
>
    <template slot="nameSlot" slot-scope="{ text, record }">
        <a :href="Tea.url('.reporter', {reporterId: record.id})">
            <keyword :v-word="keyword">{{record.name}}</keyword>
        </a>
        <div v-if="record.groups.length > 0">
            <grey-label v-for="group in record.groups">{{group.name}}</grey-label>
        </div>
        <div v-if="record.shouldUpgrade">
            <span class="red small" :title="t('clusters_monitors_reporters@需要升级')">v{{record.status.buildVersion}} -&gt; v{{record.newVersion}}</span>
        </div>
    </template>

    <template slot="locationSlot" slot-scope="{ text, record }">
        <span v-if="record.location.length > 0">
            <keyword :v-word="keyword">{{record.location}}</keyword>
        </span>
        <span v-else-if="record.status.location.length > 0" class="grey">
            <keyword :v-word="keyword">{{record.status.location}}</keyword>
        </span>
        <span v-else class="disabled">-</span>
    </template>

    <template slot="ispSlot" slot-scope="{ text, record }">
        <span v-if="record.isp.length > 0">
            <keyword :v-word="keyword">{{record.isp}}</keyword>
        </span>
        <span v-else-if="record.status.isp.length > 0" class="grey">
            <keyword :v-word="keyword">{{record.status.isp}}</keyword>
        </span>
        <span v-else class="disabled">-</span>
    </template>

    <template slot="ipSlot" slot-scope="{ text, record }">
        <span v-if="record.status.ip.length > 0">
            <keyword :v-word="keyword">{{record.status.ip}}</keyword>
        </span>
        <span v-else class="disabled">-</span>
    </template>

    <template slot="statusSlot" slot-scope="{ text, record }">
        <span v-if="!record.isOn" class="red">{{t('clusters_monitors_reporters@禁用')}}</span>
        <span v-else-if="!record.isActive" class="red">{{t('clusters_monitors_reporters@离线')}}</span>
        <span v-else class="green">{{t('clusters_monitors_reporters@在线')}}</span>
    </template>

    <template slot="actionSlot" slot-scope="{ text, record }">
        <a :href="Tea.url('.reporter', {reporterId: record.id})">{{t('clusters_monitors_reporters@详情')}}</a> &nbsp;
        <a href="" @click.prevent="deleteReporter(record.id)">{{t('clusters_monitors_reporters@删除')}}</a>
    </template>
</b-table>

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