<template>
	<!-- 水印 -->
	<view v-if="$isVip()">
		<watermark :dark="data.dark" source="uni_alipay_bill_details" />
		<liu-drag-button :canDocking="false" @clickBtn="$goRechargePage('watermark', 'uni_alipay_bill_details')">
			<image src='/static/lottie/watermark.gif' mode="widthFix" style="width:94px;height:74px;" ></image>
		</liu-drag-button>
	</view>
	<view style="overflow: hidden;overflow-y: scroll; height: 100vh;">
		<navBar :title="data.navBar.title" :bgColor="data.navBar.bgColor" tipLayerType="bill-detail-tip" isTipLayer
			tipLayerText="编辑账单信息" :buttonGroup="data.navBar.buttonGroup" @button-click="util.clickTitlePopupButton">
		</navBar>
		<!-- 账单信息容器 -->
		<view class=" add-bill-container">
			<!-- 头像 -->
			<view class="avatar-box">
				<image class="avatar-image" :src="billData.imgUrl || defaultImage" @click="changeAvatar"></image>
			</view>
			<!-- 主要信息 -->
			<view class="main-info flex-align-center flex-column">
				<!-- 名称 -->
				<view class="name info-item-input">
					<!-- 隐藏的text用于测量宽度 -->
					<text class="text-measure">{{ billData.name }}</text>
				</view>
				<!-- 金额 -->
				<view class="money-box flex-align-center">
					<view class="add money alipay-font">{{ billData.isAdd ? '+' : '-' }}</view>
					<!-- 金额 -->
					<view class=" money info-item-input alipay-font" style="height: 77rpx;">
						<!-- 隐藏的text用于测量宽度 -->
						<text class="text-measure font-w500" style="font-size: 64rpx;">{{
							numberUtil.formatMoneyWithThousand(billData.money) }}</text>
					</view>
				</view>

				<!-- 订单状态 -->
				<view class="order-status-info" :class="{ isRefund: billData.merchantOption.refund }">
					{{ billData.orderStatus }}
				</view>
			</view>
			<!-- 详情信息列表 -->
			<view class="detail-info-container">
				<template v-for="item in visibleItemInfoList" :key="item.id">
					<view class="info-item-box"
						v-if="item.key != 'transferNote' || billData.merchantOption.isTransferNote"
						:class="{ 'bottom-border': item.key == 'relatedRecord' }">
						<view class="item-label">
							{{ item.label }}
						</view>
						<view v-if="item.type != 'link' && item.key != 'paymentReward'" class="info-item-input">
							<!-- 隐藏的text用于测量宽度 -->
							<text v-if="item.key == 'merchantOrderNumber' && billData.merchantOption.isShowBarcode"
								class="text-measure">商家可扫码退款或查询交易</text>
							<text v-else class="text-measure">{{ item.value }}</text>
						</view>
						<view v-if="item.key == 'paymentReward'" class="payment-reward-box">
							<view class="payment-reward flex-align-center">
								<image class="payment-reward-image"
									src="/static/image/bill/add-bill/payment-reward.png"></image>
								<text>立即领取{{ item.value }}积分</text>
							</view>
						</view>

					</view>
					<!-- 条形码 -->
					<view v-if="item.key == 'merchantOrderNumber' && billData.merchantOption.isShowBarcode"
						style="background-color: #FFFFFF;padding:0 2rem;">
						<view class="barcode-box"
							style="display: flex; justify-content: center;flex-direction: column; align-items: center;">
							<l-barcode class="barcode" :lineLength="50" :font-size="12" text-align="center"
								text-position="bottom" color="#1A1A1A" :text="item.value"
								:displayValue='false'></l-barcode>
							<text style="font-size: 24rpx;margin-top: -10rpx; z-index: 1;color: #969696;">{{
								item.value.slice(0,
									4) }}******点击查看订单号</text>
						</view>
					</view>
					<view v-if="item.type == 'link'" class="info-item-link">
						<view class="img-box">
							<image class="img w100 h100" :src="item.value.imgUrl || defaultImage"></image>
						</view>
						<view class="textarea-box flex-1">
							{{ item.value.text }}
						</view>
						<view class="quantity">
							{{ item.value.quantity }}
						</view>
					</view>
				</template>
				<!-- 服务详情 -->
				<view v-if="billData.merchantOption.serviceDetail || billData.selectId == 8">
					<view class="info-item-box">
						<view class="item-label">
							服务详情
						</view>
					</view>
					<view class="info-item-box w100">
						<view v-if="billData.merchantOption.serviceDetail"
							class="service-detail-box w100 flex-align-center flex-between">
							<view class="info flex-align-center">
								<image class="service-detail-image"
									:src="billData.merchantOption.serviceDetailInfo.imgUrl">
								</image>
								<text class="text">{{ billData.merchantOption.serviceDetailInfo.text }}</text>
							</view>
							<view class="right-box flex-align-center">
								<text class="text-right">{{
									getServiceDetailRightText(billData.merchantOption.serviceDetailInfo.rightText
									) }}</text>
								<image class="icon" src="/static/image/common/right-grey.png"></image>
							</view>
						</view>
						<!-- 商家码收款服务详情 -->
						<view v-if="billData.selectId == 8"
							class="service-detail-box select-id-8 w100 flex-align-center">
							<image class="alipay-merchant-img"
								src="/static/image/bill/bill-detail/alipay-merchant-img.png"></image>
							<view class="center-box flex-1">
								<view class="title">支付宝商家服务-收款记录</view>
								<view class="flex-align-center">
									<text class="text-option-item">收款明细</text>
									<view class="line"></view>
									<text class="text-option-item">顾客画像</text>
									<view class="line"></view>
									<text class="text-option-item">有奖励</text>
								</view>
							</view>
							<view class="right-btn">查看详情</view>
						</view>
					</view>
				</view>
				<!-- 推荐服务 -->
				<view v-if="billData.merchantOption.recommendService">
					<view class="info-item-box">
						<view class="item-label">
							推荐服务
						</view>
					</view>
					<view class="info-item-box w100">
						<view class="service-detail-box recommend-service-box w100 flex-align-center flex-between">
							<view class="info flex-align-center">
								<text class="text">{{ billData.merchantOption.recommendServiceInfo.text }}</text>
							</view>
							<view class="right-box flex-align-center">
								<text class="text-right">去看看</text>
								<image class="icon" src="/static/image/common/right-blue.png"></image>
							</view>
						</view>
					</view>
				</view>
				<!-- 服务推荐 -->
				<view v-if="billData.merchantOption.serviceRecommend">
					<view class="info-item-box">
						<view class="item-label">
							服务推荐
						</view>
					</view>
					<view class="info-item-box w100">
						<view class="service-detail-box service-recommend-box w100 flex-align-center flex-between">
							<text class="text">{{ billData.merchantOption.serviceRecommendInfo.text }}</text>
							<image class="icon" src="/static/image/common/right-blue.png"></image>
						</view>
					</view>
				</view>


			</view>
			<view v-if="!data.isMoreShow" class="more-box">
				<text @click="data.isMoreShow = !data.isMoreShow">更多</text>
				<image class="icon" src="/static/image/common/down-grey.png"></image>
			</view>
		</view>

		<view class="bill-management">
			<view class="title">账单管理</view>
			<view v-if="billData.merchantOption.isShowBillAnalysis" class="top-box" style="background-color: #FBF8F1;">
				<text style="font-size: 24rpx;color: #B7971B;">{{
					billData.merchantOption.billAnalysisInfo.text || '本笔登上月收入榜，看看分析吧' }}</text>
				<uni-icons type="right" size="10" color="#B7971B"></uni-icons>
			</view>
			<view class="bill-classification bill-management-item">
				<text class="label">账单分类</text>
				<view class="right-box flex-align-center" @click="handleBillManagementClick('billClassify')">
					<text>{{ billData.merchantOption.billClassify }}</text>
					<uni-icons style="margin-left: 8rpx;" type="right" size="12" color="#969696"></uni-icons>
				</view>
			</view>
			<view class="bill-management-item">
				<text v-if="billData.merchantOption.note.text || billData.merchantOption.note.isImage"
					class="label">标签</text>
				<text v-else class="label">标签和备注</text>
				<view class="tag-box right-box flex-1 flex-align-center"
					@click="handleBillManagementClick('tagAndNote')">
					<text v-if="billData.merchantOption.tag.length == 0 || !billData.merchantOption.tag">添加</text>
					<view v-else v-for="(tag, index) in billData.merchantOption.tag.slice(0, 3)" :key="tag"
						class="tag-item">
						<text>{{ index === 2 ? (tag.substring(0, 1) + (tag.length > 1 ? '...' : '')) :
							tag }}</text>
					</view>
				</view>
				<view class="right-box flex-align-center">
					<uni-icons style="margin-left: 8rpx;" type="right" size="12" color="#969696"></uni-icons>
				</view>
			</view>
			<view class="bill-management-item"
				v-if="billData.merchantOption.note.text || billData.merchantOption.note.isImage">
				<text class="label">备注</text>
				<view class="tag-box right-box flex-1 flex-align-center"
					@click="handleBillManagementClick('tagAndNote')">
					<view class="remark-box flex-align-center text-align-right flex-1">
						<image v-if="billData.merchantOption.note.isImage" class="remark-img"
							src="/static/image/bill/bill-detail/bill-remark-img.png">
						</image>
						<view class="text">
							{{ billData.merchantOption.note.text }}
						</view>
					</view>
				</view>
				<view class="right-box flex-align-center">
					<uni-icons style="margin-left: 8rpx;" type="right" size="12" color="#969696"></uni-icons>
				</view>
			</view>
			<view class="bill-management-item" style="margin-top: 32rpx;">
				<text class="label">计入收支</text>
				<view class="right-box flex-align-center" style="transform:scale(0.6); width: 100rpx;">
					<switch color="#1676FE" :checked="billData.merchantOption.countInAndOut"
						@change="handleCountInAndOutChange" />
				</view>
			</view>
			<view class="bottom-icon-box">
				<view class="line"></view>
				<view class="icon-list flex flex-wrap">
					<template v-for="(item, index) in billBottomIconList" :key="index">
						<view v-if="billData.bottomIcons.includes(item.id)" class="icon-item flex-align-center">
							<image class="bottom-icon" :src="`/static/image/bill/blue-icon/${item.icon}.png`"></image>
							<text>{{ item.name }}</text>
						</view>
					</template>
				</view>
			</view>

		</view>
		
		<ZdySafeBottom bgColor="#F5F5F5"/>
	</view>


	<billManagementPopup ref="billManagementPopupRef" @confirm="handleBillManagementConfirm"></billManagementPopup>
</template>

<script setup>
import navBar from '@/components/nav-bar/nav-bar.vue'
import billManagementPopup from '@/components/bill-management-popup/bill-management-popup.vue'
import addBillJson from '@/static/json/add-bill.json'
import ZdySafeBottom from '@/components/safeBottom/safeBottom.vue'
const {
	billBottomIconList,
	classifyTabBar
} = addBillJson
import {
	util,
	randomUtil,
	numberUtil
} from '@/utils/common.js'

import {
	reactive,
	toRefs,
	ref,
	nextTick,
	getCurrentInstance,
	computed
} from 'vue'
import {
	onLoad,
	onShow,
} from '@dcloudio/uni-app'


import {
	useStore
} from '@/store/index.js'
const {
	getBillList,
	updateBill
} = useStore()

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

const billManagementPopupRef = ref(null)

const buttonGroup = [{
	name: "编辑账单",
	click: () => {
		uni.navigateTo({
			url: `/pages/bill/add-bill/add-bill?id=${billData.value.id}&isEdit=${true}`
		})
	}
}]

const defaultImage = "/static/image/bill/add-bill/add-avatar.png"
const data = reactive({
	navBar: {
		title: '账单详情',
		bgColor: '#F5F5F5',
		buttonGroup: buttonGroup
	},
	billId: "",
	isMoreShow: false,
	// 账单数据
	billData: {
		id: "",
		selectId: -1,
		imgUrl: "",
		name: '',
		isAdd: false,
		money: "",
		balance: 0,
		payMethod: "",
		orderStatus: '交易成功',
		itemInfoList: [],
		bottomIcons: [0, 1, 2, 3],
		merchantOption: {
			serviceDetail: false,
			serviceDetailInfo: {
				imgUrl: '',
				rightText: 0,
				text: '收钱吧'
			},
			recommendService: false,
			recommendServiceInfo: {
				text: '你有一个免费取现机会'
			},
			serviceRecommend: false,
			serviceRecommendInfo: {
				text: '恭喜你有6元转账保障福利待领取！'
			},
			refund: false,
			countInAndOut: false,
			payReward: false
		}
	}
})

let {
	billData
} = toRefs(data)

const visibleItemInfoList = computed(() => {
	if (!billData.value.itemInfoList) return []
	return billData.value.itemInfoList.filter(item => {
		// Payment Reward Logic
		if (item.key == 'paymentReward' && !billData.value.merchantOption.payReward) {
			return false
		}

		// Show More Logic
		if (item.isMore && !data.isMoreShow) {
			return false
		}

		return true
	})
})

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

onLoad((option) => {
	// 进入账单详情页面埋点
	proxy.$apiUserEvent('all', {
		type: 'click',
		key: 'bill_details',
		value: "账单详情"
	})
	console.log(option)
	if (option.id) {
		data.billId = option.id
	}
})

function getBillData(id) {
	// 获取当前id账单
	const existingBill = getBillList().find(b => b.id === id)
	console.log("existingBill", existingBill)
	if (existingBill) {
		//表单赋值
		billData.value.id = existingBill.id
		billData.value.selectId = existingBill.selectId
		billData.value.name = existingBill.name
		billData.value.money = existingBill.money
		billData.value.imgUrl = existingBill.imgUrl
		billData.value.isAdd = existingBill.isAdd
		billData.value.orderStatus = existingBill.orderStatus
		billData.value.balance = existingBill.balance
		billData.value.payMethod = existingBill.payMethod
		billData.value.bottomIcons = existingBill.bottomIcons
		billData.value.merchantOption = JSON.parse(JSON.stringify(existingBill.merchantOption))

		// 等待监听处理selectId更改，然后覆盖itemInfoList
		nextTick(() => {
			let itemInfoList = JSON.parse(JSON.stringify(existingBill.itemInfoList))
			// 检查是否有缺失的字段（如orderNumber, merchantOrderNumber）并补充
			const template = classifyTabBar.find(item => item.selectId == existingBill.selectId)
			if (template && template.itemInfoList) {
				const fieldsToCheck = ['orderNumber', 'merchantOrderNumber']
				fieldsToCheck.forEach(key => {
					// 查找当前数据中是否存在该字段
					const exists = itemInfoList.some(item => item.key === key)
					// 查找模板中是否定义了该字段
					const templateItem = template.itemInfoList.find(item => item.key === key)

					if (!exists && templateItem) {
						// 如果当前数据缺失但模板中有定义，则补全
						const newItem = JSON.parse(JSON.stringify(templateItem))
						// 生成随机值
						newItem.value = randomUtil.randomOrderNumber(28)
						itemInfoList.push(newItem)
					}
				})
			}
			billData.value.itemInfoList = itemInfoList
			// Edit mode
			updateBill(billData.value.id, billData.value)
		})
	}
}

// 获取服务详情右侧选项
const getServiceDetailRightText = (value) => {
	// 服务详情右侧选项
	const serviceDetailRightTextList = [
		{
			"value": 0,
			"text": "进入小程序"
		},
		{
			"value": 1,
			"text": "查看详情"
		}
	]
	const item = serviceDetailRightTextList.find(item => item.value === Number(value))
	return item?.text || ""
}

// 计入收支
function handleCountInAndOutChange(e) {
	billData.value.merchantOption.countInAndOut = e.detail.value
	console.log(e, billData.value)

	// Edit mode
	updateBill(billData.value.id, billData.value)
}

// 账单管理
const handleBillManagementClick = (type) => {
	let initData = {}
	if (type == 'billClassify') {
		initData = {
			classifyName: billData.value.merchantOption.billClassify
		}
	} else if (type == 'tagAndNote') {
		initData = {
			tags: billData.value.merchantOption.tag,
			note: billData.value.merchantOption.note
		}
	}
	billManagementPopupRef.value.open(type, initData)
}

/**
 * 确认账单管理弹窗
 * @param data 
 */
const handleBillManagementConfirm = (data) => {
	console.log(data)
	if (data.type == 'billClassify') {
		billData.value.merchantOption.billClassify = data.value
	} else if (data.type == 'tagAndNote') {
		billData.value.merchantOption.tag = data.tags
		billData.value.merchantOption.note = data.note
	}
	updateBill(billData.value.id, billData.value)
}
</script>

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

page {
	background-color: #F5F5F5;
}
</style>
<style lang="less" scoped>
.add-bill-container {
	background-color: #ffffff;
	margin: 24rpx;
	margin-top: 34rpx;
	padding: 24rpx;
	border-radius: 16rpx 16rpx 16rpx 16rpx;

	.random-dice {
		width: 100%;
		text-align: right;

		.random-dice-image {
			width: 64rpx;
			height: 64rpx;
		}
	}
}



.avatar-box {
	margin-top: 12rpx;
	text-align: center;
	margin-bottom: 26rpx;

	.avatar-image {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
	}
}

.main-info {
	color: #1a1a1a;
	font-size: 64rpx;

	.order-status-info {
		font-size: 28rpx;
		margin-top: 12rpx;
	}

	.isRefund {
		color: #EA6B48;
	}
}

.detail-info-container {
	padding-top: 36rpx;

	.info-item-input {
		font-size: 26rpx;

		.text-measure {
			font-size: 26rpx;
		}

		.text-input {
			font-size: 26rpx;
		}
	}

	.payment-reward-box {
		background-color: #FFEFDB;
		border-radius: 26rpx 26rpx 26rpx 26rpx;
		padding: 10rpx 16rpx;
		line-height: 32rpx;
		color: #EC670C;
		font-size: 26rpx;

		.payment-reward-image {
			width: 32rpx;
			height: 32rpx;
			margin-right: 10rpx;
		}
	}

	.info-item-link {
		display: flex;
		align-items: center;
		padding: 12rpx 16rpx;
		background-color: #F6F7FB;
		border-radius: 20rpx 20rpx 20rpx 20rpx;

		.img-box {
			width: 88rpx;
			height: 88rpx;
			border-radius: 8rpx;
			margin-right: 22rpx;
			background-color: #E8EDF2;

			.img {
				border-radius: 8rpx 8rpx 8rpx 8rpx;
			}
		}

		.textarea-box {
			height: 40px;
			font-size: 26rpx;
			color: #1a1a1a;
			font-weight: 500;
			margin-right: 10rpx;
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-line-clamp: 2;
			line-clamp: 2;
			-webkit-box-orient: vertical;
		}

		.quantity {
			font-size: 22rpx;
			color: #969696;
			text-align: right;
			min-width: 100rpx;
		}
	}

	.service-detail-box {
		padding: 22rpx 24rpx;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		background-color: #F6F7FB;

		.service-detail-image {
			width: 44rpx;
			height: 44rpx;
			border-radius: 50%;
			margin-right: 8rpx;
		}

		.text {
			font-size: 22rpx;
			line-height: 22rpx;
			color: #333333;
		}

		.text-right {
			font-size: 22rpx;
			color: #969696;
			line-height: 22rpx;
			text-align: right;
		}

		.icon {
			width: 24rpx;
			height: 24rpx;
			margin-left: 8rpx;
		}
	}

	.select-id-8 {
		padding: 24rpx 16rpx;

		.alipay-merchant-img {
			width: 88rpx;
			height: 88rpx;
			margin-right: 30rpx;
		}

		.center-box {
			.title {
				font-size: 26rpx;
				line-height: 32rpx;
				color: #1A1A1A;
				font-weight: 500;
				margin-bottom: 16rpx;
			}

			.line {
				width: 1rpx;
				background-color: #969696;
				margin: 0 10rpx;
				height: 18rpx;
			}

			.text-option-item {
				font-size: 22rpx;
				color: #969696;
			}
		}

		.right-btn {
			border-radius: 25rpx;
			border: 1rpx solid #043E77;
			color: #043E77;
			font-size: 22rpx;
			padding: 10rpx 24rpx;
		}
	}

	.recommend-service-box {
		padding: 22rpx 16rpx;
		background-color: #FFF5F6;

		.text {
			font-size: 26rpx;
			line-height: 32rpx;
			color: #9E2036;
			font-weight: 500;
		}

		.text-right {
			font-size: 24rpx;
			line-height: 32rpx;
			color: #9E2036;
		}
	}

	.service-recommend-box {
		background-color: #F6F7FB;
		font-weight: 500;

		.text {
			color: #123D72;
			font-size: 26rpx;
			line-height: 32rpx;
		}
	}


	// 条形码
	.barcode-box {
		display: flex;
		justify-content: center;
		overflow: hidden;
		background-color: #FFFFFF;

		.barcode {}
	}
}

.info-item-box {
	display: flex;
	align-items: flex-start;
	margin: 20rpx 0;

	.item-label {
		min-width: 160rpx;
		margin-right: 40rpx;
		font-size: 26rpx;
		color: var(--text-secondary);
	}
}

.bottom-border {
	padding-bottom: 20rpx;
	border-bottom: 0.5px solid #EDEDED;
}

.info-item-input {
	display: inline-flex;
	align-items: center;
	position: relative;
	flex: 1;
	max-width: 100%;
	width: auto;
	min-height: 20px;

	/* 隐藏的测量元素 */
	.text-measure {
		white-space: pre-wrap;
		word-break: break-all;
		color: var(--text-color);
		font-family: inherit;
		font-size: 28rpx;
		width: 100%;
		min-width: 20px;
		height: auto;
	}
}

.more-box {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	font-size: 26rpx;
	color: #969696;

	.icon {
		width: 24rpx;
		height: 24rpx;
		margin-left: 8rpx;
	}

	margin: 28rpx 0;
}

.bill-management {
	margin: 16rpx 24rpx;
	background-color: #ffffff;
	padding: 24rpx 24rpx 40rpx;
	border-radius: 24rpx;

	.title {
		font-weight: bold;
		margin-bottom: 30rpx;
	}

	.bill-management-item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 40rpx;
		font-size: 26rpx;
		color: #1a1a1a;

		.tag-box {
			justify-content: flex-end;

			.tag-item {
				background-color: #E6F2FF;
				color: #2788D1;
				font-size: 24rpx;
				padding: 0 16rpx;
				border-radius: 4rpx;
				height: 52rpx;
				line-height: 52rpx;
				margin-right: 8rpx;
			}
		}

		.remark-box {
			justify-content: flex-end;
			color: #969696;
			font-size: 26rpx;

			.text {
				max-width: 280rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}

			.remark-img {
				width: 40rpx;
				height: 40rpx;
				margin-right: 8rpx;
			}
		}

		.right-box {
			color: #969696;
		}
	}

	.bottom-icon-box {
		margin-top: 8rpx;

		.icon-item {
			margin-top: 32rpx;
			width: 50%;
			font-size: 26rpx;
			color: #12447A;
		}

		.bottom-icon {
			width: 28rpx;
			height: 28rpx;
			margin-right: 18rpx;
		}
	}

	.line {
		height: 1px;
		width: 100%;
		background-color: #EDEDED;
		transform: scaleY(0.5);
	}
}

.top-box {
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-radius: 16rpx;
	padding: 22rpx 24rpx;
}
</style>