<template>
	<!-- 水印 -->
	<view v-if="$isVip()">
		<watermark :dark="data.dark" source="uni_alipay_bill" />
		<liu-drag-button :canDocking="false" @clickBtn="$goRechargePage('watermark', 'uni_alipay_bill')">
			<image src='/static/lottie/watermark.gif' mode="widthFix" style="width:94px;height:74px;" ></image>
		</liu-drag-button>
	</view>
	<view style="overflow: hidden;height: 100vh;;">
		<navBar isRightIcon :bgColor="data.navBar.bgColor" :buttonGroup="data.navBar.buttonGroup"
			@button-click="clickTitlePopupButton" tipLayerType="bill-list-tip" isTipLayer tipLayerText="新增账单信息">
			<template v-slot:center>
				<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="请输入交易记录" />
					<view class="line h100"></view>
					<view class="search-button">搜索</view>
				</view>
			</template>
		</navBar>
		<view class="filter-box">
			<view class="filter-line">
				<view class="filter-item w100" :class="{ 'active-text': item.value == currentFilterType }"
					v-for="item in filterType" :key="item.value">
					{{ item.name }}
				</view>
				<view style="width: 100rpx; flex-shrink: 0;"></view>
			</view>
			<view class="filter-button blur"></view>
			<view class="filter-button">
				筛选
				<image class="filter-icon" src="/static/image/bill/bill-list/down-black.png" mode=""></image>
			</view>
		</view>
		<view style="height: 48px;"></view>
		<scroll-view :scroll-y="true" class="bill-list-container"
			:style="{ height: `calc(100vh - ${92 + data.statusBarHeight}px)` }" @scroll="scrollList">
			<view class="sticky-conatianer" v-if="data.currentScrollTop > 100">
				<view class="month">
					<view v-if="currentMonthData.year == new Date().getFullYear()"><text class="font-w500">{{
						currentMonthData.month
					}}</text>月
					</view>
					<view v-else>
						<text class="font-w500">{{ currentMonthData.year }}-{{ currentMonthData.month }}</text>
					</view>
					<image class="down" src="/static/image/bill/bill-list/down-black.png" mode=""></image>
				</view>
				<view class="income-ande-outCome flex-between">
					<view class="flex">
						<view class="item"><text>支出￥</text><text class="money wx-font-regular">{{
							numberUtil.formatMoneyWithThousand(currentMonthData.outCome) }}</text></view>
						<view class="item"><text>收入￥</text><text class="money wx-font-regular">{{
							numberUtil.formatMoneyWithThousand(currentMonthData.inCome) }}</text></view>

					</view>
					<view class="">
						<text>收支分析</text>
						<uni-icons type="right" color="#555555" size="14"></uni-icons>
					</view>
				</view>
			</view>
			<view class="bill-list-card" v-for="(item, index) in billList" :key="index"
				:ref="el => cardRefs[index] = el">
				<view class="list-title-card"
					:class="{ 'current-month': item.month == new Date().getMonth() + 1 && item.year == new Date().getFullYear() }">
					<view v-if="item.month == new Date().getMonth() + 1 && item.year == new Date().getFullYear()"
						class="bg-right-text">
						<text>贴纸</text>
						<image class="right-icon" src="/static/image/common/right-blue.png"></image>
					</view>
					<view class="list-title">
						<view>
							<text class="month alipay-font">{{ item.month }}</text>
							<text>月</text>
							<image class="filter-icon down " src="/static/image/bill/bill-list/down-black.png" mode="">
							</image>
						</view>

					</view>
					<view class="flex-between analysis-box">
						<view class="income-ande-outCome">
							<view class="outCome item">
								<text class="title">支出</text>
								<text class="amount alipay-font"><text class="font-11 wx-font-regular">￥</text>{{
									numberUtil.formatMoneyWithThousand(item.outCome)
								}}</text>
							</view>
							<view class="income item">
								<text class="title">收入</text>
								<text class="amount alipay-font"><text class="font-11 wx-font-regular">￥</text>{{
									numberUtil.formatMoneyWithThousand(item.inCome)
								}}</text>
							</view>
						</view>
						<view v-if="!(item.month == new Date().getMonth() + 1 && item.year == new Date().getFullYear())"
							class="analysis-button">
							收支分析
						</view>
					</view>
					<view v-if="item.month == new Date().getMonth() + 1 && item.year == new Date().getFullYear()"
						class="income-ande-outCome-analysis">
						<view class="left-box">
							<text class="text">设置支出预算</text>
							<image class="right-icon" src="/static/image/common/right-black.png" mode=""></image>
						</view>
						<view class="analysis-button">
							收支分析
						</view>
					</view>
				</view>
				<view class="bill-list">
					<BalanceList :isBalance="false" :list="item.list" @longPress="onLongPress" @onBill="billClick" />
				</view>
				<ZdySafeBottom bgColor="#F5F5F5"/>
			</view>
		</scroll-view>

	</view>

	<!-- Custom Context Menu -->
	<view class="context-menu-mask" v-if="contextMenu.visible" @click="closeContextMenu" @touchmove.stop.prevent></view>
	<view class="context-menu" v-if="contextMenu.visible"
		:style="{ top: contextMenu.y + 'px', left: contextMenu.x + 'px' }">
		<view class="menu-item border-bottom" @click="handleEdit">编辑</view>
		<view class="menu-item" @click="handleDelete">删除</view>
	</view>
</template>

<script setup>
import {
	dateUtil,
	util,
	numberUtil
} from '@/utils/common.js'
import navBar from '@/components/nav-bar/nav-bar.vue'
import BalanceList from '@/components/balance-list/balance-list.vue'
import ZdySafeBottom from '@/components/safeBottom/safeBottom.vue'

import {
	reactive,
	toRefs,
	onMounted,
	ref,
	computed,
	getCurrentInstance
} from 'vue'
import {
	useStore
} from '@/store/index.js'
import {
	onShow,
	onLoad
} from '@dcloudio/uni-app'

const instance = getCurrentInstance();
const { proxy } = instance;

// 存储卡片的 ref
const cardRefs = ref([])

/**
 * 筛选类型
 */
const filterType = [{
	name: '全部',
	value: 'all'
}, {
	name: '支出',
	value: 'income'
}, {
	name: '转账',
	value: 'transfer'
}, {
	name: '退款',
	value: 'refund'
}, {
	name: '订单',
	value: 'order'
}, {
	name: '还款',
	value: 'repayment'
}, {
	name: '线下消费',
	value: 'offline-consumption'
}, {
	name: '充值缴费',
	value: 'recharge'
}, {
	name: '网购',
	value: 'online-shopping'
}, {
	name: '二维码收款',
	value: 'qr-code-receiving'
}]

const buttonGroup = [{
	name: "新增账单",
	click: () => {
		uni.navigateTo({
			url: '/pages/bill/add-bill/add-bill'
		})
		console.log("新增账单")
	}
}
]

const data = reactive({
	navBar: {
		bgColor: '#F5F5F5',
		buttonGroup: buttonGroup
	},
	statusBarHeight: 0,
	currentScrollTop: 0,
	currentFilterType: 'all', // 当前筛选类型
	currentMonthData: {
		month: '',
		year: '',
		inCome: 0,
		outCome: 0,
	}, // 当前滚动到的月份
	cardPositions: [], // 存储每个卡片距离 scroll-view 顶部的距离
	billList: []
})

let {
	billList,
	currentMonthData,
	currentFilterType
} = toRefs(data)

const {
	getBillList,
	deleteBill
} = useStore()

const contextMenu = reactive({
	visible: false,
	x: 0,
	y: 0,
	item: null
})

onShow(() => {
	// 获取最新账单列表
	getBillDataList()
	// Close menu if open
	closeContextMenu()
	// 初始获取状态栏高度和屏幕高度 
	updateStatusBarHeight()

	// #ifdef APP-PLUS&&!APP-HARMONY
	util.setAndroidSystemBarColor('#F5F5F5')
	uni.setNavigationBarColor({
		animation: { // 动画效果
			duration: 100,
			timingFunc: 'easeIn'
		}
	})
	setTimeout(() => {
		plus.navigator.setStatusBarStyle("dark");
	}, 500);
	// #endif
})

onLoad(() => {
	// 进入账单页面埋点
	proxy.$apiUserEvent('all', {
		type: 'click',
		key: 'bill',
		value: "账单"
	})
})

/**
 * 获取账单列表
 */
const getBillDataList = () => {
	const allBillList = getBillList()

	console.log("getBillDataList------", allBillList)
	// 按月份分组
	const groupList = []
	allBillList.forEach(item => {
		// 查找itemInfoList中的createTime
		const createTimeItem = item.itemInfoList.find(info => info.key == 'createTime')
		const createTime = createTimeItem ? createTimeItem.value : new Date()

		const date = dateUtil.parseSafe(createTime)
		const year = date.getFullYear() + ''
		const month = (date.getMonth() + 1) + ''

		// 查找该月份是否已存在
		let monthGroup = groupList.find(g => g.year == year && g.month == month)
		if (!monthGroup) {
			monthGroup = {
				year,
				month,
				inCome: 0,
				outCome: 0,
				list: []
			}
			groupList.push(monthGroup)
		}

		// 处理单个账单数据格式
		const billItem = {
			id: item.id,
			orderId: item.itemInfoList.find(info => info.key == 'orderNumber')?.value || '',
			imgUrl: item.imgUrl,
			name: item.name,
			amount: item.money,
			classification: item.merchantOption.billClassify || '',
			isRefund: item.merchantOption.refund,
			isAdd: item.isAdd,
			money: item.money,
			time: dateUtil.smart(createTime),
			timestamp: createTime,
			merchantOption: item.merchantOption
		}

		monthGroup.list.push(billItem)

		// 计算收支
		const money = parseFloat(item.money || 0)
		if (item.isAdd) {
			monthGroup.inCome += money
		} else {
			if (item.orderStatus.includes('退款')) {
				// 退款算收入还是支出减少？通常退款在列表显示为绿色（收入），这里简单处理为收入
				// 如果是支出类型的单子的退款，实际上是钱回流
				monthGroup.inCome += money
			} else {
				monthGroup.outCome += money
			}
		}
	})

	// 排序：年份倒序，月份倒序
	groupList.sort((a, b) => {
		if (a.year != b.year) return b.year - a.year
		return b.month - a.month
	})

	//每个月内的账单按时间倒序
	groupList.forEach(group => {
		group.list.sort((a, b) => dateUtil.parseSafe(b.timestamp) - dateUtil.parseSafe(a.timestamp))
	})

	data.billList = groupList
}

onMounted(() => {
	// 在组件挂载后获取卡片位置
	getCardPositions()
})

// 更新状态栏高度
const updateStatusBarHeight = () => {
	uni.getSystemInfo({
		success: (res) => {
			data.statusBarHeight = res.statusBarHeight || 0
			console.log('直接获取状态栏高度:', data.statusBarHeight)
		}
	})
}

const billClick = (item) => {
	uni.navigateTo({
		url: '/pages/bill/bill-detail/bill-detail?id=' + item.id
	})
}

/**
 * 获取所有卡片相对于 scroll-view 顶部的距离
 */
const getCardPositions = () => {
	uni.createSelectorQuery().select('.bill-list-container').boundingClientRect(scrollViewRect => {
		uni.createSelectorQuery().selectAll('.bill-list-card').boundingClientRect(cardRects => {
			if (cardRects && cardRects.length > 0 && scrollViewRect) {
				// 计算每个卡片相对于 scroll-view 顶部的距离
				data.cardPositions = cardRects.map(rect => rect.top - scrollViewRect.top)
				console.log('卡片位置数据:', data.cardPositions)
			}
		}).exec()
	}).exec()
}

/**
 * 滚动列表
 */
const scrollList = (e) => {
	data.currentScrollTop = e.detail.scrollTop
	console.log("滚动高度", data.currentScrollTop)

	// 使用卡片位置数据
	if (data.cardPositions && data.cardPositions.length > 0) {
		// 找出当前可见的卡片（示例）
		const visibleCards = data.cardPositions.map((position, index) => ({
			index,
			position,
			isVisible: position <= data.currentScrollTop + data.statusBarHeight + 100
		}))

		console.log("可见卡片:", visibleCards)

		// 找出当前最顶部的卡片索引
		const currentCardIndex = data.cardPositions.findIndex(position =>
			position > data.currentScrollTop
		)

		console.log("当前最顶部卡片索引:", currentCardIndex)

		// 获取当前最顶部卡片的月份
		let currentMonthIndex = currentCardIndex
		if (currentCardIndex === -1) {
			// 所有卡片都在视口上方，取最后一个卡片
			currentMonthIndex = data.billList.length - 1
		} else if (currentCardIndex > 0) {
			// 当前视口最顶部的卡片是currentCardIndex - 1
			currentMonthIndex = currentCardIndex - 1
		}

		// 设置当前滚动到的月份
		if (currentMonthIndex >= 0 && currentMonthIndex < data.billList.length) {
			data.currentMonthData.month = parseInt(data.billList[currentMonthIndex].month)
			data.currentMonthData.year = data.billList[currentMonthIndex].year
			data.currentMonthData.inCome = data.billList[currentMonthIndex].inCome
			data.currentMonthData.outCome = data.billList[currentMonthIndex].outCome
			console.log("当前滚动到的月份:", data.currentMonthData)
		}
	}
}

/**
 * 点击标题弹出按钮
 * @param e 
 */
const clickTitlePopupButton = (button) => {
	button.click()
}

/**
 * 长按编辑/删除 - Custom Menu
 */
const onLongPress = ({ event, item }) => {
	console.log('Long press', event)
	// Calculate position
	// Use clientX/Y from touches if available
	let x = 0
	let y = 0
	if (event.touches && event.touches.length > 0) {
		x = event.touches[0].clientX
		y = event.touches[0].clientY
	} else if (event.detail && event.detail.x) {
		x = event.detail.x
		y = event.detail.y
	}

	// Adjust position to not go off screen (simple heuristic)
	const screenWidth = uni.getSystemInfoSync().windowWidth
	const screenHeight = uni.getSystemInfoSync().windowHeight

	if (x + 100 > screenWidth) x = screenWidth - 110
	if (y + 100 > screenHeight) y = y - 100 // show above if too low

	contextMenu.x = x
	contextMenu.y = y
	contextMenu.item = item
	contextMenu.visible = true
}

const closeContextMenu = () => {
	contextMenu.visible = false
	contextMenu.item = null
}

const handleEdit = () => {
	if (contextMenu.item) {
		uni.navigateTo({
			url: `/pages/bill/add-bill/add-bill?id=${contextMenu.item.id}&isEdit=${true}`
		})
	}
	closeContextMenu()
}

const handleDelete = () => {
	if (contextMenu.item) {
		const id = contextMenu.item.id
		uni.showModal({
			title: '提示',
			content: '确定要删除该账单吗？',
			success: function (res) {
				if (res.confirm) {
					deleteBill(id)
					getBillDataList()
					uni.showToast({
						title: '删除成功',
						icon: 'none'
					})
				}
			}
		})
	}
	closeContextMenu()
}
</script>

<style>
@import "@/common/main.css";

page {
	background-color: #F5F5F5;
}
</style>
<style>
.context-menu-mask {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 998;
	background-color: rgba(0, 0, 0, 0);
}

.context-menu {
	position: fixed;
	z-index: 999;
	background-color: #4c4c4c;
	border-radius: 4px;
	padding: 0;
	min-width: 80px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.menu-item {
	padding: 10px 15px;
	font-size: 14px;
	color: #ffffff;
	text-align: center;
	white-space: nowrap;
}

.border-bottom {
	border-bottom: 1rpx solid #5d5d5d;
}
</style>
<style lang="less" scoped>
.nav-bar-search {
	background-color: #ffffff;
	border-radius: 4px;
	height: 32px;
	padding: 4px 0;

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

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

	::v-deep .input-placeholder {
		color: var(--text-secondary);
	}

	.line {
		width: 1px;
		background-color: var(--border-color);
	}

	.search-button {
		font-size: 14px;
		padding: 0 12px;
		color: var(--text-secondary);
		font-weight: 500;
	}
}

::v-deep .uni-navbar__header-btns-right {
	width: auto !important;
}

::v-deep .uni-navbar__header-btns-left {
	width: auto !important;
}

.filter-box {
	position: fixed;
	height: 48px;
	width: 100%;
	z-index: 1;
	background-color: #F5F5F5;

	.filter-button {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 120rpx;
		height: 28px;
		position: absolute;
		top: 10px;
		right: 0;
	}

	.blur {
		background-color: #F5F5F5;
		filter: blur(5px);
	}
}

.filter-icon {
	width: 24rpx;
	height: 24rpx;
}

.filter-line {
	display: flex;
	flex-wrap: nowrap;
	margin: 0 12px;
	margin-top: 10px;
	overflow: hidden;
	overflow-x: scroll;

	&::-webkit-scrollbar {
		display: none;
		width: 0;
		height: 0;
		color: transparent;
	}

	.filter-item {
		background-color: #ffffff;
		color: var(--text-primary);
		font-size: 14px;
		padding: 4px 16px;
		width: auto;
		border-radius: 14px;
		margin-right: 8px;
		white-space: nowrap;
		flex-shrink: 0;
	}

	.active-text {
		color: #1B71F8;
	}
}

.bill-list-container {
	position: relative;
	// padding: 0 12px;
	flex: 1;
	padding-bottom: 12px;

	.sticky-conatianer {
		position: fixed;
		width: 100%;
		background-color: #F5F5F5;
		padding: 12px;
		z-index: 1;

		.month {
			display: flex;
			align-items: center;
			font-size: 13px;

			.down {
				width: 16px;
				height: 16px;
				margin-left: 4px;
			}
		}

		.income-ande-outCome {
			display: flex;
			font-size: 13px;

			.item {
				margin-right: 16px;

				.money {
					font-size: 12px;
					margin-left: 2px;
				}
			}
		}

	}
}

.bill-list-card {
	border-radius: 8px;
	margin: 0 12px;
	margin-bottom: 12px;
	// background-color: #FFFFFF;

	.list-title-card {
		background-color: #FFFFFF;
		border-radius: 8px 8px 0 0;
		padding: 10px 12px;

		.month {
			font-size: 32px;
			color: var(--text-primary);
			font-weight: 500;
		}

		.down {
			margin-left: 3px;
		}

		.income-ande-outCome {
			display: flex;

			.item {
				display: flex;
				flex-direction: column;
				min-width: 80px;
				max-width: 120px;
				margin-right: 10px;

				.font-11 {
					font-size: 12px;
					margin-right: 4px;
				}
			}

			.title {
				font-size: 12px;
				color: var(--text-secondary);
			}

			.amount {
				font-size: 16px;
				color: var(--text-primary);
				font-weight: 500;
			}


		}

		.analysis-box {
			align-items: flex-end;

			.analysis-button {
				padding: 8px 12px;
				background: linear-gradient(90deg, #187AFF 0%, #3295FC 100%);
				border-radius: 16px 16px 16px 16px;
				color: #FFFFFF;
				font-size: 12px;
				line-height: 16px;
				height: 32px;
				flex-shrink: 0;
			}
		}
	}

	.list-title {
		display: flex;
		align-items: center;
	}

	.current-month {
		position: relative;
		padding: 10px 12px 18px;
		background: url('/static/image/bill/bill-list/current-month-bill-bg.png') no-repeat center center;
		background-size: 100% 100%;
		background-color: transparent;

		.income-ande-outCome {
			margin-top: 8rpx;
			display: flex;

			.item {
				display: flex;
				flex-direction: column;
				min-width: 80px;
				max-width: 120px;
				margin-right: 10px;

				.font-11 {
					font-size: 12px;
					margin-right: 4px;
				}
			}

			.title {
				font-size: 12px;
				color: var(--text-secondary);
			}

			.amount {
				font-size: 16px;
				color: var(--text-primary);
				font-weight: 500;
			}
		}

		.income-ande-outCome-analysis {
			display: flex;
			justify-content: space-between;

			.left-box {
				display: flex;
				align-items: flex-end;
				margin-bottom: 3px;

				.text {
					font-size: 13px;
					line-height: 14px;
					color: var(--text-primary);
				}
			}

			.right-icon {
				width: 14px;
				height: 14px;
				margin-left: 5px;
			}

			.analysis-button {
				padding: 8px 12px;
				background: linear-gradient(90deg, #187AFF 0%, #3295FC 100%);
				border-radius: 16px 16px 16px 16px;
				color: #FFFFFF;
				font-size: 12px;
				line-height: 16px;
			}
		}
	}

	.bg-right-text {
		display: flex;
		align-items: center;
		color: #2B3841;
		font-size: 22rpx;
		position: absolute;
		right: 18rpx;
		top: 32rpx;

		.right-icon {
			width: 16rpx;
			height: 16rpx;
			margin-left: 2rpx;
		}

	}

	.bill-list {
		background-color: #ffffff;
	}

}
</style>
