﻿<template>
	<!-- 水印 -->
	<view v-if="$isVip()">
		<watermark dark="light" source="uni_alipay_finance" />
		<liu-drag-button :canDocking="false" @clickBtn="$goRechargePage('watermark', 'uni_alipay_finance')">
			<c-lottie ref="cLottieRef" :src='$watermark()' width="94px" height='74px' :loop="true"></c-lottie>
		</liu-drag-button>
	</view>
	<view class="container flex flex-column" @touchstart="handleTouchStart" @touchmove.stop.prevent="handleTouchMove"
		@touchend="handleTouchEnd">
		<!-- 下层信息盒子 -->
		<view class="main-info-container" :class="{ 'open': isOpen }"
			:style="{ 'padding-bottom': `${cardArrowHeight}px` }">
			<!-- 导航栏 placeholder -->
			<NavBar v-if="!selectedImage" bgColor="transparent" tipLayerType="finance-management-tip" isTipLayer
				tipLayerText="修改理财信息" :buttonGroup="buttonGroup" @button-click="clickTitlePopupButton">
				<view class="nav-bar flex-align-center h100">
					<view class="left flex-align-center">
						<image src="/static/image/finance-management/search/search-left.png"></image>
					</view>
					<view class="nav-bar-search flex-align-center flex-1">
						<image class="search-icon" src="/static/image/bill/bill-list/search-black.png" mode=""></image>
						<input type="text" class="search-input flex-1" :placeholder="financeInfo.searchText" />
						<view class="line h100"></view>
						<view class="search-button">搜索</view>
					</view>
					<view class="right flex-align-center">
						<image src="/static/image/finance-management/search/search-right.png"></image>
					</view>
				</view>
			</NavBar>
			<NavBar v-else title="拼图" bgColor="#EFEFEF" noBack @back="closeImage" isRightButton
				@right-click="confirmImage">
			</NavBar>

			<view class="total-money-box flex-align-center flex-justify-between">
				<!-- 总资产信息 -->
				<view class="revenue-box flex-1">
					<view class="total-money flex-align-center">
						<view class="total-money-title flex-align-center">
							<text>总资产(元)</text>
							<image class="eye-icon" src="/static/image/finance-management/eye.png"></image>
							<view class="flex-align-center" style="color: #A39797;font-size: 22rpx;">
								<image class="safe-icon" src="/static/image/finance-management/safe.png"></image>
								<text>免费升级保障</text>
							</view>
						</view>
						<view class="total-money-title flex-align-center">
							<text>昨日收益</text>
						</view>
					</view>
					<view class="total-money flex-align-center" style="margin-top: 10px;">
						<view class="total-money-value flex-align-center">
							<text class="alipay-font">{{ numberUtil.formatMoneyWithThousand(totalMoney) }}</text>
						</view>
						<view class="total-money-value flex-align-center">
							<text class="alipay-font">{{ yesterdayIncome > 0 ? "+" +
								numberUtil.formatMoneyWithThousand(yesterdayIncome) :
								numberUtil.formatMoneyWithThousand(yesterdayIncome)
							}}</text>
						</view>
					</view>
				</view>
				<view class="family-protection">
					<view class="total-money-title flex-align-center">
						<text>家庭保障</text>
					</view>
					<view class=" flex-align-end" style="margin-top: 10px;">
						<text class="value alipay-font">{{ financeInfo.familyProtection || 0 }}</text>
						<text class="text">份</text>
					</view>
				</view>
			</view>
			<!-- 财富信息 -->
			<view class="data-box">
				<view v-for="item in myAssets" :key="item.title">
					<view v-if="item.title" class="title second-color">{{ item.title }}</view>
					<view class="group-data flex-justify-between">
						<template v-for="subItem in item.items" :key="subItem.label">
							<view
								v-if="financeInfo[item.key][subItem.key].labelSub && (financeInfo[item.key][subItem.key].labelSub > 0 || financeInfo[item.key][subItem.key].type == 'text')"
								class="item flex-align-center flex-justify-between">
								<view class="flex-align-center">
									<text class="label primary-color">{{ subItem.label }}</text>
									<text v-if="financeInfo[item.key][subItem.key].type == 'text'"
										class="label-sub second-color">
										{{ formatTextWithNumber(financeInfo[item.key][subItem.key].labelSub) }}
									</text>
									<text v-else class="label-sub second-color">
										{{
											numberUtil.formatMoneyWithThousand(financeInfo[item.key][subItem.key].labelSub)
										}}</text>
								</view>

								<text v-if="financeInfo[item.key][subItem.key].value" class="value primary-color">{{
									financeInfo[item.key][subItem.key].value > 0 ? "+" +
										numberUtil.formatMoneyWithThousand(financeInfo[item.key][subItem.key].value) :
										numberUtil.formatMoneyWithThousand(financeInfo[item.key][subItem.key].value)
								}}</text>
							</view>
						</template>

						<view v-if="item.groupId == '1'" class="item flex-align-center flex-justify-between">
							<view class="flex-align-center">
								<text class="label primary-color">更多资产服务</text>
							</view>
							<text class="value primary-color">去看看</text>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 图片盒子 -->
		<view class="image-service-box flex-column"
			:style="{ top: topHeight + 'px', 'height': `calc(100vh - ${imageCardBoxtopHeight}px)`, transition: isDragging || !isReady ? 'none' : 'top 0.3s ease-out' }">
			<view class="card-arrow-box">
				<view class="arrow-box">
					<image @click="data.isOpen = !data.isOpen" class="arrow-icon"
						:src="`/static/image/finance-management/arrow-${isOpen ? 'up' : 'down'}.png`">
					</image>
				</view>

				<view class="card-box flex-column">

					<view class="wealth-card-box flex">
						<!-- 占位图片设置为透明 -->
						<image class="wealth-card-opacity0" src="/static/image/finance-management/v1/bg.png"
							mode="widthFix" @load="updateTopHeight" />
						<!-- 背景图片高度自适应 -->
						<image class="wealth-card"
							:src="`/static/image/finance-management/${financeInfo.vipLevel}/bg.png`" mode="widthFix" />

						<view class="card-info">
							<image class="logo"
								:src="`/static/image/finance-management/${financeInfo.vipLevel}/logo.png`"
								mode="scaleToFill" />
							<view class="name-box flex-align-center">
								<image class="card-holder-icon"
									:src="`/static/image/finance-management/${financeInfo.vipLevel}/card-holder.png`"
									mode="scaleToFill" />
								<view class="card-holder-name sacramento-font">{{ financeInfo.cardHolderName }}</view>
							</view>

						</view>
						<view class="enjoy-benefits flex-align-center">
							<text class="benefits-text">{{ financeInfo.benefitsText }}</text>
							<image class="arrow-icon"
								:src="`/static/image/finance-management/${financeInfo.vipLevel}/arrow.png`"></image>
						</view>
					</view>

					<view class="content-box">
						<view class="service-icons">
							<view class="service-icon" v-for="item in serviceIcons" :key="item.name">
								<image class="icon"
									:src="`/static/image/finance-management/service-icon/${item.icon}.png`"
									mode="scaleToFill" />
								<text class="name">{{ item.name }}</text>
							</view>
						</view>
					</view>
				</view>
			</view>

			<view v-if="!selectedImage" class="content flex-1 flex-column flex" @touchstart="clickHandleTouchStart"
				@touchend="clickHandleTouchEnd">
				<view v-if="financeInfo.bgImage" class="w100 h100" style="margin-top: -1px;">
					<image class="w100 h100" :src="financeInfo.bgImage" mode="widthFix">
					</image>
				</view>
				<view v-else class="flex-align-center flex-justify-center flex-column flex-1 w100 h100">
					<image style="width:92rpx; height: 92rpx;margin-top: 16rpx;"
						src="/static/image/common/upload-screenshot.png">
					</image>
					<text style="font-size: 36rpx;color: #1777FF;">长按替换真实截图</text>
				</view>
			</view>
			<view v-else class="scroll-image-box flex-1">
				<scroll-view class="image-box h100" style="width: 100%;" scroll-y :show-scrollbar="false"
					@scroll="onImageScroll">
					<image class="crop-image-target" style="width:100%;" :src="selectedImage" mode="widthFix"></image>
				</scroll-view>

				<view class="dashed-line-box">
					<view class="dashed-line-text">我是分割线</view>
				</view>
			</view>
			<canvas canvas-id="crop-canvas"
				style="position: fixed; left: -9999px; width: 750rpx; height: 100vh; pointer-events: none;"></canvas>

		</view>

		<!-- 底部导航栏 -->
		<view class="bottom-box"
			:class="`navigation-menu-${financeInfo.navigationMenuStyle}` + ($system == 'iOS' ? ' ios-bottom-box' : '')">
			<view class="bottom-item" v-for="item in navigationMenu" :key="item.name" @click="clickBottomItem(item)">
				<image
					:src="`/static/image/finance-management/navigation-menu/${financeInfo.navigationMenuStyle}/${item.icon}.png`">
				</image>
				<text>{{ item.name }}</text>
			</view>
		</view>
	</view>

	<!-- 样式选择弹窗 -->
	<uni-popup ref="stylePopup" type="center">
		<view class="popup-content">
			<view class="popup-title">选择底部导航样式</view>
			<view class="style-list">
				<view class="style-item" v-for="(item, index) in styleList" :key="index"
					@click="confirmStyleDialog(item.value)">
					<text>{{ item.label }}</text>
					<uni-icons v-if="financeInfo.navigationMenuStyle == item.value" type="checkmarkempty" size="20"
						color="#1777FF"></uni-icons>
				</view>
			</view>
			<view class="popup-btns">
				<view class="btn cancel" @click="closeStyleDialog">取消</view>
			</view>
		</view>
	</uni-popup>

	<!-- 修改搜索框提示弹窗 -->
	<uni-popup ref="searchTextPopup" type="center">
		<view class="popup-content">
			<view class="popup-title">修改搜索框提示</view>
			<view class="input-box">
				<input class="popup-input" v-model="tempSearchText" placeholder="请输入搜索框提示文字" />
			</view>
			<view class="popup-btns">
				<view class="btn cancel" @click="closeSearchTextDialog">取消</view>
				<view class="btn confirm" @click="confirmSearchTextDialog">确定</view>
			</view>
		</view>
	</uni-popup>

	<!-- 蒙层 -->
	<view v-if="showMask" class="mask" @click="closeMask">
		<image class="mask-icon" src="/static/image/common/mask-icon.png" mode="widthFix">
		</image>
	</view>
</template>

<script setup>
import NavBar from '@/components/nav-bar/nav-bar.vue'
import { imgLocal } from '@/utils/common.js';
import {
	ref,
	toRefs,
	reactive,
	onMounted,
	watch,
	computed,
	getCurrentInstance
} from 'vue'
import {
	onLoad,
	onReady,
	onShow
} from '@dcloudio/uni-app'
import {
	serviceIcons,
	navigationMenu,
	myAssets
} from '@/static/json/fortune.json'
import {
	numberUtil,
	util
} from '@/utils/common.js'
const instance = getCurrentInstance();
const { proxy } = instance

const buttonGroup = [{
	name: "编辑理财数据",
	click: () => {
		util.goPage('/pages/finance-management/edit/edit')
	}
}, {
	name: "切换导航栏样式",
	click: () => {
		openStyleDialog()
	}
}, {
	name: "选择理财图片样式",
	click: () => {
		util.goPage('/pages/finance-management/select-image/select-image')
	}
}, {
	name: "删除当前理财图片",
	click: () => {
		financeInfo.value.bgImage = ""
		uni.setStorageSync('financeInfo', financeInfo.value)
	}
}, {
	name: "修改搜索框提示",
	click: () => {
		openSearchTextDialog()
	}
}]

let defualtData = {
	benefitsText: '尊享礼遇18000元/年',
	cardHolderName: 'XiaoMing',
	vipLevel: "v3",
	navigationMenuStyle: "style-1",
	bgImage: "/static/image/finance-management/bg-style/style-1.png",
	familyProtection: "3",
	searchText: "小而美的基金",
	fortune: {
		yuebao: { value: 3.53, labelSub: "100000" },
		dingqi: { value: 50, labelSub: "100000" },
		jijin: { value: 5000, labelSub: "100000" },
		huangjin: { value: -300, labelSub: "100000" },
		yulingbao: { value: 20, labelSub: "100000" }
	},
	myAssets: {
		baoxian: { labelSub: "3份保单保障中", type: "text" }
	},
	myQuota: {
		huabei: { labelSub: "可用100000", type: "text" },
		jubei: { labelSub: "可用100000", type: "text" },
		beizhi: { labelSub: "可用100000", type: "text" },
		wangshangdai: { labelSub: "预计可借100000", type: "text" }
	}
}

const clickBottomItem = (item) => {
	console.log("clickBottomItem", item)
	if (item.name == "首页") {
		uni.navigateBack()
	}
}

onLoad(() => {
	// 理财页面埋点
	proxy.$apiUserEvent('all', {
		type: 'click',
		key: 'fortune',
		value: "理财"
	})
})

onReady(() => {
	statusBarHeight.value = uni.getSystemInfoSync().statusBarHeight;
	uni.createSelectorQuery().select('.total-money-box').boundingClientRect((data) => {
		console.log("total-money-box height: " + (data ? data.height : "null"));
		const initialH = data ? data.height + 44 + statusBarHeight.value : 44 + statusBarHeight.value;
		topHeight.value = initialH;
		minTop = initialH;
		imageCardBoxtopHeight.value = initialH;

		setTimeout(() => {
			isReady.value = true
		}, 200)
	}).exec()
})

onShow(async () => {
	defualtData.bgImage = await imgLocal.getLocalImage('finance-management/bg-style/style-1.png');
	console.log(defualtData.bgImage)

	financeInfo.value = {
		...defualtData,
		...uni.getStorageSync('financeInfo')
	}
	console.log("financeInfo.value", financeInfo.value)
	// #ifdef APP-PLUS
	util.setAndroidSystemBarColor(financeInfo.value.navigationMenuStyle == 'style-1' ? '#ffffff' : '#F8F8F8')
	setTimeout(() => {
		plus.navigator.setStatusBarStyle("light");
	}, 500)
	// #endif
})

const updateTopHeight = () => {
	setTimeout(() => {
		uni.createSelectorQuery().select('.card-arrow-box').boundingClientRect((data) => {
			console.log("card-arrow-box height: " + (data ? data.height : "null"));
			cardArrowHeight.value = data ? data.height - 20 : 0;
		}).exec()
	}, 500)
}

// 总资产
const totalMoney = computed(() => {
	let totalMoney = 0;
	for (const key in financeInfo.value.fortune) {
		if (!Object.prototype.hasOwnProperty.call(financeInfo.value.fortune, key)) continue;
		const element = financeInfo.value.fortune[key];
		totalMoney += Number(element.labelSub)
	}
	return totalMoney
})

// 昨日收益
const yesterdayIncome = computed(() => {
	let yesterdayIncome = 0;
	for (const key in financeInfo.value.fortune) {
		if (!Object.prototype.hasOwnProperty.call(financeInfo.value.fortune, key)) continue;
		const element = financeInfo.value.fortune[key];
		yesterdayIncome += Number(element.value)
	}
	return yesterdayIncome
})

// 家庭保障
const familyProtection = computed(() => {
	return parseInt(financeInfo.value.myAssets.baoxian.labelSub)
})


const scrollTop = ref(0)
const onImageScroll = (e) => {
	scrollTop.value = e.detail.scrollTop
}

const data = reactive({
	financeInfo: { ...defualtData },
	topHeight: 0,
	statusBarHeight: 0,
	cardArrowHeight: 0,
	imageCardBoxtopHeight: 0,
	isOpen: false,
	isDragging: false,
	isReady: false,
	selectedImage: '',
	showMask: false
})


let {
	financeInfo,
	topHeight,
	statusBarHeight,
	cardArrowHeight,
	imageCardBoxtopHeight,
	isOpen,
	isDragging,
	isReady,
	selectedImage,
	showMask
} = toRefs(data)


const formatTextWithNumber = (str) => {
	if (!str) return '';
	return str.replace(/(\d+(\.\d+)?)/g, (match) => {
		return match > 100 ? numberUtil.formatMoneyWithThousand(match) : match;
	});
}

let startY = 0;
let startTop = 0;
let minTop = 0;
let maxTop = 0;

// 监听 isOpen 变化来控制 topHeight
watch(() => isOpen.value, () => {
	updateHeightByState();
})

const handleTouchStart = (e) => {
	if (selectedImage.value) return
	isDragging.value = true;
	startY = e.touches[0].clientY;
	startTop = topHeight.value;

	// 如果未设置边界（或为了安全起见每次开始时），则计算边界
	if (!minTop || !maxTop) {
		const systemInfo = uni.getSystemInfoSync();
		const statusBar = systemInfo.statusBarHeight;

		// 创建查询以获取当前尺寸
		const query = uni.createSelectorQuery();
		query.select('.total-money-box').boundingClientRect();
		query.select('.main-info-container').boundingClientRect();
		query.exec(([totalMoneyBox, mainInfoContainer]) => {
			if (totalMoneyBox) {
				// 最小高度（关闭状态）：total-money-box 高度 + 导航栏 + 状态栏 - 卡片箭头偏移量
				minTop = totalMoneyBox.height + 44 + statusBar;
			}
		});
	}
}

const handleTouchMove = (e) => {
	if (selectedImage.value) return
	let currentY = e.touches[0].clientY;
	let delta = currentY - startY;
	let newTop = startTop + delta;

	// 如果为 0，让我们获取它们。
	if (minTop === 0 && !isOpen.value) minTop = startTop;
	if (maxTop === 0 && isOpen.value) maxTop = startTop;

	// 如果有值，则进行简单钳位
	if (minTop && newTop < minTop) newTop = minTop;
	if (maxTop && newTop > maxTop) newTop = maxTop;

	// 应用
	topHeight.value = newTop;
}

const updateHeightByState = () => {
	statusBarHeight.value = uni.getSystemInfoSync().statusBarHeight;
	if (isOpen.value) {
		// 打开状态：计算 main-info-container 高度
		uni.createSelectorQuery().select('.main-info-container').boundingClientRect((data) => {
			if (data) {
				const targetH = data.height - cardArrowHeight.value;
				topHeight.value = targetH;
				maxTop = targetH; // 更新 maxTop
			}
		}).exec()
	} else {
		// 关闭状态：计算 total-money-box 位置
		uni.createSelectorQuery().select('.total-money-box').boundingClientRect((data) => {
			if (data) {
				const targetH = data.height + 44 + statusBarHeight.value;
				topHeight.value = targetH;
				minTop = targetH; // 更新 minTop
			}
		}).exec()
	}
}


const handleTouchEnd = (e) => {
	if (selectedImage.value) return
	isDragging.value = false;
	let endY = e.changedTouches[0].clientY;
	let diff = endY - startY;

	let targetState = isOpen.value;

	// 判断滑动意图
	if (diff > 50) {
		targetState = true;
	} else if (diff < -50) {
		targetState = false;
	}

	// 如果状态改变，watch 会处理动画/高度更新
	if (targetState !== isOpen.value) {
		isOpen.value = targetState;
	} else {
		// 如果状态未改变，手动恢复高度（吸附回原位）
		updateHeightByState();
	}
}


// 长按事件定时器
let longPressTimer = null
const clickHandleTouchStart = (e) => {
	// 兼容iOS上滑HOME条，如果有底部安全区且触摸位置在底部安全区内，则不触发
	const systemInfo = uni.getSystemInfoSync()
	if (systemInfo.platform === 'ios' && systemInfo.safeAreaInsets?.bottom) {
		const clientY = e.touches[0].clientY
		const windowHeight = systemInfo.windowHeight
		// 如果触摸点在底部安全区范围内（通常是34px），则忽略
		if (clientY > windowHeight - systemInfo.safeAreaInsets.bottom) {
			return
		}
	}

	longPressTimer = setTimeout(() => {
		uni.vibrateShort()
		chooseImage()
	}, 1200) // 长按时间大于1s
}




// 选择图片
const chooseImage = () => {
	if (selectedImage.value) return
	uni.chooseImage({
		count: 1,
		sourceType: ['album'],
		success: (res) => {
			selectedImage.value = res.tempFilePaths[0]
			data.showMask = true
			setTimeout(() => {
				plus.navigator.setStatusBarStyle("dark");
			}, 500)
		}
	})
}

// 确认图片裁剪
const confirmImage = () => {
	uni.showLoading({
		title: '处理中...'
	})
	const query = uni.createSelectorQuery().in(instance)

	// 获取容器和图片信息
	query.select('.image-box').boundingClientRect()
	query.select('.crop-image-target').boundingClientRect()
	query.exec(res => {
		if (!res[0] || !res[1]) {
			uni.hideLoading()
			return
		}

		console.log('rects', res)
		const container = res[0] // 容器
		const image = res[1] // 图片实际渲染尺寸

		// 计算缩放比例 (渲染宽度 / 实际宽度 不准确，应该反过来用 图片原始宽/渲染宽?)
		// 这里更简单的方法是：canvas设为容器大小，把图片画进去
		// canvas drawImage 参数: img, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight

		// 获取图片原始尺寸
		uni.getImageInfo({
			src: selectedImage.value,
			success: (imgInfo) => {
				const scale = imgInfo.width / image.width // 图片 原始宽 / 渲染宽
				const sTop = scrollTop.value * scale // 原始图上的裁切起始Y
				const sHeight = container.height * scale // 原始图上的裁切高度

				// 因为是 widthFix，宽度就是原始图宽度（或裁切全宽）
				const sWidth = imgInfo.width

				// 设置画布尺寸 (使用像素值)
				// 注意：canvasContext绘制使用的是逻辑像素还是物理像素？通常需要考虑到 pixelRatio，
				// 但 uni-app canvas-id 方式通常对应逻辑像素(px)
				// 我们把 canvas 大小设为和容器显示一致
				const canvasW = container.width
				const canvasH = container.height

				const ctx = uni.createCanvasContext('crop-canvas', instance)

				// 清除画布
				ctx.clearRect(0, 0, canvasW, canvasH)

				// 绘制
				// drawImage(imageResource, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)
				ctx.drawImage(
					imgInfo.path,
					0, sTop, sWidth, sHeight, // 源图裁剪区域
					0, 0, canvasW, canvasH // 画布绘制区域
				)
				ctx.draw(false, () => {
					uni.canvasToTempFilePath({
						canvasId: 'crop-canvas',
						width: canvasW,
						height: canvasH,
						destWidth: sWidth, // 使用原图实际宽度,保持原图清晰度
						destHeight: sHeight, // 使用原图实际高度,保持原图清晰度
						success: (res) => {
							console.log('crop success (temp)', res
								.tempFilePath)

							// 将临时路径保存为永久路径
							uni.saveFile({
								tempFilePath: res.tempFilePath,
								success: (saveRes) => {
									console.log('save success (saved)', saveRes.savedFilePath)
									financeInfo.value.bgImage = saveRes.savedFilePath
									selectedImage.value = '' // 隐藏编辑模式
									setTimeout(() => {
										plus.navigator.setStatusBarStyle("light");
									}, 200)
									// 保存到缓存
									uni.setStorageSync("financeInfo", financeInfo.value)
									uni.hideLoading()
								},
								fail: (err) => {
									console.error('saveFile fail', err)
									uni.hideLoading()
									uni.showToast({
										title: '保存失败',
										icon: 'none'
									})
								}
							})
						},
						fail: (err) => {
							console.error(err)
							uni.hideLoading()
							uni.showToast({
								title: '裁剪失败',
								icon: 'none'
							})
						}
					}, instance)
				})
			},
			fail: () => {
				uni.hideLoading()
				uni.showToast({
					title: '图片加载失败',
					icon: 'none'
				})
			}
		})

	})
}

const clickHandleTouchEnd = () => {
	if (longPressTimer) {
		clearTimeout(longPressTimer)
		longPressTimer = null
	}
}

const closeImage = () => {
	selectedImage.value = ''
	data.showMask = false
	plus.navigator.setStatusBarStyle("light");
	return false
}

const closeMask = () => {
	data.showMask = false
}



const stylePopup = ref(null)
const searchTextPopup = ref(null)
const tempSearchText = ref('')

const styleList = [{
	label: '样式 1 (默认)',
	value: 'style-1'
},
{
	label: '样式 2',
	value: 'style-2'
}
]

// 打开样式选择弹窗
const openStyleDialog = () => {
	stylePopup.value.open()
}

// 关闭样式选择弹窗
const closeStyleDialog = () => {
	stylePopup.value.close()
}

// 确认样式选择
const confirmStyleDialog = (type) => {
	financeInfo.value.navigationMenuStyle = type
	uni.setStorageSync('financeInfo', financeInfo.value)
	// #ifdef APP-PLUS
	util.setAndroidSystemBarColor(financeInfo.value.navigationMenuStyle == 'style-1' ? '#ffffff' : '#F8F8F8')
	// #endif
	stylePopup.value.close()
}

const clickTitlePopupButton = (button) => {
	button.click()
}

// 打开搜索框提示修改弹窗
const openSearchTextDialog = () => {
	tempSearchText.value = financeInfo.value.searchText || ''
	searchTextPopup.value.open()
}

// 关闭搜索框提示修改弹窗
const closeSearchTextDialog = () => {
	searchTextPopup.value.close()
}

// 确认搜索框提示修改
const confirmSearchTextDialog = () => {
	if (!tempSearchText.value.trim()) {
		uni.showToast({
			title: '请输入提示文字',
			icon: 'none'
		})
		return
	}
	financeInfo.value.searchText = tempSearchText.value.trim()
	uni.setStorageSync('financeInfo', financeInfo.value)
	searchTextPopup.value.close()
	uni.showToast({
		title: '修改成功',
		icon: 'success'
	})
}
</script>

<style>
@import "@/common/main.css";
</style>
<style lang="less" scoped>
.container {
	height: 100vh;
	background-color: #ffffff;
	overflow: hidden;
}

.main-info-container {
	background: linear-gradient(348deg, #0B1028 49%, #0B1028 76.26%, #18336C 86.18%, #18336C 100%);

	.nav-bar {
		padding: 20rpx;

		.left {
			image {
				height: 48rpx;
				width: 48rpx;
			}
		}

		.right {
			image {
				height: 36rpx;
				width: 36rpx;
			}
		}

		.nav-bar-search {
			background-color: #ffffff;
			border-radius: 300rpx;
			height: 56rpx;
			padding: 4px 0;
			margin: 0 26rpx 0 14rpx;

			.search-icon {
				width: 32rpx;
				height: 32rpx;
				margin-left: 4px;
				margin-right: 6px;
			}

			.search-input {
				font-size: 14px;
			}

			::v-deep .input-placeholder {
				color: #767676;
			}

			.line {
				width: 1px;
				background-color: #D8D8D8;
			}

			.search-button {
				font-size: 14px;
				padding: 0 12px;
				color: #8B634E;
				font-weight: 500;
			}
		}

	}

	.total-money-box {
		padding-top: 10rpx;
		padding-bottom: 6rpx;
		margin-bottom: 32rpx;

		.revenue-box {
			padding: 0 24rpx;

			.total-money {
				font-size: 24rpx;
				display: flex;
				justify-content: space-between;
			}


			.total-money-value {
				color: #F1CFAB;
			}

		}

		.total-money-title {
			color: #A39797;

			.eye-icon {
				width: 44rpx;
				height: 44rpx;
				margin: 0 32rpx 0 20rpx;
			}

			.safe-icon {
				width: 24rpx;
				height: 24rpx;
				margin-right: 4rpx;
			}
		}

		.total-money-value {
			font-size: 50rpx;
			font-weight: 500;
			line-height: 64rpx;
		}

		.family-protection {
			display: flex;
			flex-direction: column;
			flex-shrink: 0;
			height: 100%;
			padding: 0 28rpx;
			border-left: 1rpx solid #172139;
			align-items: center;
			font-size: 24rpx;

			.value {
				color: #F1CFAB;
				font-size: 56rpx;
				font-weight: 500;
				line-height: 64rpx;
			}

			.text {
				color: #F1CFAB;
				font-size: 24rpx;
				margin-left: 8rpx;

			}
		}
	}

	.data-box {
		padding: 0 26rpx 0;
		font-size: 26rpx;

		.title {
			margin-bottom: 40rpx;
		}

		.group-data {
			// margin-top: 8rpx;
			flex-wrap: wrap;

			.item {
				width: calc(50% - 15rpx);
				flex-shrink: 0;
				margin-bottom: 40rpx;

				.label {
					margin-right: 18rpx;
					flex-shrink: 0;
				}

				.label-sub {
					white-space: nowrap;
				}
			}
		}

		.second-color {
			color: #787174;
		}

		.primary-color {
			color: #EAD2B8;
		}
	}
}

.open {
	// background: #08112E;
	background: linear-gradient(146deg, #0B1028 49%, #08112E 71.26%, #18336C 83.18%, #18336C 96%)
}



.image-service-box {
	position: absolute;
	display: flex;
	flex-direction: column;
	top: 20%;
	width: 100%;

	.arrow-box {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 4rpx;

		.arrow-icon {
			width: 28rpx;
			height: 28rpx;
		}
	}

	.card-box {
		display: flex;
		flex-direction: column;

		.wealth-card-box {
			position: relative;

			.card-info {
				display: flex;
				justify-content: space-between;
				align-items: flex-start;
				position: absolute;
				width: 100%;
				top: 12%;
				padding: 0 5%;

				.logo {
					width: 188rpx;
					height: 40rpx;
				}

				.name-box {
					display: flex;
					align-items: flex-start;
				}

				.card-holder-icon {
					width: 68rpx;
					height: 28rpx;
					margin-right: 8rpx;
				}

				.card-holder-name {
					color: #F1CFAB;
					font-size: 30rpx;
				}
			}

			.enjoy-benefits {
				position: absolute;
				bottom: 25%;
				right: 4%;

				.benefits-text {
					color: #F1CFAB;
					font-size: 24rpx;
				}

				.arrow-icon {
					width: 28rpx;
					height: 28rpx;
					margin-left: 6rpx;
				}
			}


		}

		.wealth-card-opacity0 {
			width: 100%;
			opacity: 0;
		}

		.wealth-card {
			position: absolute;
			width: 100%;
		}

		.content-box {
			margin-top: -1px;
			background: linear-gradient(180deg, #FFFFFF 56.37%, #F0F4F9 100%);
			padding: 20rpx;
			padding-bottom: 12rpx;

			.service-icons {
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;

				.service-icon {
					display: flex;
					flex-direction: column;
					align-items: center;
					width: 20%;
					margin-top: 22rpx;
					margin-bottom: 8rpx;

					.icon {
						width: 62rpx;
						height: 62rpx;
					}

					.name {
						font-size: 26rpx;
						color: #5D5D5D;
					}
				}
			}
		}


	}

	.image-box {
		width: 100%;
		overflow: hidden; // scroll-view 需要
	}

	.scroll-image-box {
		background-color: #ffffff;
		width: 100%;
		min-height: 0; // 修复 flex一出问题
		position: relative;
	}

	.dashed-line-box {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		border: 4rpx dashed #ffffff;
		pointer-events: none;

		.dashed-line-text {
			height: 44rpx;
			line-height: 44rpx;
			width: 180rpx;
			padding: 0 20rpx;
			border-radius: 8rpx;
			color: #1777FF;
			font-size: 24rpx;
			font-weight: 500;
			background-color: #fff;
			position: absolute;
			top: 0;
			left: 50%;
			transform: translate(-50%, -50%);
		}
	}


}

.mask {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0, 0, 0, 0.8);
	z-index: 999;

	.mask-icon {
		position: absolute;
		top: 50%;
		right: 52rpx;
		transform: translateY(-25%);
		width: 360rpx;
		height: 360rpx;
	}
}

.content {
	background-color: #ffffff;
	// padding: 20rpx;
	margin-top: -1px;
}

.bottom-box {
	position: fixed;
	bottom: 0;
	width: 100%;
	// height: 100rpx;
	background-color: #ffffff;
	display: flex;
	justify-content: space-around;
	align-items: center;
	padding: 4rpx 0;

	.bottom-item {
		display: flex;
		flex-direction: column;
		align-items: center;

		image {
			width: 56rpx;
			height: 56rpx;
		}

		text {
			margin-top: 12rpx;
			font-size: 20rpx;
			line-height: 25rpx;
			color: #333;
		}
	}
}



.navigation-menu-style-1 {
	background-color: #ffffff;

	.bottom-item:nth-child(2) {
		text {
			color: #A27140;
		}
	}
}

.navigation-menu-style-2 {
	background-color: #F8F8F8;
	border-top: 1rpx solid #C3CED1;
	padding: 6rpx 0;

	.bottom-item:nth-child(2) {
		text {
			color: #0075FF;
		}
	}
}

.ios-bottom-box {
	padding-bottom: constant(safe-area-inset-bottom); // 兼容 IOS<11.2 
	padding-bottom: env(safe-area-inset-bottom); // 兼容 IOS>11.2
}
</style>

<style scoped>
.popup-content {
	background-color: #fff;
	border-radius: 12px;
	width: 600rpx;
	padding: 24px 20px;
}

.popup-title {
	text-align: center;
	font-size: 17px;
	font-weight: 400;
	margin-bottom: 18px;
	color: #333;
}

.style-list {
	margin-bottom: 20px;
}

.style-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 15px 10px;
	border-bottom: 1px solid #f5f5f5;
	font-size: 16px;
	color: #333;
}

.style-item:active {
	background-color: #f9f9f9;
	border-radius: 8px;
}

.popup-btns {
	display: flex;
	gap: 12px;
	justify-content: center;
}

.btn {
	width: 100%;
	height: 40px;
	line-height: 40px;
	text-align: center;
	border-radius: 6px;
	font-size: 15px;
}

.btn.cancel {
	background-color: #f5f5f5;
	color: #666;
}


.input-box {
	margin-bottom: 20px;
}

.popup-input {
	width: 100%;
	height: 44px;
	padding: 0 15px;
	line-height: 44px;
	border: 1px solid #e0e0e0;
	border-radius: 6px;
	font-size: 14px;
	color: #333;
}

.popup-input::placeholder {
	color: #999;
}

.btn.confirm {
	background-color: #1677ff;
	color: #fff;
}
</style>