<template>
	<div>
		<div class="label">{{ $t('Home.userProfile') }}</div>
		<el-tooltip
			class="box-item"
			effect="dark"
			:content="`${$t('Home.remainingNum')} ${remainingNum}`"
			placement="top"
		>
			<div class="profile">
				<img :src="userInfo?.avatar" />
				<span class="edit" @click="onProfileEdit">
					<svg-icon name="profile-edit" size="11" />
				</span>
			</div>
		</el-tooltip>
	</div>
	<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>
	<clip-dialog ref="clipDialogRef" />
</template>

<script setup lang="ts">
	import { computed, ref, nextTick, inject, onMounted } from 'vue'
	import { useRouter } from 'vue-router'
	import dropdownMenu from '@/components/dropdown-menu.vue'
	import { useUserInfoStore } from '@/stores'
	import { useI18n } from 'vue-i18n'
	import { uploadImage } from '@/api/upload'
	import { UpdateUserAvatar, getAvatarLimit } from '@/api/user'
	import clipDialog from '@/components/clipDialog.vue'
	import { fileToBase64, base64Tofile } from '../../../components/Canvas/tools/tools'
	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 remainingNum = ref(0)
	const clipDialogRef = ref<typeof clipDialog>()
	const changeLang = (value: string) => {
		locale.value = value
		localStorage.setItem('language', value)
		nextTick(() => {
			router.go(0)
		})
	}
	const logout = () => {
		userInfoStore.logOut()
	}
	const getAvatarLimitNum = ()=>{
		getAvatarLimit().then((res:any) => {
			if (res) {
				remainingNum.value = res
			}
		})	
	}
	const onProfileEdit = () => {
		// MyEvent.emit('openProfileEditDialog')
		const input = document.createElement('input')
		input.type = 'file'
		input.accept = 'image/png, image/jpeg, image/jpg'
		input.addEventListener('change', async (e) => {
			const file = e.target.files[0]
			let base64Img = await fileToBase64(file)
			clipDialogRef.value?.open(base64Img).then((base64: string)=>{
				const fileData = base64Tofile(base64,file.name)
				const formData = new FormData()
				formData.append('avatar', fileData)
				UpdateUserAvatar(formData).then((res) => {
					userInfoStore.updateUserInfo({avatar: res})
					getAvatarLimitNum()
				})
			})
		})
		input.click()
	}
	onMounted(()=>{
		getAvatarLimitNum()
	})
</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;
	}
	.profile {
		width: 6rem;
		height: 6rem;
		position: relative;
		> img {
			width: 100%;
			height: 100%;
			border-radius: 50%;
			object-fit: cover;
		}
		> .edit {
			position: absolute;
			bottom: 0;
			right: 0;
			width: 2.3rem;
			height: 2.3rem;
			border-radius: 50%;
			background-color: #fff;
			box-shadow: 0px 1px 4px 0px #1a0f011f;
			display: flex;
			align-items: center;
			justify-content: center;
			cursor: pointer;
		}
	}
</style>
