{$layout}

<first-menu>
    <menu-item href="/users" :active="!isVerifying">全部用户</menu-item>
    <menu-item href="/users?verifying=1" :active="isVerifying" v-if="teaIsPlus">待审核<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>
        创建用户
    </menu-item>
</first-menu>

<warning-message v-if="!teaIsPlus">当前系统为免费版本，这里的平台用户仅作为登记用途，无法登录系统。</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="用户名、全名、手机号..." name="keyword" v-model="keyword"/>
        </div>
        <div class="ui field" v-show="teaIsPlus">
            <b-select
                name="mobileIsVerified"
                v-model="mobileIsVerified"
                :options="[
                    {label: '[手机号绑定状态]', value: '-1'},
                    {label: '已绑定', value: '1'},
                    {label: '未绑定', 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">搜索</button>
            &nbsp;
            <a :href="'/users?verifying=' + (isVerifying ? 1 : 0)" v-if="keyword.length > 0 || mobileIsVerified != -1">[清除条件]</a>
        </div>
    </div>
</form>

<b-empty v-if="users.length == 0">暂时还没有用户。</b-empty>
<table class="ui table selectable celled" v-if="users.length > 0">
	<thead>
		<tr>
			<th>用户名</th>
			<th>全名</th>
            <th>关联集群</th>
            <th>绑定手机号</th>
			<th v-if="windowWidth > columnWidth1">联系手机号</th>
			<th>注册时间</th>
			<th class="center" style="width: 6em">状态</th>
			<th class="three op">操作</th>
		</tr>
	</thead>
	<tr v-for="user in users">
        <td :class="{disabled:!user.isOn}">
            <a :href="'/users/user?userId=' + user.id">
                <keyword :v-word="keyword">{{user.username}}</keyword>
            </a>
            <div v-if="!user.isVerified">
                <a :href="'/users/user?userId=' + user.id"><grey-label color="red"><i class="icon info circle"></i>信息未审核</grey-label></a>
            </div>
            <div v-if="user.isRejected">
                <grey-label color="red"><i class="icon info circle"></i>信息已拒绝</grey-label>
            </div>
            <div v-if="user.identityIsSubmitted">
                <a :href="'/users/identity?userId=' + user.id"><grey-label color="red"><i class="icon address card"></i>实名未审核</grey-label></a>
            </div>
        </td>
        <td :class="{disabled:!user.isOn}">
            <keyword :v-word="keyword">{{user.fullname}}</keyword>
        </td>
        <td>
            <span v-if="user.cluster != null">{{user.cluster.name}} <link-icon :href="'/clusters/cluster?clusterId=' + user.cluster.id"></link-icon></span>
            <span v-else class="disabled">-</span>
        </td>
        <td :class="{disabled:!user.isOn}">
            <span v-if="user.verifiedMobile.length > 0">{{user.verifiedMobile}}</span>
            <span v-else class="disabled">-</span>
        </td>
        <td :class="{disabled:!user.isOn}" v-if="windowWidth > columnWidth1">
            <span v-if="user.mobile.length > 0"><keyword :v-word="keyword">{{user.mobile}}</keyword></span>
            <span v-else class="disabled">-</span>
        </td>
        <td :class="{disabled:!user.isOn}">{{user.createdTime}}</td>
        <td class="center">
            <label-on :v-is-on="user.isOn"></label-on>
        </td>
        <td>
            <switch-user-icon :v-user-id="user.id"></switch-user-icon> &nbsp;
            <a :href="'/users/user?userId=' + user.id">详情</a> &nbsp;
            <a href="" @click.prevent="deleteUser(user.id)">删除</a>
        </td>
	</tr>
</table>

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