<template>
	<page-container title="关于" :showBack="true">
		<view class="about-container">
			<image class="app-icon" src="" mode="aspectFit"
				@click="handleIconClick"></image>
			<view class="app-info">
				<view class="app-name">{{ $config.getAppSetting('app_name') }}</view>
				<view class="app-version">Version：{{ version }}</view>

			</view>

			<view v-if="isTestMode" class="test-mode-container">
				<!--测试模式显示的内容-->
				<view class="test-mode-content">
					<view class="test-mode-title">
						<text>测试模式已激活</text>
					</view>
					<view class="test-mode-item">
						<text>用户Id: {{ userinfo.id || '未知' }}</text>
					</view>
					<view class="test-mode-item">
						<text>用户UId: {{ userinfo.uid || '未知' }}</text>
					</view>
					<view class="test-mode-item">
						<text>用户类型: {{ userinfo.ut }}</text>
					</view>
					<view class="test-mode-item">
						<text>当前域名: {{ domain || '未获取' }}</text>
					</view>
					<view class="test-mode-item">
						<text>日志状态: {{ logEnabled ? '已开启' : '已关闭' }}</text>
					</view>

					<view class="test-mode-item">
						<view class="button-group">
							<button class="test-button log-button" @click="enableLog">开启日志</button>
							<button class="test-button log-button" @click="disableLog">关闭日志</button>
						</view>
					</view>
					<view class="test-mode-item">
						<button class="test-button" @click="loginOther">登录账号</button>
					</view>
					<view class="test-mode-item">
						<button class="test-button" @click="resetTestMode">退出测试模式</button>
					</view>
				</view>
			</view>
		</view>
	</page-container>
</template>

<script>
import PageContainer from '@/components/page-container/page-container.vue'
import { getUserTest } from '@/common/server/order'

export default {
	components: {
		PageContainer
	},
	data() {
		return {
			userinfo: null,
			clickCount: 0,
			lastClickTime: 0,
			isTestMode: false,
			logEnabled: false,
			version: '',
			domain: ''
		}
	},
	onLoad() {
		this.load();

	},
	methods: {
		async load() {
			this.version = this.$platform.getVersion();
			// 获取域名信息
			try {
				// #ifdef H5
				this.domain = window.location.hostname;
				// #endif
			} catch (e) {
				console.error('获取域名失败:', e);
			}

			const userinfo = uni.getStorageSync('userinfo');
			if (userinfo) {
				this.userinfo = userinfo;
			}

			// 检查测试模式缓存
			if (this.userinfo != null && this.userinfo.ut == 2) {

				// 从缓存中读取测试模式状态
				const testMode = uni.getStorageSync('test_mode_status');
				if (testMode) {
					this.isTestMode = true;
					console.log("从缓存恢复测试模式");
				}

				// 读取日志状态
				const logStatus = uni.getStorageSync('log_status');
				if (logStatus) {
					this.logEnabled = true;
					console.log("日志已开启");
				}
			}
		},
		handleIconClick() {
			if (this.userinfo && this.userinfo.ut == 2) {
				const now = new Date().getTime();

				// 如果是首次点击或者超过2秒重置计数
				if (this.clickCount === 0 || now - this.lastClickTime > 2000) {
					this.clickCount = 1;
					this.lastClickTime = now;
				} else {
					// 在2秒内点击
					this.clickCount++;

					// 如果点击次数达到5次
					if (this.clickCount >= 5) {
						uni.showToast({
							title: '已进入测试模式',
							icon: 'none'
						});
						this.clickCount = 0;
						this.isTestMode = true; // 设置进入测试模式状态

						// 保存测试模式状态到缓存
						uni.setStorageSync('test_mode_status', true);
					}
				}

				this.lastClickTime = now;
			}
		},
		resetTestMode() {
			this.isTestMode = false;

			// 如果日志开启状态，需要同时关闭日志
			if (this.logEnabled) {
				this.logEnabled = false;
				this.$platform.closeDeb();
				uni.removeStorageSync('log_status');
				console.log("退出测试模式时关闭日志");
			}

			// 清除测试模式缓存
			uni.removeStorageSync('test_mode_status');

			uni.showToast({
				title: '已退出测试模式',
				icon: 'none'
			});
		},
		enableLog() {
			this.logEnabled = true;
			this.$platform.startDeb();
			uni.setStorageSync('log_status', true);
			console.log("日志开启成功");
			uni.showToast({
				title: '日志已开启',
				icon: 'none'
			});
		},
		disableLog() {
			this.logEnabled = false;
			this.$platform.closeDeb();
			uni.removeStorageSync('log_status');
			console.log("日志关闭成功");
			uni.showToast({
				title: '日志已关闭',
				icon: 'none'
			});
		},
		loginOther() {
			uni.showModal({
				title: '请输入账号id或者uid',
				content: '',
				placeholderText: '请输入账号uid',
				editable: true,
				success: async function (res) {
					if (res.confirm) {
						console.log('用户点击确定', res.content);
						if (res.content == "") {
							uni.showToast({
								title: '请输入账号id或者uid',
								icon: 'none'
							});
							return;
						}

						const data = await getUserTest(res.content);
						if (data == null || data.data == "") {
							uni.showToast({
								title: '账号不存在',
								icon: 'none'
							});
							return;
						}
						console.log('获取账号token', data);
						let token = data.data;
						uni.setStorageSync('token', token);
						uni.removeStorageSync('userinfo');
						// uni.removeStorageSync('test_mode_status');
						uni.switchTab({
							url: '/pages/shouye/index'
						});
					} else if (res.cancel) {
						console.log('用户点击取消');
					}
				}
			});
		}
	}
}
</script>

<style lang="scss">
.about-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 20px;

	.app-icon {
		width: 108px;
		height: 108px;
		margin-top: 20vh;
		border-radius: 20px;
	}

	.app-info {
		margin-top: 20px;
		text-align: center;

		.app-name {
			font-size: 18px;
			font-weight: bold;
			margin-bottom: 10px;
		}

		.app-version {
			font-size: 14px;
			color: #666;
			margin-bottom: 5px;
		}
	}

	.test-mode-container {
		margin-top: 30px;
		border: 1px dashed #ff6600;
		border-radius: 8px;
		padding: 15px;
		width: 80%;

		.test-mode-content {
			width: 100%;
		}

		.test-mode-title {
			text-align: center;
			font-weight: bold;
			font-size: 16px;
			color: #ff6600;
			margin-bottom: 15px;
		}

		.test-mode-item {
			margin: 10px 0;
			font-size: 14px;
		}

		.button-group {
			display: flex;
			justify-content: space-between;
		}

		.log-button {
			width: 48%;
			margin: 0;
		}

		.test-button {
			margin-top: 15px;
			background-color: #ff6600;
			color: white;
			font-size: 14px;
		}
	}
}
</style>