{$layout}
{$template "user_menu"}

<!-- 使用 config-section 和 config-item 替换第一个 table -->
<div class="config-section">
    <div class="section-title">{{t('users_user@用户信息')}}</div>
    <div class="config-item">
        <div class="item-label">{{t('users_user@状态')}}</div>
        <div class="item-content">
            <span v-if="!user.isVerified" class="red">
                {{t('users_user@信息未审核')}} &nbsp; <a href="" @click.prevent="verify">[{{t('users_user@审核')}}]</a>
            </span>
            <span v-else-if="user.isRejected" class="red">{{t('users_user@已拒绝')}}
                 &nbsp; <a href="" @click.prevent="verify">[{{t('users_user@重新审核')}}]</a>
            </span>
            <span v-else>
                <label-on :v-is-on="user.isOn"></label-on>
            </span>
            <p class="comment" v-if="user.isVerified && user.isRejected && user.rejectReason.length > 0">{{t('users_user@拒绝原因')}}：{{user.rejectReason}}</p>
        </div>
    </div>
    <div class="config-item">
        <div class="item-label">{{t('users_user@用户名')}}</div>
        <div class="item-content">
            {{user.username}}
        </div>
    </div>
     <div class="config-item">
        <div class="item-label">{{t('users_user@全名')}}</div>
        <div class="item-content">
            {{user.fullname}}
        </div>
    </div>
    <div class="config-item">
        <div class="item-label">{{t('users_user@关联集群')}}</div>
        <div class="item-content">
            <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">{{t('users_user@没有设置')}}</span>
        </div>
    </div>
     <div class="config-item">
        <div class="item-label">{{t('users_user@手机号')}}</div>
        <div class="item-content">
            <span v-if="user.mobile.length > 0">{{user.mobile}}</span>
            <span v-else class="disabled">{{t('users_user@没有设置')}}</span>
        </div>
    </div>
    <div class="config-item">
        <div class="item-label">{{t('users_user@联系电话')}}</div>
        <div class="item-content">
            <span v-if="user.tel.length > 0">{{user.tel}}</span>
            <span v-else class="disabled">{{t('users_user@没有设置')}}</span>
        </div>
    </div>
    <div class="config-item">
        <div class="item-label">{{t('users_user@常用电子邮箱')}}</div>
        <div class="item-content">
            <span v-if="user.email.length > 0">{{user.email}}</span>
            <span v-else class="disabled">{{t('users_user@没有设置')}}</span>
        </div>
    </div>
     <div class="config-item">
        <div class="item-label">{{t('users_user@已绑定电子邮箱')}}</div>
        <div class="item-content">
            <span v-if="user.verifiedEmail.length > 0">{{user.verifiedEmail}}</span>
            <span v-else class="disabled">{{t('users_user@没有设置')}}</span>
        </div>
    </div>
    <div class="config-item">
        <div class="item-label">{{t('users_user@备注')}}</div>
        <div class="item-content">
            <span v-if="user.remark.length > 0">{{user.remark}}</span>
            <span v-else class="disabled">{{t('users_user@没有设置')}}</span>
        </div>
    </div>
    <div class="config-item">
        <div class="item-label">{{t('users_user@带宽算法')}}</div>
        <div class="item-content">
            <span v-if="user.bandwidthAlgo.length > 0">
                <span v-if="user.bandwidthAlgo == 'secondly'">{{t('users_user@峰值带宽')}}</span>
                <span v-if="user.bandwidthAlgo == 'avg'">{{t('users_user@平均带宽')}}</span>
            </span>
            <span v-else class="disabled">{{t('users_user@使用默认')}}</span>
        </div>
    </div>
    <div class="config-item">
        <div class="item-label">{{t('users_user@注册IP')}}</div>
        <div class="item-content">
            <span v-if="user.registeredIP.length == 0" class="disabled">-</span>
            <span v-else-if="user.registeredRegion.length == 0">{{user.registeredIP}}</span>
            <span v-else>{{user.registeredIP}}<span class="grey small">（{{user.registeredRegion}}）</span></span>
        </div>
    </div>
</div>

<!-- 使用 config-section 和 config-item 替换第二个 table -->
<div class="config-section">
    <div class="section-title">{{t('users_user@OTP认证')}}</div> <!-- 替换 b-settings-header -->
    <div class="config-item">
        <div class="item-label">{{t('users_user@状态')}}</div>
        <div class="item-content">
            <span v-if="otp != null && otp.isOn" class="green">{{t('users_user@已启用')}}</span>
            <span v-else class="disabled">{{t('users_user@未启用')}}</span>
        </div>
    </div>
    <div class="config-item" v-if="otp != null && otp.isOn">
        <div class="item-label">{{t('users_user@更多信息')}}</div> <!-- 参照示例添加标签 -->
        <div class="item-content"><more-options-indicator></more-options-indicator></div>
    </div>
    <div v-show="moreOptionsVisible">
        <div class="config-item" v-if="otp != null && otp.isOn">
            <div class="item-label">{{t('users_user@认证二维码')}}</div>
            <div class="item-content">
                <img alt="qrcode" :src="'./otpQrcode?userId=' + user.id"/>
                <p class="comment"><a :href="'./otpQrcode?userId=' + user.id + '&download=true'">[{{t('users_user@下载')}}]</a> &nbsp; {{t('users_user@可以通过二维码快速添加OTP认证信息到认证App中')}}</p>
            </div>
        </div>
        <div class="config-item" v-if="otp != null && otp.isOn">
            <div class="item-label">{{t('users_user@密钥')}}</div>
            <div class="item-content">{{otp.params.secret}}</div>
        </div>
    </div>
</div>