<template>
	<view>
		<!-- Custom Nav Bar -->
		<view class="custom-nav-bar" :class="{ 'android-nav': isAndroid }">
			<view class="status-bar" :style="{ height: statusBarHeight + 'px' }"></view>
			<view class="nav-content">
				<view class="left-icon" @click="back">
					<image class="back-icon" src="/static/image/common/iphone-back.png" />
				</view>
				<view class="title">关于本机</view>
				<view class="right-placeholder"></view>
			</view>
		</view>

		<!-- Placeholder to push content down -->
		<view class="nav-placeholder" :style="{ height: statusBarHeight + 74 + 'px' }"></view>

		<view class="info-container">
			<block v-for="(group, groupIndex) in listData" :key="groupIndex">
				<!-- Group Header (Optional) -->
				<view v-if="group.groupTitle" class="group-header">
					<text class="header-text">{{ group.groupTitle }}</text>
				</view>

				<!-- Group Items -->
				<view class="info-group">
					<view class="info-item" v-for="(item, itemIndex) in group.items" :key="item.id"
						:class="{ 'no-border': itemIndex === group.items.length - 1 }"
						@click="handleEdit(groupIndex, itemIndex)">
						<text class="item-label">{{ item.label }}</text>
						<view class="item-value-box">
							<text class="item-value" v-if="item.value !== undefined">{{ item.value }}</text>
							<!-- <view class="chevron"></view> -->
							<image class="chevron" v-if="item.hasArrow"
								src="/static/image/common/about-iphone-right.png">
							</image>
						</view>
					</view>
				</view>
			</block>
		</view>

		<!-- Custom Modal -->
		<view class="custom-modal-mask" v-if="isModalVisible" @click="closeModal">
			<view class="custom-modal" @click.stop>
				<view class="modal-header">
					<text class="modal-title">{{ modalTitle }}</text>
				</view>
				<view class="modal-body">
					<input class="modal-input" v-model="modalInputValue" :placeholder="modalPlaceholder"
						cursor-spacing="20" />
				</view>
				<view class="modal-footer">
					<view class="modal-btn cancel-btn" @click="closeModal">取消</view>
					<view class="modal-btn confirm-btn" @click="confirmModal">确定</view>
				</view>
			</view>
		</view>
		<ZdySafeBottom bgColor="#f0f3f8"/>
	</view>
	<!-- 水印 -->
	<view v-if="$isVip()">
		<watermark dark="light" source="uni_alipay_shopping_about_iphone" />
		<liu-drag-button :canDocking="false"
			@clickBtn="$goRechargePage('watermark', 'uni_alipay_shopping_about_iphone')">
			<image src='/static/lottie/watermark.gif' mode="widthFix" style="width:94px;height:74px;" ></image>
		</liu-drag-button>
	</view>
</template>

<script setup>
import { ref, onMounted, getCurrentInstance } from 'vue';
import { util } from '@/utils/common.js'
import { onShow, onLoad, onPageScroll } from '@dcloudio/uni-app'
const { proxy } = getCurrentInstance();

import ZdySafeBottom from '@/components/safeBottom/safeBottom.vue'
const CACHE_KEY = 'about_iphone_data';

// Removed scroll logic, styling is now fully CSS-driven

const defaultData = [
	{
		groupTitle: '',
		items: [
			{ id: 'name', label: '名称', value: '胡英俊的iPhone', hasArrow: true },
			{ id: 'iosVersion', label: 'iOS版本', value: '26.4.2', hasArrow: true },
			{ id: 'modelName', label: '型号名称', value: 'iPhone 17 Pro Max', hasArrow: false },
			{ id: 'modelNumber', label: '型号', value: 'MG8W4CH/A', hasArrow: false },
			{ id: 'serialNumber', label: '序列号', value: 'J5YQ2R5F8R', hasArrow: false }
		]
	},
	{
		groupTitle: '',
		items: [
			{ id: 'warranty', label: '有限保修', value: '到期日期：2026/12/13', hasArrow: true }
		]
	},
	{
		groupTitle: '',
		items: [
			{ id: 'songs', label: '歌曲', value: '0', hasArrow: false },
			{ id: 'videos', label: '视频', value: '456', hasArrow: false },
			{ id: 'photos', label: '照片', value: '6,568', hasArrow: false },
			{ id: 'apps', label: '应用程序', value: '64', hasArrow: false },
			{ id: 'capacity', label: '总容量', value: '2 TB', hasArrow: false },
			{ id: 'available', label: '可用容量', value: '1.56 TB', hasArrow: false }
		]
	},
	{
		groupTitle: '',
		items: [
			{ id: 'wifi', label: '无线局域网地址', value: '87:5F:4D:48:DF:36', hasArrow: false },
			{ id: 'bluetooth', label: '蓝牙', value: '87:5F:4D:2B:DF:68', hasArrow: false },
			{ id: 'firmware', label: '调制解调器固件', value: '1.55.25', hasArrow: false },
			{ id: 'seid', label: 'SEID', value: '', hasArrow: true },
			{ id: 'carrierLock', label: '运营商锁', value: '无SIM卡限制', hasArrow: false }
		]
	},
	{
		groupTitle: '主号',
		items: [
			{ id: 'primaryNetwork', label: '网络', value: '中国移动全球通', hasArrow: false },
			{ id: 'primaryCarrier', label: '运营商', value: '中国移动 69.0', hasArrow: false },
			{ id: 'primaryIMEI', label: 'IMEI', value: '35 756481 6466451 3', hasArrow: false },
			{ id: 'primaryICCID', label: 'ICCID', value: '45632144856512347896', hasArrow: false }
		]
	},
	{
		groupTitle: '个人',
		items: [
			{ id: 'personalNetwork', label: '网络', value: '中国电信', hasArrow: false },
			{ id: 'personalCarrier', label: '运营商', value: '中国电信 69.0', hasArrow: false },
			{ id: 'personalIMEI', label: 'IMEI', value: '35 756481 6466451 3', hasArrow: false },
			{ id: 'personalICCID', label: 'ICCID', value: '45632144856512347896', hasArrow: false }
		]
	},
	{
		groupTitle: '',
		items: [
			{ id: 'trustSettings', label: '证书信任设置', value: '', hasArrow: true }
		]
	}
];

const listData = ref([]);
const statusBarHeight = ref(0);
const isAndroid = ref(false);

onShow(() => {
	// #ifdef APP-PLUS&&!APP-HARMONY
	util.setAndroidSystemBarColor('#F2F1F6')
	setTimeout(() => {
		plus.navigator.setStatusBarStyle("dark");
	}, 500);
	// #endif

})

onLoad(() => {
	proxy.$apiUserEvent('all', {
		type: 'event',
		key: 'ios-about-phone',
		prefix: '.uni.other.',
		value: '设置-关于本机'
	})
})

onMounted(() => {
	const systemInfo = uni.getSystemInfoSync();
	statusBarHeight.value = systemInfo.statusBarHeight || 0;

	if (systemInfo.osName === 'android' || systemInfo.platform === 'android') {
		isAndroid.value = true;
	}

	const cached = uni.getStorageSync(CACHE_KEY);
	if (cached) {
		try {
			listData.value = JSON.parse(cached);
		} catch (e) {
			listData.value = JSON.parse(JSON.stringify(defaultData));
		}
	} else {
		listData.value = JSON.parse(JSON.stringify(defaultData));
	}
});

const back = () => {
	uni.navigateBack();
};

const isModalVisible = ref(false);
const modalTitle = ref('');
const modalPlaceholder = ref('');
const modalInputValue = ref('');
let currentEditGroupIndex = -1;
let currentEditItemIndex = -1;

const handleEdit = (groupIndex, itemIndex) => {
	const item = listData.value[groupIndex].items[itemIndex];

	currentEditGroupIndex = groupIndex;
	currentEditItemIndex = itemIndex;
	modalTitle.value = `修改${item.label}`;
	modalPlaceholder.value = `请输入新的${item.label}`;
	modalInputValue.value = item.value || '';
	isModalVisible.value = true;
};

const closeModal = () => {
	isModalVisible.value = false;
};

const confirmModal = () => {
	if (currentEditGroupIndex !== -1 && currentEditItemIndex !== -1) {
		listData.value[currentEditGroupIndex].items[currentEditItemIndex].value = modalInputValue.value;
		uni.setStorageSync(CACHE_KEY, JSON.stringify(listData.value));
	}
	isModalVisible.value = false;
};
</script>

<style lang="less" scoped>
.custom-nav-bar {
	opacity: .97;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 999;
	background: linear-gradient(180deg, rgba(242, 242, 246, 0.5) 0%, rgba(242, 242, 246, 0) 100%);
	backdrop-filter: saturate(220%) blur(14px);
	-webkit-backdrop-filter: saturate(220%) blur(14px);
	-webkit-mask-image: linear-gradient(180deg, rgba(242, 242, 246, 0.5) 0%, rgba(242, 242, 246, 0) 100%);
	mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) calc(100% - 50rpx), rgba(0, 0, 0, 0) 100%);

	.nav-content {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 10rpx 26rpx 50rpx;
	}

	.left-icon,
	.right-placeholder {
		width: 86rpx;
		display: flex;
		align-items: center;
	}

	.title {
		flex: 1;
		text-align: center;
		font-size: 32rpx;
		font-weight: 500;
		color: #1A1A1A;
	}
}

/* 安卓手机降级：取消复杂的渐变、滤镜与遮罩，直接使用纯色 */
.custom-nav-bar.android-nav {
	opacity: 1 !important;
	background: #F2F1F6 !important;
	backdrop-filter: none !important;
	-webkit-backdrop-filter: none !important;
	mask-image: none !important;
	-webkit-mask-image: none !important;

	.nav-content {
		padding-bottom: 10rpx !important;
	}
}

.nav-placeholder {
	width: 100%;
	padding-top: 146rpx;
}

/* .blur-nav removed */

.back-icon {
	box-shadow: 0rpx 0rpx 20rpx 0rpx #E1E1E6;
	border: 2rpx solid #FFFFFF;
	border-radius: 50%;
	width: 86rpx;
	height: 86rpx;
}

.info-container {
	padding: 30rpx;
	padding-top: 0;
	padding-bottom: 60rpx;
}

.info-group {
	background-color: #FFFFFF;
	border-radius: 48rpx;
	margin-bottom: 64rpx;
}

.info-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-left: 30rpx;
	margin-right: 30rpx;
	border-bottom: 0.5px solid #E4E4E4;
	line-height: 32rpx;
	height: 100rpx;
}

.info-item.no-border {
	border-bottom: none;
}

.item-label {
	font-size: 32rpx;
	color: #1A1A1A;
}

.item-value-box {
	display: flex;
	align-items: center;
}

.item-value {
	font-size: 32rpx;
	color: #8A8A8A;
	font-weight: 400;
}

.chevron {
	width: 24rpx;
	height: 24rpx;
	margin-left: 12rpx;
}

.group-header {
	padding: 0 0 10rpx 30rpx;
}

.header-text {
	font-size: 32rpx;
	line-height: 32rpx;
	margin-bottom: 16rpx;
	color: #85858A;
	font-weight: 500;
}

.custom-modal-mask {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0, 0, 0, 0.4);
	z-index: 999;
	display: flex;
	justify-content: center;
	align-items: center;
}

.custom-modal {
	width: 600rpx;
	background-color: #FFFFFF;
	border-radius: 48rpx;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.modal-header {
	padding: 40rpx 30rpx 30rpx;
	text-align: center;
}

.modal-title {
	font-size: 34rpx;
	color: #1A1A1A;
	font-weight: 500;
}

.modal-body {
	padding: 0 40rpx 40rpx;
}

.modal-input {
	background-color: #F2F1F6;
	height: 80rpx;
	border-radius: 20rpx;
	padding: 0 20rpx;
	font-size: 32rpx;
	color: #1A1A1A;
}

.modal-footer {
	display: flex;
	border-top: 0.5px solid #E4E4E4;
	height: 100rpx;
}

.modal-btn {
	flex: 1;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 32rpx;
}

.cancel-btn {
	color: #8A8A8A;
	border-right: 0.5px solid #E4E4E4;
}

.confirm-btn {
	color: #007AFF;
	font-weight: 500;
}
</style>
<style>
page {
	background-color: #F2F1F6;
}
</style>