<template>
	<div class="schoolArea">
		<div class="allView" 
		:class="{ active: activeSchool == schList.map(e=> e.children).flat().map(e=> e.schoolid).join(',') }" 
		@click="cutS('all')">
			<img style="height: 22px;width: 22px;object-fit: cover;" 
			:src="activeSchool == schList.map(e=> e.children).flat().map(e=> e.schoolid).join(',') ?require('../assets/img/schoolb.svg') : require('../assets/img/school.svg')" alt="">
			<div>集团总览</div>
		</div>

		<div v-if="fromL.admin.school">
			<div
				class="priSchBox"
				v-for="(i, index) in schList"
				:key="index + 'a'"
			>
				<div class="primarySch" @click="cutS(item.schoolid)">
					<img src="../assets/img/jth.svg" style="margin-right: 8px;height: 20px;width: 20px;object-fit: cover;" alt="" />
					<div>{{ i.menuName }}</div>
				</div>
				<div class="priSchArea">
					<div
						class="schArea"
						@click="cutS(item)"
						v-for="(item, index) in i.children"
						:key="index"
						:class="{ active: activeSchool == item.schoolid }"
					>
						{{ item.name }}
					</div>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
import { mapGetters } from "vuex";

export default {
	props: ["schId","schOrg",'schList'],
	data() {
		return {
			activeSchool: "",
			schorg:''
		};
	},
	computed: {
		...mapGetters(["fromL",'userinfo']),
	},
	watch: {
		schId(newValue) {
			this.activeSchool = newValue;
		},
	},
	methods: {
		cutS(val) {
			console.log('cuts',val);
			let data = {}
			
			if (val == 'all') {
				let k = this.schList.map(e=> e.children).flat().map(e=> e.schoolid).join(',')
				data = { schoolid:k, orgid :''}
			}else{
				data = val
			}
			console.log('data',data);


			this.activeSchool = data.schoolid;
			this.schorg = data.orgid
			this.$emit("cutSch",{ oid: data.schoolid, org :data.orgid});
		},
	},
	mounted() {
		this.activeSchool = this.schId;
		this.schorg = this.schOrg;
	},
};
</script>
<style scoped>
.schoolArea {
	/* max-width: 192px;
    min-width: 192px; */
	min-height: 600px;
	width: 240px;
	display: flex;
	flex-direction: column;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
	border-radius: 10px;
	padding: 19px 13px;
	box-sizing: border-box;
	gap: 8px;
	background: #fff;
}
.allView {
	display: flex;
	gap: 8px;
	cursor: pointer;
	font-size: 16px;
	align-items: center;
	padding: 7px 16px;
	border-radius: 6px;
	box-sizing: border-box;
}
.primarySch {
	display: flex;
	padding: 16px;
	padding-bottom: 4px;
}
.priSchArea {
	margin: 8px 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.schArea {
	width: 100%;
	height: 36px;
	display: flex;
	align-items: center;
	border-radius: 6px;
	padding: 7px 16px;
	padding-left: 44px;
	box-sizing: border-box;
	font-size: 14px;
	cursor: pointer;
}
.allView_icon {
	background: url("../assets/img/zl.svg") no-repeat;
	width: 18px;
	height: 18px;
	display: inline-block;
	background-size: contain;
	margin-right: 8px;
}
.active {
	background: #0560FD;
	color: #fff;
}
</style>
