<template>
	<view class="more-container">
		<!-- 内容区域 -->
		<view class="content">
			<view class="menu-list">
				<!-- <view class="menu-item" @tap="handleItemTap('modifyPhone')">
					<view class="menu-left">
						<view class="menu-icon">
							<image :src="$baseUrl + 'homepage/Q3Res/icon_phone.png'" mode="aspectFit"
								style="width: 40rpx; height: 40rpx;"></image>
						</view>
						<text class="menu-text">修改手机号</text>
					</view>
					<text class="arrow">›</text>
				</view> -->

				<!-- <view class="menu-item" @tap="handleItemTap('partnership')">
					<view class="menu-left">
						<view class="menu-icon">
							<image :src="$baseUrl + 'homepage/Q3Res/icon_yyhz.png'" mode="aspectFit"
								style="width: 40rpx; height: 40rpx;"></image>
						</view>
						<text class="menu-text">异业合作</text>
					</view>
					<image class="arrow" :src="$baseUrl + 'homepage/Q3Res/rightArrowBtn.png'" mode="aspectFit" />
				</view> -->

				<!-- <view class="menu-item" @tap="handleItemTap('feedback')">
					<view class="menu-left">
						<view class="menu-icon">
							<image :src="$baseUrl + 'homepage/Q3Res/icon_sug.png'" mode="aspectFit"
								style="width: 40rpx; height: 40rpx;"></image>
						</view>
						<text class="menu-text">意见反馈</text>
					</view>
					<image class="arrow" :src="$baseUrl + 'homepage/Q3Res/rightArrowBtn.png'" mode="aspectFit" />
				</view> -->

				<view class="menu-item" @tap="handleItemTap('userPolicy')">
					<view class="menu-left">
						<view class="menu-icon">
							<image :src="$baseUrl + 'homepage/Q3Res/icon_userzc.png'" mode="aspectFit"
								style="width: 40rpx; height: 40rpx;"></image>
						</view>
						<text class="menu-text">用户政策</text>
					</view>
					<image class="arrow" :src="$baseUrl + 'homepage/Q3Res/rightArrowBtn.png'" mode="aspectFit" />
				</view>

				<view class="menu-item" @tap="handleItemTap('privacyPolicy')">
					<view class="menu-left">
						<view class="menu-icon">
							<image :src="$baseUrl + 'homepage/Q3Res/icon_ysxy.png'" mode="aspectFit"
								style="width: 40rpx; height: 40rpx;"></image>
						</view>
						<text class="menu-text">隐私协议</text>
					</view>
					<image class="arrow" :src="$baseUrl + 'homepage/Q3Res/rightArrowBtn.png'" mode="aspectFit" />
				</view>

				<view class="menu-item cancel-account" @tap="handleItemTap('cancelAccount')">
					<view class="menu-left">
						<view class="menu-icon">
							<image :src="$baseUrl + 'homepage/Q3Res/icon_zxzh.png'" mode="aspectFit"
								style="width: 40rpx; height: 40rpx;"></image>
						</view>
						<text class="menu-text">注销账号</text>
					</view>
					<view class="cancel-text-container">
						<text class="cancel-text">注销后无法恢复</text>
						<image class="arrow" :src="$baseUrl + 'homepage/Q3Res/rightArrowBtn.png'" mode="aspectFit" />
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { jump, JumpType } from '../../utils';
import md from '../../md';

export default {
	data() {
		return {
			menuItems: [
				{
					id: 'modifyPhone',
					title: '修改手机号',
				},
				{
					id: 'partnership',
					title: '异业合作',
				},
				{
					id: 'feedback',
					title: '意见反馈',
				},
				{
					id: 'userPolicy',
					title: '用户政策',
				},
				{
					id: 'privacyPolicy',
					title: '隐私协议',
				},
				{
					id: 'cancelAccount',
					title: '注销账号',
					showHint: true,
					hint: '注销后无法恢复'
				}
			]
		}
	},
	onLoad() {
		// 页面加载时添加曝光埋点
		this.$nextTick(() => {
			this.initExposure();
		});
	},
	methods: {
		// 初始化曝光埋点
		initExposure() {
			// 为所有菜单项添加曝光埋点
			const menuNames = {
				modifyPhone: '修改手机号',
				partnership: '异业合作',
				feedback: '意见反馈',
				userPolicy: '用户政策',
				privacyPolicy: '隐私协议',
				cancelAccount: '注销账号'
			};

			Object.values(menuNames).forEach((menuName) => {
				md.sensorComponentLogTake({
					xcxComponentExposure: "true",
					pageName: "更多页",
					componentName: "更多",
					componentContent: menuName
				});
			});
		},

		// 处理菜单项点击
		handleItemTap(itemId) {
			console.log('点击了菜单项:', itemId)

			// 菜单项名称映射
			const menuNames = {
				modifyPhone: '修改手机号',
				partnership: '异业合作',
				feedback: '意见反馈',
				userPolicy: '用户政策',
				privacyPolicy: '隐私协议',
				cancelAccount: '注销账号'
			};

			// 添加点击埋点
			if (menuNames[itemId]) {
				md.sensorComponentLogTake({
					xcxComponentClick: "true",
					pageName: "更多页",
					componentName: "更多",
					componentContent: menuNames[itemId]
				});
			}

			// 根据不同的菜单项执行不同的操作
			switch (itemId) {
				case 'modifyPhone':
					// 跳转到修改手机号页面
					// uni.navigateTo({ url: '/pages/modifyPhone/index' })
					break
				case 'partnership':
					// 跳转到异业合作页面
					// uni.navigateTo({ url: '/pages/partnership/index' })
					jump({
						type: JumpType.H5,
						url: 'https://xingmahui.wjx.cn/vm/mZCydha.aspx'
					});
					break
				case 'feedback':
					// 跳转到意见反馈页面
					// uni.navigateTo({ url: '/pages/feedback/index' })
					jump({
						type: JumpType.H5,
						url: 'https://china-feihe.feishu.cn/share/base/form/shrcnXo3nSF0NFpHA68TIEhdzRb'
					});
					break
				case 'userPolicy':
					// 跳转到用户政策页面
					jump({
						type: JumpType.H5,
						url: 'https://secret.feihe.com/index.html'
					});
					break
				case 'privacyPolicy':
					// 跳转到隐私协议页面
					jump({
						type: JumpType.H5,
						url: 'https://secret.feihe.com/secret.html'
					});
					break
				case 'cancelAccount':
					// 跳转到注销账号页面
					// uni.navigateTo({ url: '/pages/cancelAccount/index' })
					uni.navigateTo({ url: '/v3/logoffConfirmPage/logoffConfirmPage' })
					break
				default:
					break
			}
		}
	}
}
</script>

<style scoped>
.more-container {
	height: 100vh;
	background-color: #f5f5f5;
	display: flex;
	flex-direction: column;
}


/* 内容区域 */
.content {
	padding: 40rpx 0;
	flex: 1;
}

/* 菜单列表 */
.menu-list {
	background-color: #ffffff;
	width: 682rpx;
	margin: 0 auto;
	border-radius: 24rpx;
	box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
}

/* 菜单项 */
.menu-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 34rpx 30rpx;
	border-bottom: 1rpx solid #f5f5f5;
}

.menu-item:last-child {
	border-bottom: none;
}

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

.menu-icon {
	width: 40rpx;
	height: 40rpx;
	margin-right: 20rpx;
	display: flex;
	align-items: center;
	justify-content: center;
}

.menu-text {
	font-size: 32rpx;
	color: #333333;
}

.arrow {
	width: 14rpx;
	height: 23rpx;
}

/* 注销账号特殊样式 */
.cancel-text-container {
	display: flex;
	align-items: center;
}

.cancel-text {
	font-size: 26rpx;
	color: #999999;
	margin-right: 30rpx;
}
</style>
