<template>
	<el-dialog
		class="setting"
		v-model="showDialog"
		align-center
		:show-close="false"
		width="70rem"
		style="border-radius: 2rem; padding: 3.8rem; --el-dialog-padding-primary: 1rem"
	>
		<template #header="{ close }">
			<div class="setting-header">
				<div class="title">{{ $t('Home.setting') }}</div>
				<span class="close" @click="close">
					<svg-icon name="close" size="12" color="#000" />
				</span>
			</div>
		</template>
		<div class="setting-box">
			<div class="left">
				<div
					v-for="v in navs"
					:key="v.icon"
					:class="{ active: nav === v.icon }"
					@click="nav = v.icon"
				>
					<span class="icon"><svg-icon :name="v.icon" size="18" color="#000" /></span>
					<span class="label">{{ v.label }}</span>
				</div>
			</div>
			<div class="view">
				<component :is="navs.find((v) => v.icon === nav).component" />
			</div>
		</div>
	</el-dialog>
</template>

<script setup lang="ts">
	import General from './General.vue'
	import Profile from './Profile.vue'
	import LearnMore from './LearnMore.vue'
	import MyEvent from '@/utils/myEvent'
	import { computed, ref, onBeforeUnmount, shallowRef } from 'vue'
	import { useRoute, useRouter } from 'vue-router'
	import { useI18n } from 'vue-i18n'
	const { t: $t } = useI18n()
	const route = useRoute()
	const router = useRouter()
	const showDialog = ref(false)
	const openSetting = () => {
		showDialog.value = true
	}
	MyEvent.add('openSettingDialog', openSetting)
	onBeforeUnmount(() => {
		MyEvent.remove('openSettingDialog', openSetting)
	})

	const nav = ref('setting')
	const navs = shallowRef([
		{ icon: 'setting', label: $t('Home.general'), component: General },
		{ icon: 'profile', label: $t('Home.profile'), component: Profile },
		{ icon: 'learn-more', label: $t('Home.learnMore'), component: LearnMore }
	])
</script>
 
<style lang="less" scoped>
	.setting-header {
		margin-top: 0.2rem;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-bottom: 3.3rem;
		border-bottom: 0.1rem solid rgba(0, 0, 0, 0.1);
		> .title {
			font-family: Semibold;
			font-size: 1.6rem;
			color: #000;
		}
	}
	.setting-box {
		width: 100%;
		height: 50rem;
		display: flex;
		> .left {
			margin-top: 1.8rem;
			> div {
				width: 16.4rem;
				height: 3.4rem;
				margin-bottom: 0.3rem;
				display: flex;
				align-items: center;
				// justify-content: center;
				cursor: pointer;
				&.active {
					background: rgba(0, 0, 0, 0.04);
					border-radius: 1rem;
				}
				> .icon {
					margin: 0 1rem;
				}
				> .label {
					color: #000;
					font-size: 1.4rem;
				}
			}
		}
		> .view {
			margin-left: 3.5rem;
			flex: 1;
			overflow-y: auto;
			&::v-deep(> div) {
				display: flex;
				align-items: center;
				justify-content: space-between;
				min-height: 6rem;
				padding: 1rem 0;
				border-bottom: 0.1rem solid rgba(0, 0, 0, 0.1);
				&:last-child {
					border-bottom: none;
				}
				> .value,
				> .label {
					font-size: 1.4rem;
					color: #000;
				}
			}
		}
	}
</style>
