<template>
	<div class="base-area-select">
		<div v-if="!areaList.length"></div>
		<Dropdown @on-click="onAreaSelect" v-else>
			<!-- <img class="school-logo" src="https://teammodelstorage.blob.core.chinacloudapi.cn/0-public/image/%E5%B0%91%E5%9F%8E%E6%A0%A1%E5%BE%BD.jpg" /> -->
			<a href="javascript:void(0)"
				:class="['base-user-post']">
				{{ areaList[curAreaIndex].name }}
				<Icon type="ios-arrow-down"></Icon>
			</a>
			<DropdownMenu slot="list">
				<div v-for="(item,index) in areaList" :key="index">
					<DropdownItem :name="index">
						<div class="school-item">
							<span>{{ item.name }}</span>
						</div>
					</DropdownItem>
				</div>
			</DropdownMenu>
		</Dropdown>
	</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				curSchool: {
					logo: ''
				},
				defaultLogo: '',
				user: {
					schools: []
				},
				joinSchools: [],
				areaList:[],
				curAreaIndex:0
			}
		},
		created() {
			this.defaultLogo = require('@/assets/icon/default_school.png')
			// 获取本地存储中的 用户信息
			let user = JSON.parse(decodeURIComponent(localStorage.user_profile, "utf-8"));
			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
			this.areaList = user.areas
			this.onAreaSelect(0)

		},
		methods: {
			onAreaSelect(val){
				this.curAreaIndex = val
				sessionStorage.setItem('areaId',this.areaList[this.curAreaIndex].areaId)
				sessionStorage.setItem('areaName',this.areaList[this.curAreaIndex].name)
				this.$EventBus.$emit('onGlobalLoading', true)
				this.$EventBus.$emit('onSwitchArea')
				setTimeout(() => {
					this.$EventBus.$emit('onGlobalLoading', false)
				}, 500)
				this.$router.push({
					name: 'area'
				})
			},
		}
	}
</script>

<style lang="less">
	.base-area-select {
		margin-left: 20px;
		font-size: 20px;
		font-weight: bold;
		color: #fff;
		// font-family: 'NotoSerif', '微软正黑体', 'Microsoft JhengHei UI', 'Microsoft JhengHei', Sans-serif;
		.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>
