{$layout}
{$template "reporter_menu"}

<div class="ui margin"></div>
<form class="ui form" action="/clusters/monitors/reporters/reporter/results">
    <input type="hidden" name="reporterId" :value="reporter.id"/>
    <div class="ui fields inline">
        <div class="ui field">
            <b-select
                name="level"
                v-model="level"
                :options="[
                    {label: t('clusters_monitors_reporters_reporter@级别'), value: ''},
                    ...levels.map(level => ({
                        label: level.name??'',
                        value: level.code??'',
                    }))
                ]"
            ></b-select>

            <!-- <select class="ui dropdown" name="level" v-model="level">
                <option value="">[级别]</option>
                <option v-for="level in levels" :value="level.code">{{level.name}}</option>
            </select> -->
        </div>
        <div class="ui field">
            <button class="ui button" type="submit">{{t('clusters_monitors_reporters_reporter@搜索')}}</button> &nbsp;
            <a :href="Tea.url('$', {reporterId: reporter.id})" v-if="level.length > 0">{{t('clusters_monitors_reporters_reporter@清除条件')}}</a>
        </div>
    </div>
</form>
<div class="margin"></div>

<b-empty v-if="results.length == 0">{{t('clusters_monitors_reporters_reporter@暂时还没有监控结果。')}}</b-empty>

<b-table
    v-if="results.length > 0"
    :columns="[
        {
            title: t('clusters_monitors_reporters_reporter@类型'),
            dataIndex: 'typeName',
            key: 'type',
            width: '15%'
        },
        {
            title: t('clusters_monitors_reporters_reporter@检测时间'),
            dataIndex: 'updatedTime',
            key: 'time',
            width: '15%'
        },
        {
            title: t('clusters_monitors_reporters_reporter@对象'),
            dataIndex: 'targetDesc',
            key: 'target',
            width: '30%',
            scopedSlots: { customRender: 'targetSlot' }
        },
        {
            title: t('clusters_monitors_reporters_reporter@级别'),
            dataIndex: 'levelName',
            key: 'level',
            width: '10%',
            scopedSlots: { customRender: 'levelSlot' }
        },
        {
            title: t('clusters_monitors_reporters_reporter@耗时'),
            dataIndex: 'costMs',
            key: 'cost',
            width: '15%',
            scopedSlots: { customRender: 'costSlot' }
        },
        {
            title: t('clusters_monitors_reporters_reporter@错误信息'),
            dataIndex: 'error',
            key: 'error',
            scopedSlots: { customRender: 'errorSlot' }
        }
    ]"
    :data-source="results"
    :row-key="'id'"
    :bordered="false"
    :pagination="false"
>
    <template slot="targetSlot" slot-scope="{ text, record }">
        {{record.targetDesc}}
        <span v-if="record.type == 'ipAddr'">
            <link-icon :href="'/clusters/ip-addrs/addr?addrId=' + record.targetId"></link-icon>
        </span>
    </template>

    <template slot="levelSlot" slot-scope="{ text, record }">
        <span :class="record.color">{{record.levelName}}</span>
    </template>

    <template slot="costSlot" slot-scope="{ text, record }">
        <span v-if="record.isOk" :class="record.color">{{record.costMs}}ms</span>
        <span v-else class="disabled">-</span>
    </template>

    <template slot="errorSlot" slot-scope="{ text, record }">
        <span v-if="!record.isOk" class="red">{{record.error}}</span>
        <span v-else class="disabled">-</span>
    </template>
</b-table>

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