<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="familyName"
						placeholder="请输入家庭名称"
						placeholder-style="color: #ccc"
						maxlength="20"
					/>
					<text class="char-count">{{ familyName.length }}/20</text>
				</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="handleCreate" :loading="loading">
					创建家庭
				</button>
			</view>
		</view>
	</un-pages>
</template>

<script>
export default {
	data() {
		return {
			familyName: '',
			loading: false
		}
	},
	methods: {
		async handleCreate() {
			if (!this.familyName.trim()) {
				uni.showToast({
					title: '请输入家庭名称',
					icon: 'none'
				})
				return
			}

			this.loading = true

			try {
				const res = await this.$store.dispatch('createFamily', this.familyName.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 {
		position: relative;

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

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

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