<template>
	<div class="base-school-select">
		<div v-if="!joinSchools || !joinSchools.length">{{ $t('utils.noJoinSchool') }}</div>
		<Dropdown @on-click="onSchoolSelect" v-else>
			<img class="school-logo" :src="curSchool.picture || defaultLogo" />
			<a href="javascript:void(0)" :class="['base-user-post', joinSchools && joinSchools.length === 1 ? 'single-school' : '']">
				{{ curSchool.name }}
				<Icon type="ios-arrow-down"></Icon>
			</a>
			<DropdownMenu slot="list">
				<div v-for="(item,index) in joinSchools" :key="index">
					<DropdownItem :name="index">
						<div class="school-item">
							<img :src="item.picture || defaultLogo" alt="">
							<span>{{ item.name }}</span>
						</div>
					</DropdownItem>
				</div>

			</DropdownMenu>
		</Dropdown>
	</div>
	</div>
</template>

<script>
	import User from '@/service/User.js'
	export default {
		data() {
			return {
				curSchool: {
					logo: ''
				},
				defaultLogo: '',
				user: {
					schools: []
				},
				joinSchools:[]
			}
		},
		created() {
			this.defaultLogo = require('@/assets/icon/default_school.png')
			// 获取本地存储中的 用户信息
			let user = JSON.parse(decodeURIComponent(localStorage.user_profile, "utf-8"));
			console.log(user)
			let schoolProfile = localStorage.school_profile ? JSON.parse(decodeURIComponent(localStorage.school_profile, "utf-8")) :undefined;
			this.user.schools = user.schools
			let joinSchools = user.schools && user.schools.length ?  user.schools.filter(i => i.status === 'join') : null
			this.joinSchools = joinSchools
			// 如果本地存储已经有保存学校信息 则刷新后会直接读取之前的学校信息
			if (schoolProfile && joinSchools.length) {
				this.curSchool = joinSchools.filter(i => i.schoolId === schoolProfile.school_base.id)[0]
				this.$store.commit('setSchoolCode', this.curSchool.schoolId)
            } else if (joinSchools && joinSchools.length) {
				// 拿到用户管理的schools 必须是已加入的学校
				this.curSchool = user.defaultschool ? joinSchools.filter(i => i.schoolId === user.defaultschool)[0] : joinSchools[0]
				this.$store.commit('setSchoolCode', this.curSchool.schoolId)
			} else {
				this.$Message.warning(this.$t('utils.noShoolTip'))
			}
		},
		methods: {
			async onSchoolSelect(val) {
				console.log(val)
				console.log(this.user.schools)
				console.log(this.joinSchools)
				this.joinSchools = this.user.schools.filter(i => i.status === 'join')
				this.$EventBus.$emit('onGlobalLoading', true)
				this.curSchool = this.joinSchools[val]
				let schoolCode = this.joinSchools[val].schoolId
				// 更新当前school_code
				this.$store.dispatch('user/setSchoolCode', schoolCode)
				// 更新当前school_profile以及access
				this.$store.dispatch('user/checkSchoolProfile').then(res=>{
				    if(res) {
				        this.$User.freshLogin()
				    }
				});
				setTimeout(() => {
					this.$EventBus.$emit('onGlobalLoading', false)
				}, 500)
				this.$router.push({
					name: 'home'
				})
			},

			/* 获取老师所在学校的信息 */
			getTeacherSchoolInfo(code) {
				return new Promise((r, j) => {
					this.$api.schoolSetting.getTeacherSchoolInfo({
						id_token: localStorage.getItem('id_token'),
						school_code: code
					}).then(
						(res) => {
							if (!res.error) {
								r(res)
							}
						},
						(err) => {
							this.$Message.error(this.$t('utils.getDataFail'))
						}
					)
				})
			},
		},

		mounted() {
			// 解绑之前的事件 防止多次触发
			this.$EventBus.$off('onChangeSchool')
			this.$EventBus.$on('onChangeSchool', params => {
				if (params.schoolCode !== this.curSchool.schoolId) {
					console.log('检测到切换学校')
					console.log(params)
					this.user = params.user
					let joinSchools = params.user.schools.filter(i => i.status === 'join')
					this.onSchoolSelect(params.isFirst ? 0 : joinSchools.map(j => j.schoolId).indexOf(params.schoolCode))
				}
			})
		},

		computed: {

		}
	}
</script>

<style lang="less">
	.base-school-select {
		.ivu-dropdown {
			
			.ivu-select-dropdown{
				width: max-content;
				width: -webkit-max-content;
				left: -35%;
			}

			.ivu-dropdown-item:hover {
				background: #83d7ff;
			}

			a {
				color: var(--primary-textColor) !important;

				&:hover {
					color: var(--primary-textColor) !important;
				}

				.ivu-icon {
					display: none;
				}

				&::after {
					content: '';
					display: inline-block;
					width: 0;
					height: 0;
					border-right: solid 8px transparent;
					border-left: solid 8px transparent;
					border-top: solid 8px #d0d0d0;
					margin-left: 8px;
					margin-bottom: 3px;
				}
			}
		}

		.single-school {
			&::after {
				display: none !important;
			}
		}

		.school-logo {
			width: 30px;
			border-radius: 50%;
			margin-right: 10px;
			margin-bottom: 5px;
			vertical-align: middle;
		}

		.school-item {
			display: flex;
			align-items: center;

			img {
				width: 30px;
				margin-right: 15px;
			}
		}
	}
</style>
