<template>
	<view class="content">
		<view class="one">
			<view class="left">
				<u-avatar :text="user.name" shape="square" fontSize="40" randomBgColor></u-avatar>
			</view>
			<view class="right" @tap="toLogin">
				<text>点击登录</text>
				<u-icon :bold="true" color="#000" name="arrow-right" size="18"></u-icon>
			</view>
		</view>
		<view class="two">
			<view class="list" v-for="(item, index) in $config.menuList" :key="index" @click="toCommon(item.route)">
				<view class="left">
					<view class="icon">
						<u-icon :name="item.icon" size="22"></u-icon>
					</view>
					<text class="title">{{item.title||'暂无'}}</text>
				</view>
				<view class="right">
					<u-icon name="arrow-right" size="20"></u-icon>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { getCurrentInstance, ref } from 'vue';
	//该依赖已内置不需要单独安装
	import { onLoad } from "@dcloudio/uni-app";
	// 请求接口
	const $api = getCurrentInstance()?.appContext.config.globalProperties.$api;
	const $config = getCurrentInstance()?.appContext.config.globalProperties.$config;
	// 基本信息
	const config = ref({});
	// 用户信息
	const user = ref({});
	onLoad(async () => {
		await searchConfig();
		await search();
	})
	// config信息
	const searchConfig = async () => {
		config.value = uni.getStorageSync('config');
	};
	// 查询
	const search = async () => {
	};
	// 登录
	const toLogin = () => {
		uni.navigateTo({
			url: `/pagesHome/login/index`
		})
	};
	// 公共跳转
	const toCommon = (e) => {
		// if (user.value && user.value._id) {
		if (e) {
			uni.navigateTo({
				url: `/${e}`
			})
		} else {
			try {
				uni.clearStorage();
				uni.reLaunch({
					url: '/pages/index/index'
				})
			} catch (e) { }
		}
		// } else {
		// 	uni.navigateTo({
		// 		url: `/pagesHome/login/index`
		// 	})
		// }
	};
</script>
<style lang="scss" scoped>
	.content {
		display: flex;
		flex-direction: column;
		width: 100vw;
		height: 100vh;

		.one {
			display: flex;
			align-items: center;
			padding: 0 8vw;
			height: 25vh;
			background: linear-gradient(to bottom, #2979ff, #ffffff);

			.left {
				.image {
					width: 50px;
					height: 50px;
					border-radius: 50px;
				}
			}

			.right {
				display: flex;
				align-items: center;
				margin: 0 0 0 3vw;
				font-size: var(--font16Size);
				font-weight: bold;
			}
		}

		.two {
			display: flex;
			flex-direction: column;
			padding: 2vw;
			margin: 2vw;
			border-radius: 10px;
			background-color: var(--mainColor);

			.list {
				display: flex;
				justify-content: space-between;
				padding: 4vw;
				border-bottom: 1px solid var(--f9Color);

				.left {
					display: flex;
					align-items: center;

					.icon {
						padding: 0 1vw 0 0;
					}

					.title {
						display: inline-block;
						font-size: var(--font14Size);
					}
				}

				.right {
					font-size: var(--font12Size);
					color: var(--f99Color);
				}
			}
		}
	}
</style>