<template>
	<view class="page">
		<view class="header-area">
			<view class="status-bar"></view>
			<uni-nav-bar title="我的积分" left-icon="left" @clickLeft="goBack" backgroundColor="transparent" :border="false"
				color="#ffffff" :iconStyle="{ color: '#ffffff' }">
			</uni-nav-bar>
			<view class="points-display">
				<text class="points-num">{{ totalPoints }}</text>
			</view>
		</view>

		<!-- 三个功能入口 -->
		<view class="entry-card">
			<view class="entry-item" v-for="(item, index) in entryList" :key="index" @click="goPage(item)">
				<image :src="item.icon" class="entry-icon" mode="aspectFit" />
				<text class="entry-text">{{ item.title }}</text>
			</view>
		</view>

		<!-- 虚拟兑换 -->
		<view class="virtual-exchange">
			<text class="virtual-title">虚拟兑换</text>
		</view>
		<view class="section-header">
			<view class="section-line"></view>
			<text class="section-title">热门虚拟权益服务</text>
			<view class="section-line"></view>
		</view>

		<!-- 人气兑换商品区域 -->
		<view class="goods-card">
			<uni-section title="人气兑换" type="line"></uni-section>
			<view class="goods-grid">
				<view class="goods-item" v-for="(item, index) in goodsList" :key="index">
					<image :src="item.image" class="goods-img" mode="aspectFill" />
					<text class="goods-name">{{ item.name }}</text>
					<text class="goods-desc">{{ item.desc }}</text>
					<text class="goods-points">{{ item.points }}分</text>
				</view>
			</view>
			<view class="goods-more" @click="goMore">
				<text class="more-text">更多积分兑换</text>
				<text class="more-arrow">></text>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { ref, onMounted } from 'vue'
	import { getPointsBalance } from '/pageSubPack/api/apiSub.js'

	const totalPoints = ref(780)

	const entryList = ref([{
		title: '积分商城',
		icon: 'https://wuye.ckdzkj.com/images/propertyImgs/pointsMall.png',
		url: '/pageSubPack/my/myPointsMall'
	}, {
		title: '积分明细',
		icon: 'https://wuye.ckdzkj.com/images/propertyImgs/pointsRecord.png',
		url: '/pageSubPack/my/myPointsRecord'
	}, {
		title: '积分订单',
		icon: 'https://wuye.ckdzkj.com/images/propertyImgs/pointsOrder.png',
		url: '/pageSubPack/my/myPointsOrder'
	}])

	const goodsList = ref([
		{ id: 1, name: '植物精油', desc: '温和无刺激 下单即赠试用装', points: 6000, image: 'https://via.placeholder.com/200x200/4CAF50/FFF?text=植物' },
		{ id: 2, name: '肯德基香辣劲脆鸡腿堡电子', desc: '下单即赠试用装', points: 6000, image: 'https://via.placeholder.com/200x200/FF5722/FFF?text=KFC' },
		{ id: 3, name: '植物精油', desc: '温和无刺激 下单即赠试用装', points: 6000, image: 'https://via.placeholder.com/200x200/4CAF50/FFF?text=植物' },
		{ id: 4, name: '肯德基香辣劲脆鸡腿堡电子', desc: '下单即赠试用装', points: 4000, image: 'https://via.placeholder.com/200x200/FF5722/FFF?text=KFC' },
		{ id: 5, name: '植物精油', desc: '温和无刺激 下单即赠试用装', points: 6000, image: 'https://via.placeholder.com/200x200/4CAF50/FFF?text=植物' },
		{ id: 6, name: '肯德基香辣劲脆鸡腿堡电子', desc: '下单即赠试用装', points: 4000, image: 'https://via.placeholder.com/200x200/FF5722/FFF?text=KFC' }
	])

	const getBalance = async () => {
		try {
			const res = await getPointsBalance()
			if (res.code === 200 && res.data) {
				totalPoints.value = res.data.balance || res.data.points || 0
			}
		} catch (err) {
			console.error('获取积分余额失败：', err)
		}
	}

	const goPage = (item) => {
		uni.navigateTo({
			url: item.url
		})
	}

	const goBack = () => {
		uni.navigateBack({ delta: 1 })
	}

	const goMore = () => {
		uni.navigateTo({
			url: '/pageSubPack/my/myPointsMall'
		})
	}

	onMounted(() => {
		getBalance()
	})
</script>

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

	/* ===== 顶部蓝色区域 ===== */
	.header-area {
		background: #2E59FD;
		padding-bottom: 40rpx;
	}

	.status-bar {
		width: 100vw;
		height: 46px;
	}

	.points-display {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 30rpx 0 20rpx;
	}

	.points-num {
		font-size: 64rpx;
		font-weight: 700;
		color: #ffffff;
		line-height: 1.1;
		letter-spacing: 4rpx;
	}

	/* ===== 三个功能入口 ===== */
	.entry-card {
		display: flex;
		justify-content: space-around;
		align-items: center;
		background: #ffffff;
		border-radius: 20rpx;
		margin: -30rpx 30rpx 0;
		padding: 36rpx 0;
		box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
		position: relative;
		z-index: 2;
		overflow: hidden;
	}

	.entry-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		flex: 1;

		&:active {
			opacity: 0.7;
		}
	}

	.entry-icon {
		width: 72rpx;
		height: 72rpx;
		margin-bottom: 16rpx;
	}

	.entry-text {
		font-size: 28rpx;
		color: #333;
		font-weight: 500;
	}

	/* ===== 虚拟兑换 ===== */
	.virtual-exchange {
		display: flex;
		justify-content: center;
		padding: 40rpx 0 30rpx;
	}

	.virtual-title {
		font-size: 32rpx;
		color: #000000;
		font-weight: 500;
	}

	/* ===== 热门虚拟权益服务（横线 + 文字 + 横线） ===== */
	.section-header {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 0 110rpx;
		margin-bottom: 30rpx;
	}

	.section-line {
		flex: 1;
		height: 1rpx;
		background: #cccccc;
	}

	.section-title {
		font-size: 28rpx;
		color: #999999;
		margin: 0 24rpx;
		white-space: nowrap;
		flex-shrink: 0;
	}

	/* ===== 人气兑换商品卡片 ===== */
	.goods-card {
		background: #ffffff;
		border-radius: 32rpx;
		margin: 0 30rpx;
		padding: 20rpx 20rpx 30rpx;
	}

	.goods-grid {
		display: flex;
		flex-wrap: wrap;
		margin: 0 -10rpx;
	}

	.goods-item {
		width: calc(33.33% - 20rpx);
		margin: 0 10rpx 20rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.goods-img {
		width: 210rpx;
		height: 210rpx;
		border-radius: 16rpx;
		background: #f0f0f0;
		margin-bottom: 12rpx;
	}

	.goods-name {
		font-size: 26rpx;
		color: #333;
		font-weight: 500;
		text-align: left;
		line-height: 1.3;
		width: 100%;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.goods-desc {
		font-size: 22rpx;
		color: #999;
		text-align: left;
		line-height: 1.3;
		margin-top: 6rpx;
		width: 100%;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.goods-points {
		font-size: 32rpx;
		font-weight: 600;
		color: #FF8F40;
		margin-top: 8rpx;
		text-align: left;
		width: 100%;
	}

	/* ===== 更多积分兑换 ===== */
	.goods-more {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 30rpx 0 10rpx;
		border-top: 1rpx solid #eee;
	}

	.more-text {
		font-size: 28rpx;
		color: #333333;
	}
</style>
