<template>
	<div>
		<div class="label">User Name</div>
		<div class="value">张三</div>
	</div>
	<div>
		<div class="label">Email</div>
		<div class="value">zhangsan@example.com</div>
	</div>
	<div>
		<div class="label">Language</div>
		<dropdown-menu v-model="locale" :list="langs" @change="changeLang" />
	</div>
	<div>
		<div class="label">Log out on this device</div>
		<button class="logout-btn" @click="logout">Log out</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 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: 3.7rem;
		width: 9.6rem;
		border-radius: 3.7rem;
		border: none;
		background-color: #ff7a51;
		color: #fff;
		font-size: 1.4rem;
	}
</style>
