<template>
	<un-pages
		:show-nav-bar="true"
		nav-bar-title="记一笔"
		:show-back="true"
	>
		<view class="page-content">
			<!-- 收支类型切换 -->
			<view class="type-switch">
				<view
					class="type-item"
					:class="{active: form.type === 'expense'}"
					@tap="switchType('expense')"
				>
					<text>支出</text>
				</view>
				<view
					class="type-item"
					:class="{active: form.type === 'income'}"
					@tap="switchType('income')"
				>
					<text>收入</text>
				</view>
			</view>

			<!-- 金额输入 -->
			<view class="amount-section">
				<view class="amount-input-wrapper">
					<text class="currency">¥</text>
					<input
						class="amount-input"
						type="digit"
						v-model="form.amount"
						placeholder="0.00"
						placeholder-style="color: #ddd"
					/>
				</view>
			</view>

			<!-- 分类选择 -->
			<view class="form-section">
				<view class="section-title">选择分类</view>
				<view class="category-grid">
					<view
						v-for="category in currentCategories"
						:key="category.id"
						class="category-item"
						:class="{active: form.categoryId === category.id}"
						@tap="selectCategory(category)"
					>
						<view class="category-icon" :style="{background: category.color}">
							<text>{{ category.icon }}</text>
						</view>
						<text class="category-name">{{ category.name }}</text>
					</view>
				</view>
			</view>

			<!-- 备注 -->
			<view class="form-section">
				<view class="section-title">备注</view>
				<view class="textarea-wrapper">
					<textarea
						v-model="form.remark"
						placeholder="添加备注（可选）"
						placeholder-style="color: #ccc"
						maxlength="100"
					/>
					<text class="char-count">{{ form.remark.length }}/100</text>
				</view>
			</view>

			<!-- 日期选择 -->
			<view class="form-section">
				<view class="section-title">日期</view>
				<picker mode="date" :value="form.date" @change="onDateChange">
					<view class="picker-wrapper">
						<text class="picker-text">{{ form.date }}</text>
						<uni-icons type="right" size="16" color="#999"></uni-icons>
					</view>
				</picker>
			</view>

			<!-- 提交按钮 -->
			<view class="submit-section">
				<button class="submit-btn" @tap="handleSubmit" :loading="loading">
					保存
				</button>
			</view>
		</view>
	</un-pages>
</template>

<script>
export default {
	data() {
		return {
			loading: false,
			form: {
				type: 'expense',
				amount: '',
				categoryId: '',
				remark: '',
				date: this.getTodayDate()
			},
			expenseCategories: [
				{ id: 1, name: '餐饮', icon: '🍜', color: '#FF6B6B' },
				{ id: 2, name: '交通', icon: '🚗', color: '#4ECDC4' },
				{ id: 3, name: '购物', icon: '🛒', color: '#45B7D1' },
				{ id: 4, name: '娱乐', icon: '🎮', color: '#96CEB4' },
				{ id: 5, name: '医疗', icon: '💊', color: '#FFEAA7' },
				{ id: 6, name: '教育', icon: '📚', color: '#DDA0DD' },
				{ id: 7, name: '居住', icon: '🏠', color: '#98D8C8' },
				{ id: 8, name: '其他', icon: '📦', color: '#BDC3C7' }
			],
			incomeCategories: [
				{ id: 101, name: '工资', icon: '💰', color: '#2ECC71' },
				{ id: 102, name: '奖金', icon: '🎁', color: '#E74C3C' },
				{ id: 103, name: '投资', icon: '📈', color: '#3498DB' },
				{ id: 104, name: '兼职', icon: '💼', color: '#9B59B6' },
				{ id: 105, name: '其他', icon: '💎', color: '#1ABC9C' }
			]
		}
	},
	computed: {
		currentCategories() {
			return this.form.type === 'expense' ? this.expenseCategories : this.incomeCategories
		}
	},
	methods: {
		getTodayDate() {
			const today = new Date()
			const year = today.getFullYear()
			const month = String(today.getMonth() + 1).padStart(2, '0')
			const day = String(today.getDate()).padStart(2, '0')
			return `${year}-${month}-${day}`
		},
		switchType(type) {
			this.form.type = type
			this.form.categoryId = ''
		},
		selectCategory(category) {
			this.form.categoryId = category.id
		},
		onDateChange(e) {
			this.form.date = e.detail.value
		},
		async handleSubmit() {
			// 验证
			if (!this.form.amount || parseFloat(this.form.amount) <= 0) {
				uni.showToast({
					title: '请输入有效金额',
					icon: 'none'
				})
				return
			}

			if (!this.form.categoryId) {
				uni.showToast({
					title: '请选择分类',
					icon: 'none'
				})
				return
			}

			this.loading = true

			try {
				const res = await this.$api.bill.add.post({
					type: this.form.type,
					amount: parseFloat(this.form.amount),
					category_id: this.form.categoryId,
					remark: this.form.remark,
					date: this.form.date
				})

				if (res.code === 200) {
					uni.showToast({
						title: '保存成功',
						icon: 'success'
					})
					setTimeout(() => {
						uni.navigateBack()
					}, 1500)
				} else {
					uni.showToast({
						title: res.message || '保存失败',
						icon: 'none'
					})
				}
			} catch (error) {
				console.error('保存账单失败', error)
				uni.showToast({
					title: '保存失败，请重试',
					icon: 'none'
				})
			} finally {
				this.loading = false
			}
		}
	}
}
</script>

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

.type-switch {
	display: flex;
	background: #f5f5f5;
	border-radius: 50rpx;
	padding: 8rpx;
	margin-bottom: 40rpx;

	.type-item {
		flex: 1;
		text-align: center;
		padding: 20rpx 0;
		border-radius: 50rpx;
		transition: all 0.3s;

		text {
			font-size: 28rpx;
			color: #999;
		}

		&.active {
			background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

			text {
				color: #fff;
				font-weight: bold;
			}
		}
	}
}

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

	.amount-input-wrapper {
		display: flex;
		align-items: center;

		.currency {
			font-size: 60rpx;
			font-weight: bold;
			color: #333;
			margin-right: 20rpx;
		}

		.amount-input {
			flex: 1;
			font-size: 60rpx;
			font-weight: bold;
			color: #333;
		}
	}
}

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

	.section-title {
		font-size: 28rpx;
		color: #666;
		margin-bottom: 20rpx;
	}
}

.category-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20rpx;

	.category-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 20rpx 0;

		.category-icon {
			width: 80rpx;
			height: 80rpx;
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-bottom: 12rpx;
			opacity: 0.6;
			transition: all 0.3s;

			text {
				font-size: 36rpx;
			}
		}

		.category-name {
			font-size: 24rpx;
			color: #666;
		}

		&.active {
			.category-icon {
				opacity: 1;
				transform: scale(1.1);
				box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.15);
			}

			.category-name {
				color: #667eea;
				font-weight: bold;
			}
		}
	}
}

.textarea-wrapper {
	position: relative;

	textarea {
		width: 100%;
		min-height: 120rpx;
		font-size: 28rpx;
		color: #333;
	}

	.char-count {
		position: absolute;
		right: 0;
		bottom: 0;
		font-size: 22rpx;
		color: #999;
	}
}

.picker-wrapper {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 20rpx 0;

	.picker-text {
		font-size: 28rpx;
		color: #333;
	}
}

.submit-section {
	margin-top: 40rpx;

	.submit-btn {
		background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
		color: #fff;
		border: none;
		border-radius: 50rpx;
		height: 90rpx;
		line-height: 90rpx;
		font-size: 32rpx;
		font-weight: bold;
		box-shadow: 0 8rpx 24rpx rgba(102, 126, 234, 0.3);

		&::after {
			border: none;
		}
	}
}
</style>
