<template>
	<view class="mine">
		<!-- 头部个人信息 -->
		<view class="header">
			<view class="user-info" @click="navTo('/pages/mine/sett')">
				<up-avatar size="120rpx" :src="user.avatar" />
				<view class="user-detail" v-if="user.nickName || user.username">
					<text class="nickname">{{ user.nickName || user.username }}</text>
					<text class="phone">{{ user.phone || user.mobile }}</text>
				</view>
				<view class="user-detail" v-else>
					<text class="nickname">您还未登录</text>
				</view>
			</view>
			<view class="qr-code" v-if="isInvest">
				<image @click="lookImg([user.qrcode])" :src="user.qrcode" mode="aspectFit" />
				<text>邀请码</text>
			</view>
		</view>

		<!-- 余额积分 -->
		<view class="balance-wrap">
			<view class="balance-item" @click="">
				<text class="amount">{{ user.balance || '0' }}</text>
				<text class="label">余额</text>
			</view>
			<view v-if="!isInvest" class="balance-item" @click="navTo('/pages/mine/signIn')">
				<text class="amount">{{ user.points || '0' }}</text>
				<text class="label">积分</text>
			</view>
			<view v-else class="balance-item" @click="navTo('/pageInvest/facility/facility')">
				<text class="amount">{{ user.deviceNum || '0' }}</text>
				<text class="label">充电桩</text>
			</view>
		</view>

		<!-- 我的爱车 -->
		<view class="vehicle-section" v-if="!isInvest">
			<view class="section-header">
				<text style="font-weight: bold">我的爱车</text>
				<text class="more" @click="navTo('/pages/mine/car/car')">全部车辆 ></text>
			</view>

			<view class="car-plate" v-if="user.licensePlate" @click="navTo('/pages/mine/car/car')">
				<image style="width: 198rpx; height: 56rpx; position: absolute; top: 0; left: 0" src="/static/image/carNum.png"></image>
				<text>{{ user.licensePlate }}</text>
			</view>

			<view v-else class="add-vehicle" @click="navTo('/pages/mine/car/add')">
				<view class="add-btn">
					<image src="/static/icon/add.png" mode="aspectFit" />
				</view>
				<text>添加我的爱车</text>
			</view>
			<view class="vehicle-status">
				<view class="status-item">
					<image src="/static/icon/mine/parking.png" mode="aspectFit" />
					<text>停车定位</text>
				</view>
				<view class="status-item">
					<image src="/static/icon/mine/charging.png" mode="aspectFit" />
					<text>充电状态</text>
				</view>
				<view class="status-item">
					<image src="/static/icon/mine/location.png" mode="aspectFit" />
					<text>精确定位</text>
				</view>
			</view>
		</view>
		<!-- 投资者功能菜单 -->
		<view class="menu-grid" v-if="isInvest">
			<view class="menu-item" v-for="(item, index) in menuItemsIsInvest" :key="index" @click="handleMenuClick(item)">
				<image :src="item.icon" mode="aspectFit" />
				<text>{{ item.name }}</text>
			</view>
		</view>

		<!-- 功能菜单 -->
		<view class="menu-grid">
			<view class="menu-item" v-for="(item, index) in menuItems" :key="index" @click="handleMenuClick(item)">
				<image :src="item.icon" mode="aspectFit" />
				<text>{{ item.name }}</text>
			</view>
		</view>

		<cc-myTabbar :tabBarShow="4" />
	</view>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { onShow } from '@dcloudio/uni-app';
import { userInfo } from '@/api/api.js';
import { useNav } from '@/hooks/useNav.js';
import { userHook } from '@/hooks/userInfo.js';
import { lookImg } from '@/utils/fun.js';

const { navTo } = useNav();
const { user, isInvest } = userHook();

const menuItemsIsInvest = ref([
	{ name: '我的订单', icon: '/static/icon/mine/order.png', path: '/pages/order/order' },
	{ name: '商城', icon: '/static/icon/mine/shop.png', path: '/pageInvest/shop/shop' },
	{ name: '我的银行卡', icon: '/static/icon/mine/travel.png', path: '/pages/bank/bank' },
	{ name: '切换账号', icon: '/static/icon/mine/switch.png', path: '/pageInvest/login/login' }
]);

const menuItems = ref([
	{ name: '我的订单', icon: '/static/icon/mine/order.png', path: '/pages/order/order' },
	{ name: '收藏电站', icon: '/static/icon/mine/station.png', path: '/pages/station/favorite' },
	{ name: '客服中心', icon: '/static/icon/mine/service.png', path: '/pages/service/index' },
	{ name: '一号多充', icon: '/static/icon/mine/multi.png', path: '/pages/mine/multipleNumbers' },
	{ name: '隐私', icon: '/static/icon/mine/privacy.png', path: '/pages/privacy/index' },
	{ name: '我的银行卡', icon: '/static/icon/mine/travel.png', path: '/pages/bank/bank' },
	{ name: '投资者平台', icon: '/static/icon/mine/switch.png', path: '/pageInvest/login/login' },
	{ name: '退出登录', icon: '/static/icon/mine/logout.png', path: '/pages/account/logout' }
]);

const handleMenuClick = (item) => {
	if (item.path) {
		navTo(item.path);
		return;
	}
};

onMounted(async () => {});

onShow(async () => {
	isInvest.value = uni.getStorageSync('isInvest') || false;
	if (isInvest.value) {
		menuItems.value[6].name = '充电模式';
	} else {
		menuItems.value[6].name = '投资者平台';
	}
});
</script>

<style lang="scss" scoped>
.mine {
	min-height: 100vh;
	background-color: #f7f7f7;

	.header {
		padding: 30rpx;
		background: #fff;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.user-info {
			display: flex;
			align-items: center;
			gap: 20rpx;

			.user-detail {
				.nickname {
					font-size: 32rpx;
					font-weight: 500;
					color: #333;
					display: block;
					margin-bottom: 10rpx;
				}
				.phone {
					font-size: 28rpx;
					color: #666;
				}
			}
		}

		.qr-code {
			display: flex;
			flex-direction: column;
			align-items: center;
			text-align: center;
			image {
				width: 88rpx;
				height: 88rpx;
				margin-bottom: 6rpx;
			}
			text {
				font-size: 24rpx;
				color: #666;
			}
		}
	}

	.balance-wrap {
		display: flex;
		justify-content: space-around;
		background: #fff;
		padding: 0rpx 0 30rpx;

		.balance-item {
			text-align: center;
			.amount {
				font-size: 40rpx;
				font-weight: 600;
				color: #333;
				display: block;
				margin-bottom: 8rpx;
			}
			.label {
				font-size: 26rpx;
				color: #666;
			}
		}
	}

	.vehicle-section {
		margin: 20rpx;
		background: #fff;
		border-radius: 12rpx;
		padding: 30rpx;

		.section-header {
			display: flex;
			justify-content: space-between;
			margin-bottom: 30rpx;

			text {
				font-size: 30rpx;
				color: #333;
			}
			.more {
				color: #666;
				font-size: 26rpx;
			}
		}

		.add-vehicle {
			display: flex;
			align-items: center;
			gap: 20rpx;
			margin-bottom: 30rpx;

			.add-btn {
				width: 80rpx;
				height: 80rpx;
				background: #f5f5f5;
				border-radius: 50%;
				display: flex;
				align-items: center;
				justify-content: center;

				image {
					width: 40rpx;
					height: 40rpx;
				}
			}

			text {
				font-size: 28rpx;
				color: #666;
			}
		}

		.vehicle-status {
			display: flex;
			justify-content: space-around;
			border-top: 1rpx solid #f7f7f7;
			padding-top: 20rpx;

			.status-item {
				display: flex;
				align-items: center;
				text-align: center;
				image {
					width: 32rpx;
					height: 32rpx;
					margin-right: 12rpx;
				}
				text {
					font-size: 24rpx;
					color: #666;
				}
			}
		}
	}

	.menu-grid {
		margin: 20rpx;
		background: #fff;
		border-radius: 12rpx;
		padding: 30rpx;
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		gap: 30rpx;

		.menu-item {
			display: flex;
			flex-direction: column;
			align-items: center;
			gap: 10rpx;

			image {
				width: 48rpx;
				height: 48rpx;
			}
			text {
				font-size: 24rpx;
				color: #333;
			}
		}
	}
}

.car-plate {
	color: #333;
	font-weight: bold;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 198rpx;
	height: 56rpx;
	margin: 20rpx;
	text {
		position: relative;
		z-index: 99;
	}
}
</style>
