<template>
	<div class="pc-header">
		<!-- <div class="pc-header-left">
			
		</div>
		<div class="pc-header-right">
			<el-dropdown
				@command="handleChangeLanguage"
			>
				<span class="" style="margin-right: 20px;">
					{{ $t('app.language') }}
				</span>
				<template #dropdown>
					<el-dropdown-menu>
						<el-dropdown-item command="en-US">
							{{ $t('app.language.english') }}
						</el-dropdown-item>
						<el-dropdown-item command="zh-CN">
							{{ $t('app.language.chinese') }}
						</el-dropdown-item>
					</el-dropdown-menu>
				</template>
			</el-dropdown>
			<div class="" style="margin-right: 20px;">
				<el-avatar> {{ $t('app.user') }} </el-avatar>
			</div>
			<div class="">
				{{ $t('app.notification') }}
			</div>
		</div> -->
	</div>
</template>

<script setup>
	import { useLangStore } from '@/store/useLangStore.js'
	
	const handleChangeLanguage = (lang) => {
		const langStore = useLangStore()
		langStore.changeLanguage(lang)
	}
</script>

<style lang="scss" scoped>
	.pc-header {
		height: 64px;
		background-color: deepskyblue;
		padding: 0px 20px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		position: fixed;
		top: 0px;
		right: 0px;
		left: 200px;
		z-index: 999;
		box-sizing: border-box;
		
		.pc-header-right {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0px 20px;
		}
	}
</style>