<template>
	<view class="feeding-record-add-page">


		<!-- 广告横幅 -->
		<swiper class="banner-swiper" :indicator-dots="swiperData.length > 1" :autoplay="swiperData.length > 1"
			:circular="swiperData.length > 1" indicator-color="#dfddd9" indicator-active-color="#b27c1e"
			:indicator-top="596">
			<swiper-item v-for="(item, index) in swiperData" :key="index">
				<image class="banner-img" :src="`${item?.bannerImg}`" mode="aspectFill" @click="bannerHandler(item)" />
			</swiper-item>
		</swiper>

		<!-- 喂养时间 -->
		<view class="feeding-time">
			<text class="time-label">喂养时间</text>
			<text class="time-value">2025-06-01 22:22</text>
			<image class="edit-icon" src="/static/feedingIndex/v1/icon_modify.png" mode="aspectFit" />
			<text class="records-link">喂养记录 ›</text>
		</view>

		<!-- 喂养类型选择 -->
		<view class="feeding-types">
			<view class="type-item" v-for="(type, index) in feedingTypes" :key="index"
				:class="{ active: selectedType === type.value }" @click="selectType(type.value)">
				<view class="type-icon" :style="{ backgroundColor: type.color }">
					<image class="icon-img" :src="type.icon" mode="aspectFit" />
				</view>
				<text class="type-label">{{ type.label }}</text>
			</view>
		</view>

		<!-- 温馨提示 -->
		<view class="warm-tip">
			<text>温馨提示:每十分钟建议更换一侧,更推荐瓶装方式喂养~</text>
		</view>

		<!-- 动态表单区域 -->
		<view class="form-section">
			<!-- 母乳亲喂表单 -->
			<view v-if="selectedType === 'breastfeeding'" class="breastfeeding-form">
				<view class="duration-controls">
					<view class="duration-item">
						<view class="duration-circle">
							<text class="duration-number">{{ leftDuration }}</text>
							<text class="duration-unit">分钟</text>
						</view>
						<view class="duration-buttons">
							<image class="btn-minus" src="/static/feedingIndex/v1/icon-L.png" mode="aspectFit"
								@click="adjustDuration('left', -1)" />
							<image class="btn-plus" src="/static/feedingIndex/v1/icon+L.png" mode="aspectFit"
								@click="adjustDuration('left', 1)" />
						</view>
						<text class="duration-label">左侧哺乳时长</text>
					</view>
					<view class="duration-item">
						<view class="duration-circle">
							<text class="duration-number">{{ rightDuration }}</text>
							<text class="duration-unit">分钟</text>
						</view>
						<view class="duration-buttons">
							<image class="btn-minus" src="/static/feedingIndex/v1/icon-L.png" mode="aspectFit"
								@click="adjustDuration('right', -1)" />
							<image class="btn-plus" src="/static/feedingIndex/v1/icon+L.png" mode="aspectFit"
								@click="adjustDuration('right', 1)" />
						</view>
						<text class="duration-label">右侧哺乳时长</text>
					</view>
				</view>
			</view>

			<!-- 母乳瓶喂/奶粉喂养表单 -->
			<view v-if="selectedType === 'bottle' || selectedType === 'formula'" class="bottle-form">
				<view class="bottle-graphic">
					<view class="bottle-container">
						<view class="bottle-liquid" :style="{ height: `${(amount / 100) * 200}%` }"></view>
						<view class="bottle-scale">
							<text class="scale-mark">80</text>
							<text class="scale-mark">85</text>
							<text class="scale-mark active">90</text>
							<text class="scale-mark">95</text>
							<text class="scale-mark">100</text>
						</view>
					</view>
					<view class="amount-bubble">
						<text class="bubble-label">喂奶量</text>
						<text class="bubble-value">{{ amount }}ml</text>
					</view>
					<view class="adjust-arrows">
						<image class="arrow-up" src="/static/feedingIndex/v1/icon+G.png" mode="aspectFit"
							@click="adjustAmount(10)" />
						<image class="arrow-down" src="/static/feedingIndex/v1/icon-G.png" mode="aspectFit"
							@click="adjustAmount(-10)" />
					</view>
				</view>
			</view>

			<!-- 辅食表单 -->
			<view v-if="selectedType === 'food'" class="food-form">
				<view class="selected-items">
					<text>米粉,面条,苹果,土豆</text>
				</view>
				<view class="food-categories">
					<text class="category-title">辅食分类</text>
					<text class="complete-btn">完成</text>
				</view>
				<view class="category-list">
					<view class="category-item">
						<text class="category-name">主食</text>
						<text class="add-btn">+</text>
						<view class="selected-tags">
							<text class="tag">米粉 ✕</text>
							<text class="tag">面条 ✕</text>
						</view>
					</view>
					<view class="category-item">
						<text class="category-name">蔬菜</text>
						<text class="add-btn">+</text>
						<view class="selected-tags">
							<text class="tag">山药 ✕</text>
							<text class="tag">萝卜 ✕</text>
							<text class="tag active">土豆 ✕</text>
							<text class="tag">豆 ✕</text>
							<text class="tag">青瓜 ✕</text>
							<text class="tag">白菜 ✕</text>
						</view>
						<text class="expand-arrow">↑</text>
					</view>
					<view class="category-item">
						<text class="category-name">水果</text>
						<text class="add-btn">+</text>
						<view class="selected-tags">
							<text class="tag">香蕉 ✕</text>
							<text class="tag active">苹果 ✕</text>
							<text class="tag">牛油果 ✕</text>
						</view>
					</view>
					<view class="category-item">
						<text class="category-name">其他</text>
						<text class="add-btn">+</text>
						<view class="selected-tags">
							<text class="tag">鱼油 ✕</text>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 记录方式选择 -->
		<view class="record-methods">
			<image class="tab-image" :src="getTabImage()" mode="aspectFill" />
			<view class="click-area left" @click="setRecordMethod('manual')"></view>
			<view class="click-area center" @click="setRecordMethod('timer')"></view>
			<view class="click-area right" @click="setRecordMethod('voice')"></view>
		</view>

		<!-- 录音控制区域 -->
		<view v-if="recordMethod === 'voice'" class="voice-controls">
			<view class="voice-status">
				<image class="voice-icon"
					:src="isRecording ? '/static/feedingIndex/v1/icon_luyining.png' : '/static/feedingIndex/v1/icon_luyin.png'"
					mode="aspectFit" />
				<text class="voice-text">{{ isRecording ? '录音中...' : '点击开始录音' }}</text>
			</view>
			<view class="voice-buttons">
				<image class="voice-btn"
					:src="isRecording ? '/static/feedingIndex/v1/icon_stop.png' : '/static/feedingIndex/v1/icon_start.png'"
					mode="aspectFit" @click="toggleRecording" />
			</view>
		</view>

		<!-- 底部完成按钮 -->
		<view class="complete-btn" @click="completeRecord">
			<image class="complete-btn-bg" src="/static/feedingIndex/v1/complete_btn.png" mode="aspectFit" />
		</view>
	</view>
</template>

<script setup>
import { ref, computed } from 'vue'

const feedingTypes = ref([
	{ value: 'breastfeeding', label: '母乳亲喂', color: '#FFD0D0', icon: '/static/feedingIndex/v1/icon_muruqinwei.png' },
	{ value: 'bottle', label: '母乳瓶喂', color: '#D0D0FF', icon: '/static/feedingIndex/v1/icon_murupinwei.png' },
	{ value: 'formula', label: '奶粉喂养', color: '#FFE4B5', icon: '/static/feedingIndex/v1/icon_naifen.png' },
	{ value: 'food', label: '辅食', color: '#D0FFD0', icon: '/static/feedingIndex/v1/icon_fushi.png' }
])

const selectedType = ref('breastfeeding')
const recordMethod = ref('timer')
const isRecording = ref(false)

// 母乳亲喂时长
const leftDuration = ref(60)
const rightDuration = ref(5)

// 奶量
const amount = ref(90)

// 方法
function selectType(type) {
	selectedType.value = type
}

function adjustDuration(side, value) {
	if (side === 'left') {
		leftDuration.value = Math.max(0, leftDuration.value + value)
	} else {
		rightDuration.value = Math.max(0, rightDuration.value + value)
	}
}

function adjustAmount(value) {
	amount.value = Math.max(0, Math.min(100, amount.value + value))
}

function setRecordMethod(method) {
	recordMethod.value = method
}

function toggleRecording() {
	isRecording.value = !isRecording.value
}

function completeRecord() {
	console.log('完成记录')
	uni.navigateBack()
}

function goBack() {
	uni.navigateBack()
}

function getTabImage() {
	if (recordMethod.value === 'manual') {
		return '/static/feedingIndex/v1/Tab_bottom_write.png'
	} else if (recordMethod.value === 'timer') {
		return '/static/feedingIndex/v1/Tab_bottom_timer.png'
	} else {
		return '/static/feedingIndex/v1/Tab_bottom_voice.png'
	}
}
</script>

<style lang="scss" scoped>
.feeding-record-add-page {
	background: #FFF8F1;
	min-height: 100vh;
	padding: 0;
}

.banner-swiper {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	top: 191rpx;
	width: 687rpx;
	height: 176rpx;

	.banner-img {
		width: 100%;
		height: 100%;
		border-radius: 16rpx;
	}
}

.feeding-time {
	display: flex;
	align-items: center;
	padding: 20rpx 30rpx;
	background: #FFF8F1;

	.time-label {
		font-size: 28rpx;
		color: #333;
		margin-right: 20rpx;
	}

	.time-value {
		font-size: 28rpx;
		color: #333;
		margin-right: 10rpx;
	}

	.edit-icon {
		width: 32rpx;
		height: 32rpx;
		margin-right: auto;
	}

	.records-link {
		font-size: 26rpx;
		color: #C89F6B;
	}
}

.feeding-types {
	display: flex;
	justify-content: space-around;
	padding: 30rpx;
	background: #FFF8F1;

	.type-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 10rpx;

		.type-icon {
			width: 80rpx;
			height: 80rpx;
			border-radius: 20rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			position: relative;

			.icon-img {
				width: 60rpx;
				height: 60rpx;
			}
		}

		.type-label {
			font-size: 24rpx;
			color: #333;
		}

		&.active .type-icon {
			box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.2);
			transform: scale(1.05);
		}
	}
}

.warm-tip {
	text-align: center;
	padding: 20rpx 30rpx;
	background: #FFF8F1;

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

.form-section {
	padding: 30rpx;
	background: #FFF8F1;
}

.breastfeeding-form {
	.duration-controls {
		display: flex;
		justify-content: space-around;
		gap: 40rpx;

		.duration-item {
			display: flex;
			flex-direction: column;
			align-items: center;
			gap: 20rpx;

			.duration-circle {
				width: 200rpx;
				height: 200rpx;
				// border-radius: 50%;
				// background: linear-gradient(135deg, #FFE4B5, #FFD700);
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;

				.duration-number {
					font-size: 48rpx;
					color: #333;
					font-weight: bold;
				}

				.duration-unit {
					font-size: 24rpx;
					color: #666;
				}
			}

			.duration-buttons {
				display: flex;
				gap: 40rpx;

				.btn-minus,
				.btn-plus {
					width: 60rpx;
					height: 60rpx;
				}
			}

			.duration-label {
				font-size: 24rpx;
				color: #333;
			}
		}
	}
}

.bottle-form {
	.bottle-graphic {
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;
		height: 400rpx;

		.bottle-container {
			position: relative;
			width: 120rpx;
			height: 300rpx;
			background: rgba(255, 228, 181, 0.3);
			border-radius: 60rpx;
			overflow: hidden;

			.bottle-liquid {
				position: absolute;
				bottom: 0;
				width: 100%;
				background: #FFA500;
				transition: height 0.3s ease;
			}

			.bottle-scale {
				position: absolute;
				right: -40rpx;
				top: 0;
				height: 100%;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				padding: 20rpx 0;

				.scale-mark {
					font-size: 20rpx;
					color: #666;

					&.active {
						color: #FFA500;
						font-weight: bold;
					}
				}
			}
		}

		.amount-bubble {
			position: absolute;
			left: 50%;
			transform: translateX(-50%);
			background: #FFE4B5;
			padding: 20rpx;
			border-radius: 20rpx;
			text-align: center;

			.bubble-label {
				display: block;
				font-size: 20rpx;
				color: #333;
				margin-bottom: 5rpx;
			}

			.bubble-value {
				display: block;
				font-size: 32rpx;
				color: #333;
				font-weight: bold;
			}
		}

		.adjust-arrows {
			position: absolute;
			right: 20rpx;
			display: flex;
			flex-direction: column;
			gap: 20rpx;

			.arrow-up,
			.arrow-down {
				width: 60rpx;
				height: 60rpx;
			}
		}
	}
}

.food-form {
	.selected-items {
		background: white;
		padding: 20rpx;
		border-radius: 20rpx;
		margin-bottom: 30rpx;

		text {
			font-size: 28rpx;
			color: #333;
			font-weight: bold;
		}
	}

	.food-categories {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20rpx;

		.category-title {
			font-size: 28rpx;
			color: #333;
			font-weight: bold;
		}

		.complete-btn {
			font-size: 26rpx;
			color: #C89F6B;
		}
	}

	.category-list {
		.category-item {
			display: flex;
			align-items: center;
			gap: 20rpx;
			margin-bottom: 20rpx;
			flex-wrap: wrap;

			.category-name {
				font-size: 26rpx;
				color: #333;
				min-width: 80rpx;
			}

			.add-btn {
				width: 40rpx;
				height: 40rpx;
				border-radius: 50%;
				background: #FFE4B5;
				color: #333;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 24rpx;
				font-weight: bold;
			}

			.selected-tags {
				display: flex;
				flex-wrap: wrap;
				gap: 10rpx;

				.tag {
					background: #FFE4B5;
					color: #333;
					padding: 8rpx 16rpx;
					border-radius: 20rpx;
					font-size: 22rpx;

					&.active {
						background: #C89F6B;
						color: white;
					}
				}
			}

			.expand-arrow {
				font-size: 24rpx;
				color: #666;
			}
		}
	}
}

.record-methods {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 120rpx; // 调整为图片高度
	background: #F8F8F8; // 背景色根据需要

	.tab-image {
		width: 100%;
		height: 100%;
	}

	.click-area {
		position: absolute;
		top: 0;
		bottom: 0;
		width: 33.33%;
	}

	.left {
		left: 0;
	}

	.center {
		left: 33.33%;
	}

	.right {
		left: 66.66%;
	}
}

.voice-controls {
	padding: 30rpx;
	background: #FFF8F1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 30rpx;

	.voice-status {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 20rpx;

		.voice-icon {
			width: 468rpx;
			height: 180rpx;
		}

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

	.voice-buttons {
		.voice-btn {
			width: 100rpx;
			height: 100rpx;
		}
	}
}

.complete-btn {
	position: fixed;
	bottom: 40rpx;
	left: 40rpx;
	right: 40rpx;
	height: 100rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;

	.complete-btn-bg {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}

	.complete-text {
		position: relative;
		z-index: 2;
		color: white;
		font-size: 32rpx;
		font-weight: bold;
	}
}
</style>