{$layout}
{$template "menu"}

<second-menu>
    <menu-item @click.prevent="createRecipient">
        <i class="pi pi-pen-to-square"></i>
        创建接收人
    </menu-item>
</second-menu>

<b-empty v-if="recipients.length == 0">暂时还没有媒介接收人。</b-empty>

<table class="ui table selectable celled" v-if="recipients.length > 0">
    <thead>
        <tr>
            <th>系统用户</th>
            <th>媒介类型</th>
            <th>接收人标识</th>
            <th>所属分组</th>
            <th>备注</th>
            <th class="width5">状态</th>
            <th class="two op">操作</th>
        </tr>
    </thead>
    <tr v-for="recipient in recipients">
        <td><a :href="'/admins/recipients/recipient?recipientId=' + recipient.id">{{recipient.admin.fullname}}</a> <span class="small grey">（{{recipient.admin.username}}）</span><link-icon :href="'/admins/admin?adminId=' + recipient.admin.id" size="tiny"></link-icon></td>
        <td>{{recipient.instance.name}}</td>
        <td>
            <span v-if="recipient.user.length > 0">{{recipient.user}}</span>
            <span v-else class="disabled">-</span>
        </td>
        <td>
            <div v-if="recipient.groups != null && recipient.groups.length > 0">
                <div v-for="group in recipient.groups" class="ui label small basic">{{group.name}}</div>
            </div>
            <div v-else>
                <span class="disabled">-</span>
            </div>
        </td>
        <td>
            <span v-if="recipient.description.length > 0">{{recipient.description}}</span>
            <span v-else class="disabled">-</span>
        </td>
        <td>
            <label-on :v-is-on="recipient.isOn"></label-on>
        </td>
        <td>
            <a :href="'/admins/recipients/recipient?recipientId=' + recipient.id">详情</a> &nbsp;
            <a href="" @click.prevent="deleteRecipient(recipient.id)">删除</a>
        </td>
    </tr>
</table>

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