<template>
	<div class="page_container">

		<van-nav-bar>

		</van-nav-bar>

		<view class="w-[100%] h-[98px] rounded-md bg-white flex items-center pl-4 pr-2 mx-auto ">
			<Avatar :size="62" :src="userStore.storeSelfInfo.faceURL" :desc="userStore.storeSelfInfo.nickname" />
			<view class="id_row flex justify-between items-start h-[62px] flex-col flex-1 ml-2">
				<text class="nickname">{{ userStore.storeSelfInfo.nickname }}</text>
				<view class="flex items-center" @click="copyUserID">
					<text class=" text-sub-text text-sm">账号：{{ userStore.storeSelfInfo.userID }}</text>
					<img style="width: 16px; height: 16px;margin-left:5px;margin-top:-5px" :src="copy_icon" mode="" />
				</view>
			</view>

			<view class="flex flex-row items-center" @click="$router.push('selfOrGroupQr')">
				<img class="w-[18px] h-[18px]" :src="qr_code" alt="" />
				<img class="w-[24px] h-[24px]" :src="back" alt="" />
			</view>
		</view>

		<div class="w-[100%] mx-auto mt-[10px]  rounded-md">
			<div v-for="(menu, idx) in profileMenus1" :key="idx"
				class="flex bg-white items-center justify-between p-4 position mb5" @click="menuClick(menu.route)">
				<div class="flex">
					<img width="22" :src="menu.icon" alt="" />
					<span class="ml-3">{{ menu.title }}</span>
				</div>
				<img :src="back" width="18" alt="back">
				<div class="line"></div>
			</div>
			<div v-for="(menu, idx) in profileMenus" :key="idx"
				class="flex bg-white items-center justify-between p-4 position" @click="menuClick(menu.route)">
				<div class="flex">
					<img width="22" :src="menu.icon" alt="" />
					<span class="ml-3">{{ menu.title }}</span>
				</div>
				<img :src="back" width="18" alt="back">
				<div class="line"></div>
			</div>
		</div>

	</div>
</template>

<script name="profile" setup lang='ts'>
	import Avatar from '@/components/Avatar/index.vue';
	import qr_code from '@assets/images/profile/qr_code.png'
	import info from '@assets/images/profile/info.png'
	import settings from '@assets/images/profile/settings.png'
	import about from '@assets/images/profile/about.png'
	import logout from '@assets/images/profile/logout.png'
	import back from '@assets/images/profile/back.png'
	import copy_icon from '@assets/images/profile/copy.png'
	import clipboard3 from 'vue-clipboard3'

	import {
		showConfirmDialog,
		showToast
	} from 'vant';
	import useUserStore from '@/store/modules/user';
	import {
		useClipboard
	} from '@vueuse/core';

	const {
		copy,
		isSupported
	} = useClipboard();
	const {
		t,
		locale
	} = useI18n()

	const profileMenus1 = [{
		icon: info,
		title: t("profileMenu.personalInformation"),
		route: 'selfInfoDetails'
	}]
	const profileMenus = [{
			icon: settings,
			title: t("profileMenu.accountSetting"),
			route: 'accountSettings'
		},
		{
			icon: about,
			title: t("profileMenu.aboutUs"),
			route: 'about'
		},
		{
			icon: logout,
			title: t("profileMenu.logOut"),
		},
	]


	watch(locale, () => {
		profileMenus1[0].title = t("profileMenu.personalInformation");
		profileMenus[0].title = t("profileMenu.accountSetting");
		profileMenus[1].title = t("profileMenu.aboutUs");
		profileMenus[2].title = t("profileMenu.logOut");
	});

	const router = useRouter()
	const userStore = useUserStore()

	const menuClick = (route ? : string) => {
		if (route) {
			router.push(route)
		} else {
			tryLogout()
		}
	}
	const {
		toClipboard
	} = clipboard3();
	const copyUserID = async () => {
		await toClipboard(userStore.storeSelfInfo.userID);
		showToast(t('messageTip.copySuccess'));
	}



	const tryLogout = () => {
		showConfirmDialog({
			message: t('messageTip.tryLogout'),
			beforeClose: (action: string) => {
				return new Promise((resolve) => {
					if (action !== 'confirm') {
						resolve(true);
						return
					}
					userStore.userLogout()
						.finally(() => {
							resolve(true)
							router.push("/login");
						})
				})
			}
		}).catch(() => {})
	}
</script>

<style lang='scss' scoped>
	.nickname {
		font-weight: 800;
		font-size: 1.36rem;
		color: #181818;
	}

	.position {
		position: relative;
	}

	.mb5 {
		margin-bottom: 0.52rem;
	}

	.line {
		width: 21.37rem;
		height: 1px;
		background-color: #E6E6E6;
		position: absolute;
		bottom: 0;
		right: 0;
	}
</style>