<template>
	<div class="container">
		<div class="header">
			<img class="bg" src="../../static/images/my_header.png" alt="" />
			<div class="user" @click="onEnterPage('setting')">
				<div class="avatar"><img :src="userInfo.avatar || man" /></div>
				<div class="name" v-if="userInfo">
					<span>{{ userInfo.name || '用户' + userInfo.mobile.slice(7, 11) }}</span>
					<span>{{ userInfo.mobile }}</span>
				</div>
				<div class="name" v-else><span>未登录</span></div>
			</div>
			<div class="set" @click="onEnterPage('setting')">
				<i class="font_family icon-shezhi"></i>
				个人设置
			</div>
		</div>
		<div class="patient">
			<span class="title">学生信息</span>
			<div class="null-box" @click="onEnterPage('addPatient')" v-if="!users.length">
				<i class="font_family icon-shoucang"></i>
				<span>添加学生</span>
			</div>
			<div class="user-list" v-else>
				<div class="cell-item" v-for="(item, index) in users" :key="index" @click="onEnterPage('index', item)">
					<span>{{ item.name }}</span>
					<!-- <i class="font_family icon-jiantoua"></i> -->
					<span style="padding: 10px;box-sizing: border-box;margin-right: -12px;"><i class="font_family icon-shanchu" @click.stop="bindOpenUnbundle(item)"></i></span>
				</div>
			</div>
			<div class="add-box" v-if="users.length">
				<span class="add-btn" @click="onEnterPage('addPatient')">
					<i class="font_family icon-shoucang"></i>
					<span>添加学生</span>
				</span>
			</div>
		</div>
		<!-- 解绑弹窗 -->
		<uni-popup ref="userPopup" type="bottom">
			<div class="cell-group">
				<div class="cell-item tips">解绑<i class="red">“学生信息”</i>，解绑后学生信息将会被清除！</div>
				<div class="cell-item red" @click="bindUnbundle()">解绑</div>
				<div class="cell-item margintop" @click="$refs.userPopup.close()">取消</div>
			</div>
		</uni-popup>
	</div>
</template>

<script>
import methods from './methods.js';
export default {
	data() {
		return {
			imgUrl: '',
			userInfo: '',
			man: '',
			users: [],
			unbundleUser: ''
		};
	},
	onLoad() {
		let app = getApp();
		this.imgUrl = app.globalData.imgUrl;
		this.man = this.imgUrl + app.globalData.man;
	},
	onShow() {
		this.userInfo = uni.getStorageSync('userInfo');
		if (this.userInfo) {
			this.initData();
		} else {
			this.users = []
		}
	},
	onUnload() {},
	methods: {
		...methods
	}
};
</script>

<style lang="scss">
@import './style.scss';
</style>
