<template>
	<div class="my-account">
		<div class="header">
			<h1 class="title">
				<span class="iconfont icon-tubiao-"></span>
				<span>My account</span>
			</h1>
		</div>
		<div class="content" v-if="!token">
			<Login />
			<Register />
		</div>
		<div class="content" v-else>
			<AccountInfo />
		</div>
	</div>
</template>
<script setup lang="ts">
	import { computed } from 'vue'
	import Login from './login.vue'
	import Register from './register.vue'
	import AccountInfo from './account-info.vue'
	import { useUserInfoStore } from '@/stores/userInfo'
	const userInfoStore = useUserInfoStore()
	const token = computed(() => userInfoStore.state.token)
</script>

<style scoped lang="less">
	.my-account {
		background-color: #f9f9f9;
		> .header {
			border-top: var(--main-header-height, 85px) solid #000;
			background-color: #666;
			padding: 32px 0;
			color: #fff;
			margin-bottom: 32px;
			> h1 {
				display: flex;
				align-items: center;
				justify-content: center;
				height: 80px;
				> span {
					font-size: 40px;
					font-weight: 400;
				}
			}
		}
		> .content {
			max-width: 1200px;
			margin: 0 auto;
			padding: 0 15px 80px;
			display: flex;
			align-items: flex-start;
			gap: 60px;
			> * {
				flex: 1;
			}
			animation: opacity-in 0.3s linear both;
		}
		@media (max-width: 800px) {
			> .content {
				flex-direction: column;
				gap: 30px;
				> * {
					width: 100%;
				}
			}
		}
	}
</style>
