<template>
	<div style="height: 100%;  display: flex; flex-direction: column;">
		<div class="logo_main" v-if="logoShow&&logoPosition=='left'">
			<el-image class="logo_img" :src="url"></el-image>
			<div v-if="!collapse" class="logo_text">
				<span class="logo_text_detail">{{app.appName}} </span>
				<span class="logo_text_detail">{{app.subName}} </span>
			</div>
		</div>
		<el-scrollbar style=" height: 100%;  background-color:#304156">
			<el-menu class="el-menu-vertical-demo" :style="{  height: scrollHeight + 'px'}" :collapse="collapse"
				@select="onMenuSelect" @open="onOpen" :unique-opened="true" background-color="#304156"
				text-color="#BFCBD9" active-text-color="#1890FF">
				<SideMenuItem v-for="item in menuTree" :key="item.id" :menu="item"></SideMenuItem>
			</el-menu>
		</el-scrollbar>
	</div>
</template>
<script setup>
	import {
		ref,
		onMounted,
		getCurrentInstance,
		computed
	} from 'vue'
	const {
		proxy
	} = getCurrentInstance()

	import {
		useAppStore
	} from "@/stores/app"
	const app = useAppStore()
	import {
		useMenuStore
	} from "@/stores/menu"
	const menu = useMenuStore()
	import {
		useSettingsStore
	} from "@/stores/settings"
	const settings = useSettingsStore()


	import url from '@/public/images/logo.png'

	import SideMenuItem from '@/views/frame/SideMenuItem.vue'

	const logoShow = computed(() => settings.logoShow)
	const logoPosition = computed(() => settings.logoPosition)
	const collapse = computed(() => settings.collapse)

	const screenWidth = ref(document.body.clientWidth)
	const screenHeight = ref(document.documentElement.clientHeight)
	const scrollHeight = ref(document.documentElement.clientHeight - 60)
	// const scrollHeight = computed(() => {
	// 	return document.documentElement.clientHeight - 60
	// })


	const onMenuSelect = (index, indexPath) => {
		// console.log("onMenuSelect:" + index)
		//       this.$router.push(index)
		proxy.$router.push({
			path: index
		})
	}

	const onOpen = (index, indexPath) => {
		// console.log("onOpen:" + index)

		//       this.$router.push(index)
	}

	// const menuTree = ref([])
	const menuTree = computed(() => {
		return menu.menuTree
	})



	onMounted(() => {
		if (logoPosition.value == 'left') {
			scrollHeight.value = document.documentElement.clientHeight - 60
		} else {
			scrollHeight.value = document.documentElement.clientHeight
		}

		// menuTree.value = menu.menuTree
		// menuTree.value = [{text:'1',url:'1',children:[]}]
		// console.log('menuTree:::' + JSON.stringify(menuTree.value))
	})


	// import axios from '@/axios' 
	// import SideMenuItem from '@/views/frame/SideMenuItem.vue'
	// export default {
	//   data() {
	//     return {
	//       changeColor: '#e9f4ff',
	//       screenWidth: document.body.clientWidth,
	//       screenHeight: document.documentElement.clientHeight,
	//       scrollHeight: document.documentElement.clientHeight - 60,
	//       // url: require('@/public/images/logo.png'),
	//     }
	//   },
	//   components: {
	//     SideMenuItem
	//   },
	//   methods: {
	//     onMenuSelect: function(index, indexPath) {
	//       //console.log("onMenuSelect:"+index)
	//       this.$router.push(index)
	//     },
	//     onOpen: function(index, indexPath) {
	//       if (index.length == 3) {
	//         var url = 'framework/SysMenu/queryByMenuCode'
	//         var param = {
	//           code: index,
	//         }
	//         axios.get(url, param).then(response => {
	//           this.$store.commit('setSecName', '-' + response.data.data.menuName)
	//         });
	//       }
	//     }
	//   }, 
	//   mounted() { 
	//     if (this.logoPosition == 'left') {
	//       this.scrollHeight = document.documentElement.clientHeight - 60
	//     } else {
	//       this.scrollHeight = document.documentElement.clientHeight
	//     }
	//   }
	// }
</script>

<style>
	.el-menu-vertical-demo:not(.el-menu--collapse) {
		width: 200px;
		/* min-height: 600px; */

	}



	.logo_main {
		height: 60px;
		margin-right: 1px;
		background-color: #304156;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}

	.logo_img {
		width: 40px;
		height: 40px;
	}

	.logo_text {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.logo_text_detail {
		font-size: 16px;
		color: #ffffff;
	}
</style>