<template>
	<un-pages
		:show-nav-bar="true"
		nav-bar-title="账单详情"
		:show-back="true"
	>
		<view class="page-content" v-if="billDetail">
			<!-- 金额卡片 -->
			<view class="amount-card" :class="billDetail.type">
				<view class="amount-icon" :style="{background: getCategoryColor(billDetail.category_id)}">
					<text>{{ getCategoryIcon(billDetail.category_id) }}</text>
				</view>
				<view class="amount-info">
					<text class="amount-label">{{ billDetail.type === 'expense' ? '支出' : '收入' }}</text>
					<text class="amount-value">{{ billDetail.type === 'expense' ? '-' : '+' }}¥{{ parseFloat(billDetail.amount).toFixed(2) }}</text>
				</view>
			</view>

			<!-- 分类和支付方式 -->
			<view class="info-section">
				<view class="info-item">
					<text class="info-label">分类</text>
					<text class="info-value">{{ billDetail.category }}</text>
				</view>
				<view class="info-item" v-if="billDetail.payment_method">
					<text class="info-label">支付方式</text>
					<view class="payment-badge">
						<uni-icons :type="getPaymentIcon(billDetail.payment_method)" size="14" :color="getPaymentColor(billDetail.payment_method)"></uni-icons>
						<text>{{ getPaymentName(billDetail.payment_method) }}</text>
					</view>
				</view>
			</view>

			<!-- 详细信息 -->
			<view class="detail-section">
				<view class="section-title">详细信息</view>
				<view class="detail-item">
					<view class="detail-icon">
						<uni-icons type="calendar" size="18" color="#667eea"></uni-icons>
					</view>
					<view class="detail-content">
						<text class="detail-label">记账日期</text>
						<text class="detail-value">{{ formatDetailDate(billDetail.bill_date) }}</text>
					</view>
				</view>
				<view class="detail-item">
					<view class="detail-icon">
						<uni-icons type="person" size="18" color="#667eea"></uni-icons>
					</view>
					<view class="detail-content">
						<text class="detail-label">创建者</text>
						<text class="detail-value">{{ billDetail.user_name || (billDetail.user?.nickname || billDetail.user?.username || '未知') }}</text>
					</view>
				</view>
				<view class="detail-item" v-if="billDetail.remark">
					<view class="detail-icon">
						<uni-icons type="compose" size="18" color="#667eea"></uni-icons>
					</view>
					<view class="detail-content">
						<text class="detail-label">备注</text>
						<text class="detail-value">{{ billDetail.remark }}</text>
					</view>
				</view>
				<view class="detail-item">
					<view class="detail-icon">
						<uni-icons type="notification-filled" size="18" color="#667eea"></uni-icons>
					</view>
					<view class="detail-content">
						<text class="detail-label">创建时间</text>
						<text class="detail-value">{{ formatDateTime(billDetail.created_at) }}</text>
					</view>
				</view>
			</view>

			<!-- 操作按钮 -->
			<view class="action-buttons" v-if="canEdit">
				<button class="action-btn edit-btn" @tap="handleEdit" :loading="loading">
					<uni-icons type="compose" size="18" color="#fff"></uni-icons>
					<text>编辑</text>
				</button>
				<button class="action-btn delete-btn" @tap="handleDelete" :loading="loading">
					<uni-icons type="trash" size="18" color="#fff"></uni-icons>
					<text>删除</text>
				</button>
			</view>
		</view>

		<!-- 加载状态 -->
		<view class="loading-container" v-else-if="loading">
			<uni-load-more status="loading"></uni-load-more>
		</view>
	</un-pages>
</template>

<script>
import tool from '@/utils/tool'

export default {
	data() {
		return {
			loading: false,
			billId: null,
			billDetail: null,
			categoryMap: {
				// 支出分类
				1: { name: '餐饮', icon: '🍜', color: '#FF6B6B' },
				2: { name: '交通', icon: '🚗', color: '#4ECDC4' },
				3: { name: '购物', icon: '🛒', color: '#45B7D1' },
				4: { name: '娱乐', icon: '🎮', color: '#96CEB4' },
				5: { name: '医疗', icon: '💊', color: '#FFEAA7' },
				6: { name: '教育', icon: '📚', color: '#DDA0DD' },
				7: { name: '居住', icon: '🏠', color: '#98D8C8' },
				8: { name: '其他', icon: '📦', color: '#BDC3C7' },
				// 收入分类
				101: { name: '工资', icon: '💰', color: '#2ECC71' },
				102: { name: '奖金', icon: '🎁', color: '#E74C3C' },
				103: { name: '投资', icon: '📈', color: '#3498DB' },
				104: { name: '兼职', icon: '💼', color: '#9B59B6' },
				105: { name: '其他', icon: '💎', color: '#1ABC9C' }
			},
			paymentMap: {
				'微信': { name: '微信', icon: 'weixin', color: '#07C160' },
				'支付宝': { name: '支付宝', icon: 'redo', color: '#1677FF' },
				'银行卡': { name: '银行卡', icon: 'camera', color: '#FF6B6B' },
				'现金': { name: '现金', icon: 'wallet', color: '#FFA500' },
				'其他': { name: '其他', icon: 'more', color: '#999999' }
			}
		}
	},
	computed: {
		currentUserId() {
			return this.$store.state.user.userInfo?.uid
		},
		canEdit() {
			if (!this.billDetail || !this.currentUserId) return false
			return this.billDetail.user?.uid === this.currentUserId
		}
	},
	onLoad(options) {
		if (options.id) {
			this.billId = parseInt(options.id)
			this.loadBillDetail()
		} else {
			uni.showToast({
				title: '账单ID不能为空',
				icon: 'none'
			})
			setTimeout(() => {
				uni.navigateBack()
			}, 1500)
		}
	},
	methods: {
		async loadBillDetail() {
			this.loading = true
			try {
				const res = await this.$api.bill.detail.get({ id: this.billId })
				if (res && res.code === 1 && res.data) {
					this.billDetail = res.data
				} else {
					uni.showToast({
						title: res?.message || '加载失败',
						icon: 'none'
					})
					setTimeout(() => {
						uni.navigateBack()
					}, 1500)
				}
			} catch (error) {
				console.error('加载账单详情失败', error)
				uni.showToast({
					title: error?.message || '加载失败',
					icon: 'none'
				})
				setTimeout(() => {
					uni.navigateBack()
				}, 1500)
			} finally {
				this.loading = false
			}
		},
		handleEdit() {
			uni.navigateTo({
				url: `/pages/account/bill/add?id=${this.billId}`
			})
		},
		handleDelete() {
			uni.showModal({
				title: '删除确认',
				content: '确定要删除这条账单记录吗？删除后无法恢复。',
				confirmColor: '#FF6B6B',
				success: async (res) => {
					if (res.confirm) {
						await this.performDelete()
					}
				}
			})
		},
		async performDelete() {
			this.loading = true
			try {
				const res = await this.$api.bill.delete.post({
					id: this.billId
				})

				if (res && res.code === 1) {
					uni.showToast({
						title: '删除成功',
						icon: 'success',
						duration: 1500
					})
					setTimeout(() => {
						uni.navigateBack()
					}, 1500)
				} else {
					uni.showToast({
						title: res?.message || '删除失败',
						icon: 'none'
					})
				}
			} catch (error) {
				console.error('删除账单失败', error)
				uni.showToast({
					title: error?.message || '删除失败，请重试',
					icon: 'none'
				})
			} finally {
				this.loading = false
			}
		},
		getCategoryName(categoryId) {
			return this.categoryMap[categoryId]?.name || '未知'
		},
		getCategoryIcon(categoryId) {
			return this.categoryMap[categoryId]?.icon || '📦'
		},
		getCategoryColor(categoryId) {
			return this.categoryMap[categoryId]?.color || '#BDC3C7'
		},
		getPaymentName(paymentMethod) {
			return this.paymentMap[paymentMethod]?.name || '其他'
		},
		getPaymentIcon(paymentMethod) {
			return this.paymentMap[paymentMethod]?.icon || 'more'
		},
		getPaymentColor(paymentMethod) {
			return this.paymentMap[paymentMethod]?.color || '#999999'
		},
		formatDetailDate(date) {
			return tool.dateFormat(date, 'yyyy-MM-dd')
		},
		formatDateTime(date) {
			return tool.dateFormat(date, 'yyyy-MM-dd hh:mm:ss')
		}
	}
}
</script>

<style lang="scss" scoped>
.page-content {
	padding: 30rpx;
	padding-bottom: 40rpx;
}

.loading-container {
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 100vh;
}

.amount-card {
	background: linear-gradient(135deg, #FF6B6B 0%, #FF8E8E 100%);
	border-radius: 24rpx;
	padding: 40rpx 30rpx;
	margin-bottom: 30rpx;
	display: flex;
	align-items: center;
	box-shadow: 0 8rpx 24rpx rgba(255, 107, 107, 0.3);

	&.income {
		background: linear-gradient(135deg, #2ECC71 0%, #58D68D 100%);
		box-shadow: 0 8rpx 24rpx rgba(46, 204, 113, 0.3);
	}

	.amount-icon {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		background: rgba(255, 255, 255, 0.2);
		margin-right: 30rpx;

		text {
			font-size: 48rpx;
		}
	}

	.amount-info {
		flex: 1;
		display: flex;
		flex-direction: column;

		.amount-label {
			font-size: 26rpx;
			color: rgba(255, 255, 255, 0.9);
			margin-bottom: 12rpx;
		}

		.amount-value {
			font-size: 56rpx;
			font-weight: bold;
			color: #fff;
		}
	}
}

.info-section {
	display: flex;
	flex-direction: column;
	gap: 20rpx;
	background: #fff;
	border-radius: 20rpx;
	padding: 30rpx;
	margin-bottom: 20rpx;
	box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);

	.info-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-bottom: 1rpx solid #f5f5f5;
		padding-bottom: 20rpx;

		&:last-child {
			border-bottom: none;
			padding-bottom: 0;
		}

		.info-label {
			font-size: 28rpx;
			color: #666;
		}

		.info-value {
			font-size: 28rpx;
			color: #333;
			font-weight: bold;
		}

		.payment-badge {
			display: flex;
			align-items: center;
			background: rgba(0, 0, 0, 0.05);
			border-radius: 20rpx;
			padding: 6rpx 16rpx;

			uni-icons {
				margin-right: 6rpx;
			}

			text {
				font-size: 24rpx;
				color: #333;
			}
		}
	}
}

.detail-section {
	background: #fff;
	border-radius: 20rpx;
	padding: 30rpx;
	margin-bottom: 30rpx;
	box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);

	.section-title {
		font-size: 28rpx;
		color: #333;
		font-weight: bold;
		margin-bottom: 20rpx;
		padding-left: 8rpx;
		border-left: 4rpx solid #667eea;
	}

	.detail-item {
		display: flex;
		align-items: flex-start;
		padding: 24rpx 0;
		border-bottom: 1rpx solid #f5f5f5;

		&:last-child {
			border-bottom: none;
			padding-bottom: 0;
		}

		.detail-icon {
			width: 48rpx;
			height: 48rpx;
			background: rgba(102, 126, 234, 0.1);
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-right: 20rpx;
			flex-shrink: 0;
		}

		.detail-content {
			flex: 1;
			display: flex;
			flex-direction: column;

			.detail-label {
				font-size: 24rpx;
				color: #999;
				margin-bottom: 8rpx;
			}

			.detail-value {
				font-size: 28rpx;
				color: #333;
				line-height: 1.6;
			}
		}
	}
}

.action-buttons {
	display: flex;
	gap: 20rpx;

	.action-btn {
		flex: 1;
		height: 88rpx;
		border-radius: 44rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border: none;
		box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.1);
		transition: all 0.3s;

		&::after {
			border: none;
		}

		uni-icons {
			margin-right: 10rpx;
		}

		&:active {
			transform: scale(0.98);
		}

		&.edit-btn {
			background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
			color: #fff;
			box-shadow: 0 6rpx 20rpx rgba(102, 126, 234, 0.3);
		}

		&.delete-btn {
			background: #FF6B6B;
			color: #fff;
			box-shadow: 0 6rpx 20rpx rgba(255, 107, 107, 0.3);
		}
	}
}
</style>
