<template>
	<div>
		<div class="label">{{ $t('Home.userName') }}</div>
		<div class="value">{{ userInfo?.username || '------' }}</div>
	</div>
	<div>
		<div class="label">{{ $t('Home.email') }}</div>
		<div class="value">{{ userInfo?.email || '------' }}</div>
	</div>
	<div>
		<div class="label">{{ $t('Home.language') }}</div>
		<dropdown-menu v-model="locale" :list="langs" @change="changeLang" />
	</div>
	<div>
		<div class="label">{{ $t('Home.logoutDevice') }}</div>
		<button class="logout-btn" @click="logout">{{ $t('Home.logout') }}</button>
	</div>
</template>

<script setup lang="ts">
	import { computed, ref, nextTick, inject } from 'vue'
	import { useRouter } from 'vue-router'
	import dropdownMenu from '@/components/dropdown-menu.vue'
	import { useUserInfoStore } from '@/stores'
	import { useI18n } from 'vue-i18n'
	const router = useRouter()
	const { locale } = useI18n()
	const userInfoStore = useUserInfoStore()
	const userInfo = computed(() => userInfoStore.state.userInfo)
	const langs = ref([
		{ label: 'English', value: 'ENGLISH' },
		{ label: '中文', value: 'CHINESE_SIMPLIFIED' }
	])
	const changeLang = (value: string) => {
		locale.value = value
		localStorage.setItem('language', value)
		nextTick(() => {
			router.go(0)
		})
	}
	const logout = () => {
		userInfoStore.logOut()
	}
</script>
 
<style lang="less" scoped>
	.logout-btn {
		cursor: pointer;
		height: 3rem;
		width: 7.7rem;
		border-radius: 3.7rem;
		border: none;
		background-color: #ff7a51;
		color: #fff;
		font-size: 1.2rem;
	}
</style>
