<template>
	<view class="zsyh">
		<view v-if="$isVip()">
			<watermark dark="light" source="uni_alipay_other_bank" />
			<liu-drag-button :canDocking="false" @clickBtn="$goRechargePage('watermark', 'uni_alipay_other_bank')">
				<image src='/static/lottie/watermark.gif' mode="widthFix" style="width:94px;height:74px;" ></image>
			</liu-drag-button>
		</view>
		<view class="flexcontainer">
			<view class="bg_header">
				<view class="group_45764" v-if="!selectedImage">
					<view class="flexcontainer_3"
						:style="{'background-color': data.navbar.bgColor ,height:$systemInfo.statusBarHeight+96+'rpx'}">
						<view class="group_8" @click="back">
							<image class="frame" src="/static/image/other/bank/zsyh/back.png" mode="aspectFit" />
						</view>
						<view class="group_7" @click="openEditDialog">
							<view class="rectangle_18503"></view>
							<text class="text_5">我的银行卡</text>
						</view>
						<view class="group_9">
							<view class="rectangle_18503_1">
								<image class="group_13980" src="/static/image/other/bank/zsyh/kf.png" mode="aspectFit" />
								<view class="flexcontainer_4">
									<view class="group_48144">
										20
									</view>
									<image class="group_13979" src="/static/image/other/bank/zsyh/more.png" mode="aspectFit" />
								</view>
								<view class="rectangle_23229"></view>
							</view>
						</view>
					</view>
				</view>

				<NavBar v-else title="拼图" bgColor="#EFEFEF" noBack @back="closeImage" isRightButton @right-click="confirmImage">
				</NavBar>
				<view class="flexcontainer_5">
					<view class="flexcontainer_6">
						<view class="flexcontainer_7" @click="openEditDialog">
							<text class="text_7">¥ {{Number(data.form.balance).toFixed(2)}}</text>
							<view class="group_48142">
								<image class="path" src="/static/image/other/bank/zsyh/icon1.png" mode="aspectFit" />
							</view>
						</view>
						<view class="flexcontainer_8">
							<view class="group_48141" @click="data.isShow=true">
								<text class="text_8">查看卡号</text>
							</view>
							<text class="text_9" @click="openEditDialog">****
								{{data.form.cardNumber.substring(data.form.cardNumber.length-4)}}</text>
						</view>
						<text class="text_10">可用余额</text>
						<text class="text_11" @click="openEditDialog">{{data.form.cardType}}</text>
					</view>
					<image class="div_9c80ece453e55d5cd3bbdcc7d0255f31" src="/static/image/other/bank/zsyh/zsyhImg.png"
						mode="aspectFill" />
				</view>
			</view>
			<view class="panel_card_info">
				<view class="panel_card_info_bg">
					<view class="flexcontainer_1">
						<text class="text">卡片信息</text>
						<text class="text_1">普卡</text>
					</view>
					<view class="flexcontainer_2">
						<view>
							<text class="text_2" @click="openEditDialog">{{data.form.bankName}}</text>
							<image class="group_13981" src="/static/image/other/bank/zsyh/icon2.png" mode="aspectFit" />
						</view>
						<view>
							<text class="text_3" @click="openEditDialog">{{data.form.alias||'设置别名'}}</text>
							<image class="group_13982" src="/static/image/other/bank/zsyh/edit.png" mode="aspectFit" />
						</view>
					</view>
				</view>
			</view>
			<view class="itemBox">
				<view class="itemInfo">
					<view class="">
						<text class="title">快捷支付</text>
						<image class="icon1" src="/static/image/other/bank/zsyh/youjian.png" mode="aspectFit" />
					</view>
					<view class="">
						<image class="icon2" src="/static/image/other/bank/zsyh/zfb.png" mode="heightFix" />
						<image class="icon2" src="/static/image/other/bank/zsyh/wx.png" mode="heightFix" />
						<image class="icon2" src="/static/image/other/bank/zsyh/iosPay.png" mode="heightFix" />
						<image class="icon3" src="/static/image/other/bank/zsyh/icon3.png" mode="heightFix" />
					</view>
				</view>
			</view>
			<view class="itemBox2">
				<view class="itemInfo">
					<view class="leftText">
						{{data.month}}月
					</view>
					<view class="title">
						财富计划
					</view>
					<view class="dec">
						当月暂无财富计划，赶紧添加一个吧～
					</view>
					<view class="dec2">
						闲钱投资？看看热议基金
						<image src="/static/image/other/bank/zsyh/icon4.png" mode="widthFix"></image>
					</view>
					<image class="bImg" :src="data.bgImg" mode="widthFix"></image>
				</view>
			</view>
			<view class="echart">
				<view class="title">
					今日支出
				</view>
				<view class="dec" v-if="data.form?.chartData?.series[0]?.data.length>0">
					¥{{data.form.chartData.series[0].data[data.form.chartData.series[0].data.length-1]}}
				</view>
				<view class="echartBox"  @click.stop="">
					<qiun-data-charts class="no-touch-chart" @click.stop="" canvas2d type="column" :opts="data.opts" :chartData="data.form.chartData" />
				</view>
				<view class="bBox" v-show="data.form.chartData?.categories.length>0">
					<view class="">
						{{data.form.chartData.categories[0]}}
					</view>
					<view class="">
						{{data.form.chartData.categories[data.form.chartData.categories.length-1]}}
					</view>
				</view>
			</view>
			<view class="record">
				<view class="title">
					转账记录
				</view>
				<view class="dec">
					本月没有转账记录
				</view>
				<view class="btnBox">
					<view class="btn">
						去转帐
					</view>
				</view>
			</view>
			<!-- 			<view class="record">
				<view class="title">
					银行卡管理
				</view>
				<view @touchstart="handleTouchStart" @touchend="handleTouchEnd">
					<image class="yhkgl" :src="selectedImage||'/static/image/other/bank/zsyh/yhkgl.png'" mode="widthFix"></image>
				</view>
			</view> -->
			<view v-if="!selectedImage" class="image-box flex-1 flex-align-center flex-column flex-justify-center"
				@touchstart="handleTouchStart" @touchend="handleTouchEnd">
				<view v-if="!data.huabeiInfo.image" class="flex-align-center flex-column">
					<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 v-else class="w100 h100">
					<image class="w100 h100" :src="data.huabeiInfo.image" mode="widthFix"></image>
				</view>
			</view>
			<view v-else class="scroll-image-box flex-1">
				<scroll-view class="image-box h100" style="width: 100%;height: 317px;" 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>
			<ZdySafeBottom bgColor="#f8f8f8"/>
		</view>
		
		<view v-if="editDialog.show" class="editDialog">
			<view class="editDialog_bg">
				<view class="editDialog_header">
					<text class="title">编辑银行卡</text>
					<!-- <text class="close" @click="closeEditDialog">×</text> -->
				</view>
				<view class="editDialog_body">
					<view class="formItem">
						<text>余额</text>
						<input v-model="editDialog.data.balance" type="digit" />
					</view>
					<view class="formItem">
						<text>户名</text>
						<input v-model="editDialog.data.name" />
					</view>
					<view class="formItem">
						<text>卡类型</text>
						<input v-model="editDialog.data.cardType" />
					</view>

					<!-- ✅ 完整卡号 -->
					<view class="formItem">
						<text>卡号</text>
						<input v-model="editDialog.data.cardNumber" />
					</view>

					<view class="formItem">
						<text>开户行</text>
						<input v-model="editDialog.data.bankName" />
					</view>

					<view class="formItem">
						<text>别名</text>
						<input v-model="editDialog.data.alias" />
					</view>

					<!-- ✅ 30天数据编辑 -->
					<view class="chartEditor">
						<text class="chartTitle">最近30天支出数据</text>

						<view class="chartRowBox">
							<view class="chartRow" v-for="(item, index) in editDialog.data.chartData.categories" :key="index">
								<text class="day">{{ item }}</text>
								<input type="number" v-model.number="editDialog.data.chartData.series[0].data[index]" />
							</view>
						</view>
					</view>
				</view>
				<view class="popup-footer">
					<view class="btn-cancel" @click="editDialog.show=false">取消</view>
					<view class="btn-save" @click="saveEdit">保存</view>
				</view>
			</view>
		</view>
		<view class="dask" v-if="data.isShow">
			<view class="info">
				<image @click="data.isShow=false" src="/static/image/common/close.png" mode=""></image>
				<view class="title">
					卡号信息
				</view>
				<view class="dec">
					户 名: {{data.form.name}}
				</view>
				<view class="dec">
					卡 号: {{addSpaceEveryFourChars(data.form.cardNumber)}}
				</view>
				<view class="dec">
					开户行: {{data.form.bankName}}
				</view>
				<view class="btnbox">
					<view class="btn">复制全部</view>
					<view class="btn btns">仅复制卡号</view>
				</view>
			</view>
		</view>
		<!-- 蒙层 -->
		<view v-if="showMask" class="mask" @click="closeMask">
			<image class="mask-icon" src="/static/image/common/mask-icon.png" mode="widthFix">
			</image>
		</view>
	</view>
</template>



<script setup>
import { imgLocal  } from '@/utils/common.js';
import ZdySafeBottom from '@/components/safeBottom/safeBottom.vue'
	import {
		ref,
		reactive,
		watch,
		nextTick,
		getCurrentInstance
	} from "vue";
	import {
		onLoad,
		onShow,
		onReady,
		onPullDownRefresh,
		onReachBottom,
		onPageScroll
	} from "@dcloudio/uni-app";
	const {
		appContext,
		proxy
	} = getCurrentInstance();
	const instance = getCurrentInstance();
	import NavBar from '@/components/nav-bar/nav-bar'

	const editDialog = reactive({
		show: false,
		data: {
			balance: 123.51,
			cardType: '储蓄卡(I类)',
			cardNumber: '8155386535158511555',
			bankName: '重庆上清寺支行',
			alias: '普通卡',
			name: '某某',
			chartData: {} // ✅ 30天数据 [{date,value}]
		}
	});
	let selectedImage = ref('')
	const data = reactive({
		huabeiInfo:{
			image: ''
		},
		bgImg:'',
		huabeiInfoStorageKey: 'bank_zsyh_info_storage',
		showMask: false,
		isShow: false,
		month: new Date().getMonth() + 1,
		navbar: {
			title: "微信",
			bgColor: 'rgba(0,0,0,0)',
		},
		form: {
			balance: 123.51,
			cardType: '储蓄卡(I类)',
			cardNumber: '8155386535158511555',
			bankName: '重庆上清寺支行',
			alias: '普通卡',
			name: '某某',
			chartData: {} // ✅ 30天数据 [{date,value}]
		},
		//您可以通过修改 config-ucharts.js 文件中下标为 ['column'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
		opts: {
			color: ["#E17C52"],
			padding: [0, 1, 0, 0],
			enableScroll: false,
			labelPosition: 'outside',
			dataLabel: false,
			legend: {
				show: false
			},
			xAxis: {
				disableGrid: true,
				disabled: true,
				calibration: true,
				axisLine: false
			},
			yAxis: {
				disableGrid: true,
				showTitle: true,
				disabled: true,
			},
			extra: {
				tooltip: {
					show: false,
				},
				column: {
					type: "group",
					width: 1,
					disableGrid: true,
					activeBgColor: "#000000",
					activeBgOpacity: 0.08,
					gridType: "none",
					linearType: "none",
					
				}
			}
		}
	})
	onLoad(async(option) => {
		let savedInfo = uni.getStorageSync(data.huabeiInfoStorageKey)||{image:'/static/image/other/bank/zsyh/zsyhdb.png'}

		console.log("savedInfo====", savedInfo)
		if (savedInfo) {
			// 合并默认值，防止旧数据缺少新字段
			data.huabeiInfo = {
				...data.huabeiInfo,
				...savedInfo
			}
		}
		data.bgImg= await imgLocal.getLocalImage('other/bank/zsyh/bImg.png');
		const config = uni.getStorageSync('config')
		console.log("---config---", config);
		const font = config.config['client.uniapp.font']
		
		console.log("字体地址信息", font.bank);
		// Font loading logic
		const fontUrl = font.bank;
		const fontName = 'zsyhFt';
		
		const loadFont = (path) => {
			uni.loadFontFace({
				family: fontName,
				source: `url("${path}")`,
				success() {
					console.log('字体加载成功');
				},
				fail(err) {
					console.error('字体加载失败', err);
				}
			});
		};
		
		// #ifdef H5
		// H5 环境直接从 URL 加载字体
		loadFont(fontUrl);
		// #endif
		
		// #ifndef H5
		// 非 H5 环境使用下载和保存逻辑
		const savedFontPath = uni.getStorageSync('	');
		if (savedFontPath) {
			loadFont(savedFontPath);
		} else {
			uni.downloadFile({
				url: fontUrl,
				success: (res) => {
					if (res.statusCode === 200) {
						uni.saveFile({
							tempFilePath: res.tempFilePath,
							success: (saveRes) => {
								const savedPath = saveRes.savedFilePath;
								uni.setStorageSync('certificate2_font_path', savedPath);
								console.log("字体保存路径", savedPath);
								loadFont(savedPath);
							},
							fail: (err) => {
								console.error('保存文件失败', err);
								// Fallback: 尝试加载临时路径
								loadFont(res.tempFilePath);
							}
						});
					}
				},
				fail: (err) => {
					console.error('下载字体失败', err);
				}
			});
		}
		// #endif
	})
	onReady(() => {
		initData()
	})

	onShow(() => {})
	onPullDownRefresh(() => {
		setTimeout(() => {
			uni.stopPullDownRefresh();
		}, 1000);
	})
	onReachBottom(() => {

	})
	onPageScroll((e) => {
		if (e.scrollTop > 45) {
			data.navbar.bgColor = '#fff'
		} else {
			data.navbar.bgColor = 'rgba(0,0,0,0)'
		}

	})
	const CACHE_KEY = 'BANK_CARD_INFO'

	function loadCache() {
		const cache = uni.getStorageSync(CACHE_KEY)
		if (cache) return cache
		return null
	}

	function saveCache(data) {
		uni.setStorageSync(CACHE_KEY, data)
	}

	function initData() {
		const cache = loadCache()
		console.log(getDefaultChart())
		if (cache) {
			data.form = cache
		} else {
			data.form = {
				balance: 123.51,
				cardType: '储蓄卡(I类)',
				cardNumber: '8155386535158511555',
				bankName: '重庆上清寺支行',
				alias: '普通卡',
				name: '某某',
				chartData: getDefaultChart()
			}
			saveCache(data.form)
		}
		data.form.chartData = getDefaultChart()
	}

	function getDefaultChart() {
		const base = getLast30Days().reverse()
		return {
			categories: base,
			series: [{
				name: "支出",
				data: base.map(() => Math.floor(Math.random() * 100))
			}]
		};

	}

	function back() {
		uni.navigateBack()
	}



	function getLast30Days() {
		const result = []
		const today = new Date()
		for (let i = 0; i < 31; i++) {
			const d = new Date(today)
			d.setDate(today.getDate() - i)
			const y = d.getFullYear()
			const m = String(d.getMonth() + 1).padStart(2, '0')
			const day = String(d.getDate()).padStart(2, '0')
			result.push(`${y}-${m}-${day}`)
		}
		return result
	}

	function buildChart(days = 30) {
		const base = getLast30Days();
		return {
			categories: base.reverse(),
			series: [{
				name: "支出",
				data: base.map(() => Math.floor(Math.random() * 100))
			}]
		};
	}

	function saveEdit() {
		data.form.balance = editDialog.data.balance;
		data.form.cardType = editDialog.data.cardType;
		data.form.cardNumber = editDialog.data.cardNumber;
		data.form.bankName = editDialog.data.bankName;
		data.form.alias = editDialog.data.alias;
		data.form.name = editDialog.data.name;
		// ✅ 更新图表
		data.form.chartData = editDialog.data.chartData
		editDialog.show = false;
		saveCache(data.form)
	}

	function openEditDialog() {
		editDialog.data = JSON.parse(JSON.stringify(data.form))
		editDialog.show = true
	}
	const scrollTop = ref(0)
	const onImageScroll = (e) => {
		scrollTop.value = e.detail.scrollTop
	}
	// 长按事件定时器
	let longPressTimer = null
	const handleTouchStart = (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 handleTouchEnd = () => {
		if (longPressTimer) {
			clearTimeout(longPressTimer)
			longPressTimer = null
		}
	}
	// 选择图片
	const chooseImage = () => {
		uni.chooseImage({
			count: 1,
			sourceType: ['album'],
			success: (res) => {
				selectedImage.value = res.tempFilePaths[0]
				uni.setStorageSync('zsyhselectedImage', res.tempFilePaths[0])
				data.showMask = true

			}
		})
	}

	function addSpaceEveryFourChars(str) {
		return str.replace(/(.{4})/g, '$1 ').trim();
	}
	// 确认图片裁剪
	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)
										data.huabeiInfo.image = saveRes.savedFilePath
										selectedImage.value = '' // 隐藏编辑模式
										// setTimeout(() => {
										// 	plus.navigator.setStatusBarStyle("light");
										// }, 200)
										// 保存到缓存
										uni.setStorageSync(data.huabeiInfoStorageKey, data.huabeiInfo)
										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'
					})
				}
			})

		})
	}
</script>

<style lang="scss" scoped>
	* {
		box-sizing: border-box;
	}
	.text_7{
			font-family:"zsyhFt";
	}
	.zsyh {
		position: relative;
		width: 750rpx;
		background: #f8f8f8;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		padding-bottom: 30px;

		.panel_card_info {
			width: 690rpx;
			height: 168rpx;
			margin-left: 30rpx;
			margin-top: -8rpx;

			.panel_card_info_bg {
				position: absolute;
				width: 690rpx;
				height: 168rpx;
				border-radius: 16rpx;
				background: #ffffff;
				box-shadow: 0rpx 0rpx 10rpx rgba(0, 0, 0, 0.05);
				display: flex;
				flex-direction: column;
				align-items: flex-start;
			}
		}



		.itemBox2 {
			width: 690rpx;
			margin-left: 30rpx;
			margin-top: 20rpx;
			// height: 926rpx;

			.itemInfo {
				position: relative;
				padding: 34rpx 28rpx;
				width: 690rpx;
				border-radius: 16rpx;
				background: #ffffff;
				box-shadow: 0rpx 0rpx 10rpx rgba(0, 0, 0, 0.05);

				.leftText {
					position: absolute;
					left: 32rpx;
					top: 24rpx;
					font-weight: 400;
					font-size: 32px;
					color: #F2F2F2;
					z-index: 1 !important;
				}

				.title {
					font-weight: 400;
					font-size: 15px;
					color: #1A1A1A;
					margin-left: 46rpx;
					margin-top: 40rpx;
					z-index: 9 !important;
					position: relative;
			font-weight: bold;
				}

				.dec {
					text-align: center;
					margin-top: 86rpx;
					font-weight: 400;
					font-size: 15px;
					color: #1A1A1A;
				}

				.dec2 {
					display: flex;
					align-items: center;
					justify-content: center;
					text-align: center;
					margin-top: 24rpx;
					font-weight: 400;
					font-size: 11px;
					color: #5191DA;

					image {
						width: 10rpx;
						height: 10rpx;
						margin-left: 10rpx;
					}
				}

				.bImg {
					margin-top: 80rpx;
					width: 100%;
				}
			}
		}

		.itemBox {
			position: relative;
			width: 690rpx;
			margin-left: 30rpx;
			margin-top: 20rpx;
			height: 112rpx;

			.itemInfo {
				padding: 34rpx 28rpx;
				width: 690rpx;
				border-radius: 16rpx;
				background: #ffffff;
				box-shadow: 0rpx 0rpx 10rpx rgba(0, 0, 0, 0.05);
				display: flex;
				align-items: center;
				justify-content: space-between;

				view {
					display: flex;
					align-items: center;

					.title {
						font-weight: bold;
						font-size: 15px;
						color: #111111;
						line-height: 21px;
					}

					.icon1 {
						width: 48rpx;
						height: 28rpx;
					}

					.icon2 {
						height: 40rpx;
						margin-right: 12rpx;
					}

					.icon3 {
						height: 28rpx;
					}
				}

			}
		}

		.record {
			margin-left: 30rpx;
			margin-top: 20rpx;
			margin-bottom: 20rpx;
			width: 690rpx;
			padding: 34rpx 28rpx;
			border-radius: 16rpx;
			background: #ffffff;

			.title {
				font-weight: 400;
				font-size: 15px;
				color: #1A1A1A;
			}

			.dec {
				font-weight: 400;
				font-size: 13px;
				color: #636363;
				margin-top: 90rpx;
				margin-bottom: 60rpx;
			}

			.btnBox {
				display: flex;
				justify-content: flex-end;

				.btn {
					width: 144rpx;
					height: 58rpx;
					background: #EA4A5A;
					border-radius: 30rpx;
					font-size: 22rpx;
					color: #FFFFFF;
					line-height: 58rpx;
					text-align: center;
				}
			}

			.yhkgl {
				width: 100%;
				margin-top: 48rpx;
			}
		}

		.echart {
			margin-left: 30rpx;
			margin-top: 20rpx;
			width: 690rpx;
			padding: 34rpx 28rpx;
			border-radius: 16rpx;
			background: #ffffff;

			.title {
				font-weight: 400;
				font-size: 11px;
				color: #1A1A1A;
			}

			.dec {
				font-weight: 700;
				font-size: 16px;
				color: #1A1A1A;
				margin-top: 12rpx;
				display: flex;
				align-items: center;
			}

			.echartBox {
				height: 200rpx;
			}

			.bBox {
				display: flex;
				justify-content: space-between;
				margin-top: 16rpx;

				view {
					font-size: 11px;
					color: #1A1A1A;
				}
			}
		}

		.flexcontainer_1 {
			position: relative;
			display: flex;
			width: 624rpx;
			height: 42rpx;
			margin-top: 36rpx;
			margin-left: 28rpx;
		}

		.text {
			position: absolute;
			left: 0;
			top: 0;
			font-size: 30rpx;
			line-height: 42rpx;
			font-weight: bold;
			color: #1a1a1a;
		}

		.text_1 {
			position: absolute;
			right: 0;
			top: 4rpx;
			font-size: 26rpx;
			line-height: 36rpx;
			color: #1a1a1a;
		}

		.flexcontainer_2 {
			position: relative;
			display: flex;
			width: 630rpx;
			height: 36rpx;
			margin-top: 20rpx;
			margin-left: 30rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			view {
				display: flex;
				align-items: center;
			}
		}

		.group_13981 {
			width: 18rpx;
			height: 18rpx;
			margin-top: 6rpx;
		}

		.group_13982 {
			width: 28rpx;
			height: 28rpx;
			margin-top: 2rpx;
			margin-left: 12rpx;
		}

		.text_2 {
			font-size: 26rpx;
			line-height: 28rpx;
			color: #1a1a1a;
		}

		.text_3 {
			font-size: 26rpx;
			line-height: 36rpx;
			color: #999999;
		}

		.bg_header {
			width: 750rpx;
			height: 492rpx;
			background: linear-gradient(241deg, #d4bcbc 13.43%, #d5c9c4 73.94%);
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			padding-top: 184rpx;
		}

		.group_45764 {
			width: 750rpx;
			height: 184rpx;
			position: fixed;
			top: 0;
			left: 0;
			z-index: 9999 !important;
			;
		}

		.flexcontainer_3 {
			position: relative;
			display: flex;
			width: 750rpx;
			height: 96rpx;
			align-items: flex-end;
		}

		.group_8 {
			width: 240rpx;
			height: 96rpx;
			overflow: hidden;
		}

		.frame {
			width: 40rpx;
			height: 40rpx;
			margin-top: 44rpx;
			margin-left: 24rpx;
		}

		.group_7 {
			position: relative;
			width: 240rpx;
			height: 96rpx;
			margin-left: 16rpx;
		}

		.rectangle_18503 {
			width: 240rpx;
			height: 96rpx;
		}

		.text_5 {
			position: relative;
			display: block;
			text-align: center;
			font-size: 34rpx;
			line-height: 40rpx;
			color: #1a1a1a;
			margin-top: -52rpx;
		}

		.group_9 {
			width: 240rpx;
			height: 96rpx;
			margin-left: 14rpx;
		}

		.rectangle_18503_1 {
			width: 240rpx;
			height: 96rpx;
			display: flex;
			align-items: flex-start;
		}

		.group_13980 {
			width: 40rpx;
			height: 40rpx;
			margin-left: 82rpx;
			margin-top: 44rpx;
		}

		.flexcontainer_4 {
			position: relative;
			width: 60rpx;
			height: 52rpx;
			margin-left: 44rpx;
			margin-top: 28rpx;
		}

		.group_48144 {
			width: 48rpx;
			height: 30rpx;
			margin-left: 12rpx;
			border-radius: 100rpx;
			background: #ff5d5f;
			margin-bottom: -2px;
			margin-top: 4px;
			text-align: center;
			font-size: 24rpx;
			line-height: 36rpx;
			color: #ffffff;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.text_6 {
			display: block;
			
		}

		.group_13979 {
			width: 40rpx;
			height: 40rpx;
			margin-top: -18rpx;
		}

		.rectangle_23229 {
			width: 14rpx;
			height: 8rpx;
			// background: #d8d8d8;
			margin-top: 76rpx;
		}

		.flexcontainer_5 {
			display: flex;
			width: 694rpx;
			height: 220rpx;
			margin-top: 44rpx;
			margin-left: 26rpx;
		}

		.flexcontainer_6 {
			position: relative;
			width: 270rpx;
			height: 220rpx;
		}

		.flexcontainer_7 {
			position: relative;
			display: flex;
			height: 52rpx;
			margin-top: 36rpx;
			margin-left: 10rpx;
		}

		.group_48142 {
			width: 20rpx;
			height: 20rpx;
			margin-top: 6rpx;
		}

		.path {
			width: 100%;
			height: 100%;
		}

		.text_7 {
			font-size: 48rpx;
			font-weight: 700;
			line-height: 52rpx;
			color: #1a1a1a;
		}

		.flexcontainer_8 {
			position: relative;
			display: flex;
			width: 270rpx;
			height: 42rpx;
			margin-top: 90rpx;
		}

		.group_48141 {
			width: 112rpx;
			height: 34rpx;
			margin-left: 158rpx;
			margin-top: 4rpx;
			border-radius: 24rpx;
			border: 2rpx solid #3f342e;
		}

		.text_8 {
			display: block;
			text-align: center;
			font-size: 22rpx;
			line-height: 34rpx;
			color: #1a1a1a;
		}

		.text_9 {
			position: absolute;
			left: 0;
			top: 0;
			font-size: 30rpx;
			line-height: 42rpx;
			color: #1a1a1a;
			font-weight: bold;
		}

		.text_10 {
			position: absolute;
			top: 0;
			left: 4rpx;
			font-size: 26rpx;
			line-height: 36rpx;
			color: #3f342e;
		}

		.text_11 {
			position: absolute;
			left: 4rpx;
			bottom: 50rpx;
			font-size: 26rpx;
			line-height: 36rpx;
			color: #3f342e;
		}

		.div_9c80ece453e55d5cd3bbdcc7d0255f31 {
			width: 336rpx;
			height: 210rpx;
			border-radius: 16rpx;
			margin-left: 88rpx;
			margin-top: 4rpx;
		}
	}

	.chartEditor {
		margin-top: 20rpx;

		.chartTitle {
			font-size: 26rpx;
			font-weight: bold;
			margin-bottom: 10rpx;
			display: block;
		}

		.chartRowBox {
			overflow-y: scroll;
			height: 30vh;
		}

		.chartRow {
			display: flex;
			justify-content: space-between;
			margin-bottom: 10rpx;

			.day {
				font-size: 32rpx;
				color: #666;
			}

			input {
				width: 200rpx;
				border: 1rpx solid #ddd;
				border-radius: 8rpx;
				padding: 4rpx 10rpx;
				font-size: 32rpx;
			}
		}
	}

	.editDialog {
		position: fixed;
		top: 0;
		left: 0;
		width: 750rpx;
		height: 100vh;
		background: rgba(0, 0, 0, 0.4);
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 9999;

		.editDialog_bg {
			width: 690rpx;
			background: #fff;
			border-radius: 16rpx;
			padding: 30rpx;

			.editDialog_header {
				display: flex;
				justify-content: space-between;
				align-items: center;

				.title {
					font-size: 34rpx;
					font-weight: 700;
				}

				.close {
					font-size: 40rpx;
				}
			}

			.editDialog_body {
				margin-top: 20rpx;

				.formItem {
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-bottom: 20rpx;

					text {
						font-size: 26rpx;
						color: #1A1A1A;
					}

					input {
						width: 400rpx;
						height: 50rpx;
						border: 1rpx solid #ccc;
						border-radius: 8rpx;
						padding: 0 10rpx;
						font-size: 24rpx;
					}
				}
			}

			.editDialog_footer {
				display: flex;
				justify-content: flex-end;
				margin-top: 20rpx;

				.btn {
					width: 144rpx;
					height: 58rpx;
					background: #EA4A5A;
					border-radius: 30rpx;
					color: #fff;
					text-align: center;
					line-height: 58rpx;
					font-size: 22rpx;
				}
			}
		}
	}

	.popup-footer {
		display: flex;
		justify-content: space-between;
		padding-top: 20rpx;
		border-top: 1rpx solid #eee;
	}

	.btn-cancel,
	.btn-save {
		width: 48%;
		padding: 20rpx;
		border-radius: 4rpx;
		font-size: 28rpx;
		text-align: center;
	}

	.btn-cancel {
		background-color: #f5f5f5;
		color: #333;
		border: 1rpx solid #ddd;
	}

	.btn-save {
		background-color: #187AFF;
		color: #fff;
		border: none;
	}

	.dask {
		width: 100vw;
		height: 100vh;
		background-color: rgba(0, 0, 0, 0.5);
		position: fixed;
		left: 0;
		top: 0;
		z-index: 99999 !important;
		display: flex;
		align-items: center;
		justify-content: center;

		.info {
			width: calc(100vw - 30px);
			background: #FFFFFF;
			border-radius: 4px 4px 4px 4px;
			display: flex;
			flex-direction: column;

			image {
				margin-top: 15px;
				margin-right: 17px;
				width: 13px;
				height: 13px;
				align-self: flex-end;
			}

			.title {
				font-weight: 400;
				font-size: 16px;
				color: #5A5A5A;
				margin-left: 20px;
				margin-top: 7px;
				margin-bottom: 6px;
			}

			.dec {
				font-weight: 400;
				font-size: 17px;
				color: #5A5A5A;
				margin-left: 20px;
				margin-top: 7px;
			}

			.btnbox {
				margin-top: 26px;
				display: flex;
				align-items: center;
				justify-content: center;
				border-top: 1rpx solid #F2F2F2;

				.btn {
					width: calc(50% - 1rpx);
					height: 54px;
					line-height: 54px;
					font-weight: 400;
					font-size: 15px;
					color: #5A5A5A;
					text-align: center;
				}

				.btns {
					border-left: 1rpx solid #F2F2F2;
					color: #5795E6;
				}
			}
		}
	}
	.image-box {
			width: 100%;
			overflow: hidden; // scroll-view 需要
		}
	
		.scroll-image-box {
			width: 100%;
			min-height: 0; // 修复 flex一出问题
			// overflow: hidden; // scroll-view 需要
			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;
			}
		}
	.no-touch-chart,
	.no-touch-chart canvas {
		pointer-events: none;
	}
</style>
<style>
@import "/common/main.css";
</style>