{$layout}

<first-menu>
    <menu-item href="/users" :active="!isVerifying">{{t('users_index@全部用户')}}</menu-item>
    <menu-item href="/users?verifying=1" :active="isVerifying" v-if="teaIsPlus">{{t('users_index@待审核')}}<span v-if="countVerifyingUsers > 0" class="red">({{countVerifyingUsers}})</span></menu-item>
    <span class="item disabled">|</span>
	<menu-item @click.prevent="createUser">
        <i class="pi pi-pen-to-square"></i>
        {{t('users_index@创建用户')}}
    </menu-item>
</first-menu>

<warning-message v-if="!teaIsPlus">{{t('users_index@当前系统为免费版本，这里的平台用户仅作为登记用途，无法登录系统')}}</warning-message>

<div class="margin"></div>
<form class="ui form" action="/users" method="get">
    <input type="hidden" name="verifying" :value="isVerifying ? 1 : 0"/>
    <div class="ui fields inline">
        <div class="ui field">
            <input type="text" :placeholder="t('users_index@用户名全名手机号')" name="keyword" v-model="keyword"/>
        </div>
        <div class="ui field" v-show="teaIsPlus">
            <b-select
                name="mobileIsVerified"
                v-model="mobileIsVerified"
                :options="[
                    {label: t('users_index@手机号绑定状态'), value: '-1'},
                    {label: t('users_index@已绑定'), value: '1'},
                    {label: t('users_index@未绑定'), value: '0'},
                ]"
            ></b-select>

            <!-- <select class="ui dropdown" name="mobileIsVerified" v-model="mobileIsVerified">
                <option value="-1">[手机号绑定状态]</option>
                <option value="1">已绑定</option>
                <option value="0">未绑定</option>
            </select> -->
        </div>
        <div class="ui field">
            <button type="submit" class="ui button">{{t('users_index@搜索')}}</button>
            &nbsp;
            <a :href="'/users?verifying=' + (isVerifying ? 1 : 0)" v-if="keyword.length > 0 || mobileIsVerified != -1">{{t('users_index@清除条件')}}</a>
        </div>
    </div>
</form>
<div class="margin"></div>
<b-empty v-if="users.length == 0">{{t('users_index@暂时还没有用户')}}</b-empty>

<!-- 使用 b-table 组件，但遵循 routes 示例的属性和插槽语法 -->
<b-table
    v-if="users.length > 0"
    :columns="columns"
    :data-source="users"
    :row-key="'id'"
    size="middle"
    :show-header="true"
>
    <!-- 用户名 Slot -->
    <template slot="usernameSlot" slot-scope="{ text, record }">
         <a :href="'/users/user?userId=' + record.id">
            <keyword :v-word="keyword">{{record.username}}</keyword>
        </a>
        <div v-if="!record.isVerified">
            <a :href="'/users/user?userId=' + record.id"><grey-label color="red"><i class="icon info circle"></i>{{t('users_index@信息未审核')}}</grey-label></a>
        </div>
        <div v-if="record.isRejected">
            <grey-label color="red"><i class="icon info circle"></i>{{t('users_index@信息已拒绝')}}</grey-label>
        </div>
        <div v-if="record.identityIsSubmitted">
            <a :href="'/users/identity?userId=' + record.id"><grey-label color="red"><i class="icon address card"></i>{{t('users_index@实名未审核')}}</grey-label></a>
        </div>
    </template>

    <!-- 全名 Slot -->
    <template slot="fullnameSlot" slot-scope="{ text, record }">
        <keyword :v-word="keyword">{{record.fullname}}</keyword>
    </template>

    <!-- 关联集群 Slot -->
     <template slot="clusterSlot" slot-scope="{ text, record }">
        <span v-if="record.cluster != null">{{record.cluster.name}} <link-icon :href="'/clusters/cluster?clusterId=' + record.cluster.id"></link-icon></span>
        <span v-else class="disabled">-</span>
    </template>

    <!-- 绑定手机号 Slot -->
    <template slot="verifiedMobileSlot" slot-scope="{ text, record }">
         <span v-if="record.verifiedMobile.length > 0">{{record.verifiedMobile}}</span>
        <span v-else class="disabled">-</span>
    </template>

     <!-- 联系手机号 Slot (如果显示) -->
    <template slot="mobileSlot" slot-scope="{ text, record }">
        <span v-if="record.mobile.length > 0"><keyword :v-word="keyword">{{record.mobile}}</keyword></span>
        <span v-else class="disabled">-</span>
    </template>

     <!-- 状态 Slot -->
    <template slot="statusSlot" slot-scope="{ text, record }">
         <label-on :v-is-on="record.isOn"></label-on>
    </template>

    <!-- 操作 Slot -->
    <template slot="actionSlot" slot-scope="{ text, record }">
        <switch-user-icon :v-user-id="record.id"></switch-user-icon> &nbsp;
        <a :href="'/users/user?userId=' + record.id">{{t('users_index@详情')}}</a> &nbsp;
        <a href="" @click.prevent="deleteUser(record.id)">{{t('users_index@删除')}}</a>
    </template>
</b-table>

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