<template>
	<view class="logoff-container">
		<!-- 警告信息 -->
		<view class="warning-section">
			<text class="warning-text">当前账号是飞鹤集团旗下产品使用统一账号,注销后,以下平台的手机号也会同步注销,请谨慎操作。</text>
		</view>

		<!-- 关联平台列表 -->
		<view class="platform-section">
			<image class="platform-image" :src="$baseUrl + 'homepage/Q3Res/More_appList.png'" mode="aspectFit"></image>
		</view>

		<!-- 注销前提条件 -->
		<view class="prerequisites-section">
			<text class="prerequisites-title"> 在您提交的注销申请生效前,平台将进行以下验证,以保证您的账号安全。</text>
			<view class="prerequisites-list">
				<text class="prerequisites-item">1、当前账号处于安全状态,无被盗、被封风险。</text>
				<text class="prerequisites-item">2、账号内没有尚未完成的订单和服务。</text>
				<text class="prerequisites-item">3、账号无任何纠纷,包括投诉举报或被投诉举报。</text>
			</view>
		</view>

		<!-- 底部操作区域 -->
		<view class="action-section">
			<view class="apply-btn" @tap="applyLogoff" :class="{ disabled: !agreed }">申请注销</view>

			<view class="agreement-section" @tap="toggleAgreement">
				<view class="checkbox" :class="{ checked: agreed }">
					<text v-if="agreed" class="checkmark">✓</text>
				</view>
				<text class="agreement-text">我已阅读并同意</text>
				<text class="agreement-link" @tap.stop="openAgreement">《星妈会账号注销须知》</text>
			</view>
		</view>
	</view>
</template>

<script>
import { doTerminate } from '@/api/user.js';
import { jump, JumpType } from '../../utils';

export default {
	data() {
		return {
			agreed: false
		}
	},
	methods: {
		// 切换同意状态
		toggleAgreement() {
			this.agreed = !this.agreed;
		},

		// 申请注销
		applyLogoff() {
			if (!this.agreed) {
				uni.showToast({
					title: '请先同意注销须知',
					icon: 'none'
				});
				return;
			}

			uni.showModal({
				title: '确认注销',
				content: '注销后将无法恢复，确定要继续吗？',
				confirmText: '确定注销',
				cancelText: '取消',
				success: (res) => {
					if (res.confirm) {
						this.navigateToLogoff();
					}
				}
			});
		},

		// 跳转到注销页面
		navigateToLogoff() {
			uni.showLoading({
				title: '正在处理注销申请...'
			});

			doTerminate().then(res => {
				uni.hideLoading();
				if (res.ok) {
					uni.showToast({
						title: '注销申请已提交',
						icon: 'success'
					});
					// 可以跳转到登录页面或首页
					setTimeout(() => {
						uni.reLaunch({
							url: '/pages/index/index'
						});
					}, 1500);
				} else {
					uni.showToast({
						title: res.message || '注销申请失败',
						icon: 'none'
					});
				}
			}).catch(err => {
				uni.hideLoading();
				console.error('注销接口调用失败:', err);
				uni.showToast({
					title: '网络错误，请重试',
					icon: 'none'
				});
			});
		},

		// 打开注销须知
		openAgreement() {
			jump({
				type: JumpType.H5,
				url: 'https://mom.feihe.com/member/mine/personalset/accountKnow'
			})
		}
	}
}
</script>

<style scoped>
.logoff-container {
	padding: 30rpx;
	background-color: #f8f8f8;
	min-height: 100vh;
}

.warning-section {
	margin-bottom: 30rpx;
	width: 618rpx;
	margin-left: auto;
	margin-right: auto;
}

.warning-text {
	font-size: 28rpx;
	color: #333333;
	line-height: 1.5;
}

.platform-section {
	border-radius: 16rpx;
	padding: 30rpx;
	margin-bottom: 30rpx;
	width: 618rpx;
	margin-left: auto;
	margin-right: auto;
}

.platform-image {
	width: 618rpx;
	height: 638rpx;
}

.prerequisites-section {
	margin-bottom: 60rpx;
	width: 618rpx;
	margin-left: auto;
	margin-right: auto;
}

.prerequisites-title {
	font-size: 28rpx;
	color: #333333;
	line-height: 1.5;
	margin-bottom: 20rpx;
}

.prerequisites-title::before {
	content: '*';
	color: #ff4444;
	margin-right: 8rpx;
}

.prerequisites-list {
	margin-left: 20rpx;
}

.prerequisites-item {
	display: block;
	font-size: 26rpx;
	color: #666666;
	line-height: 1.6;
	margin-bottom: 10rpx;
}

.action-section {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	background-color: #ffffff;
	padding: 30rpx;
	box-shadow: 0 -2rpx 8rpx rgba(0, 0, 0, 0.1);
}

.apply-btn {
	width: 100%;
	height: 88rpx;
	background-color: #D3A458;
	color: #ffffff;
	font-size: 32rpx;
	font-weight: 500;
	border-radius: 44rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 20rpx;
}

.apply-btn.disabled {
	background-color: #cccccc;
	color: #999999;
}

.agreement-section {
	display: flex;
	align-items: center;
	justify-content: center;
}

.checkbox {
	width: 32rpx;
	height: 32rpx;
	border: 2rpx solid #ddd;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 12rpx;
}

.checkbox.checked {
	background-color: #D3A458;
	border-color: #D3A458;
}

.checkmark {
	color: #ffffff;
	font-size: 20rpx;
	font-weight: bold;
}

.agreement-text {
	font-size: 24rpx;
	color: #666666;
}

.agreement-link {
	font-size: 24rpx;
	color: #007AFF;
	text-decoration: underline;
}
</style>
