<template>
	<view style="overflow: hidden;overflow-y: scroll; height: 100vh;">
		<navBar :title="data.navBar.title" :bgColor="data.navBar.bgColor" :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;">{{ 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 billData.itemInfoList" :key="item.id">
					<view class="info-item-box" :class="{ 'bottom-border': item.key == 'relatedRecord' }"
						v-if="item.key != 'paymentReward' || (item.key == 'paymentReward' && billData.merchantOption.payReward)">
						<view class="item-label">
							{{ item.label }}
						</view>
						<view v-if="item.type != 'link' && item.key != 'paymentReward'" class="info-item-input">
							<!-- 隐藏的text用于测量宽度 -->
							<text 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.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 class="more-box">
				<text>更多</text>
				<image class="icon" src="/static/image/common/down-grey.png"></image>
			</view>
		</view>

		<view class="bill-management">
			<view class="title">账单管理</view>
			<view class="top-box" style="background-color: #FBF8F1;">
				<text style="font-size: 24rpx;color: #B7971B;">本笔登上月收入榜，看看分析吧</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>
	</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 {
	billBottomIconList
} from '@/static/json/add-bill.json'
import {
	util
} from '@/utils/common.js'

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


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

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: "",
	// 账单数据
	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)

onShow(() => {
	getBillData(data.billId)
	// #ifdef APP-PLUS
	util.setAndroidSystemBarColor('#F5F5F5')
	// #endif
})

onLoad((option) => {
	console.log(option)
	if (option.id) {
		data.billId = option.id
	}
})

function getBillData(id) {
	// 获取当前id账单
	const existingBill = getBillList().find(b => b.id === id)
	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(() => {
			billData.value.itemInfoList = JSON.parse(JSON.stringify(existingBill.itemInfoList))
		})
	}
}

// 获取服务详情右侧选项
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
		billData.value.selectId = data.id
	} 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;
		}
	}
}

.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;
	min-width: 20px;
	max-width: 100%;
	width: auto;
	overflow: hidden;
	min-height: 20px;

	/* 隐藏的测量元素 */
	.text-measure {
		white-space: break-spaces;
		color: var(--text-color);
		font-family: inherit;
		font-size: 28rpx;
		width: auto;
		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>