<template>
	<un-pages
		:show-nav-bar="true"
		nav-bar-title="加入家庭"
		:show-back="true"
	>
		<view class="page-content">
			<view class="form-section">
				<view class="section-title">家庭邀请码</view>
				<view class="input-wrapper">
					<input
						v-model="inviteCode"
						placeholder="请输入家庭邀请码"
						placeholder-style="color: #ccc"
						maxlength="10"
					/>
				</view>
			</view>

			<view class="tips-section">
				<view class="tip-item">
					<uni-icons type="info" size="18" color="#667eea"></uni-icons>
					<text class="tip-text">邀请码由家庭家主提供</text>
				</view>
				<view class="tip-item">
					<uni-icons type="info" size="18" color="#667eea"></uni-icons>
					<text class="tip-text">每个用户只能加入一个家庭</text>
				</view>
				<view class="tip-item">
					<uni-icons type="info" size="18" color="#667eea"></uni-icons>
					<text class="tip-text">加入家庭后，可以查看和记录家庭账单</text>
				</view>
			</view>

			<view class="submit-section">
				<button class="submit-btn" @tap="handleJoin" :loading="loading">
					加入家庭
				</button>
			</view>
		</view>
	</un-pages>
</template>

<script>
export default {
	data() {
		return {
			inviteCode: '',
			loading: false
		}
	},
	methods: {
		async handleJoin() {
			if (!this.inviteCode.trim()) {
				uni.showToast({
					title: '请输入邀请码',
					icon: 'none'
				})
				return
			}

			if (this.inviteCode.trim().length !== 10) {
				uni.showToast({
					title: '邀请码格式不正确',
					icon: 'none'
				})
				return
			}

			this.loading = true

			try {
				const res = await this.$store.dispatch('joinFamily', this.inviteCode.trim())
				if (res && res.code === 1) {
					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: error?.message || '加入失败，请重试',
					icon: 'none'
				})
			} finally {
				this.loading = false
			}
		}
	}
}
</script>

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

.form-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: #666;
		margin-bottom: 20rpx;
	}

	.input-wrapper {
		input {
			width: 100%;
			height: 80rpx;
			font-size: 28rpx;
			color: #333;
			padding: 0;
			letter-spacing: 4rpx;
		}
	}
}

.tips-section {
	background: rgba(102, 126, 234, 0.05);
	border-radius: 20rpx;
	padding: 30rpx;
	margin-bottom: 40rpx;

	.tip-item {
		display: flex;
		align-items: flex-start;
		margin-bottom: 20rpx;

		&:last-child {
			margin-bottom: 0;
		}

		uni-icons {
			margin-right: 12rpx;
			margin-top: 4rpx;
		}

		.tip-text {
			flex: 1;
			font-size: 26rpx;
			color: #666;
			line-height: 1.6;
		}
	}
}

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

	.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>
