<template>
	<view class="select-type-container">
		<view class="content-area">
			<!-- 快捷记录 -->
			<view class="section">
				<view class="section-header">
					<view class="section-line"></view>
					<text class="section-title">快捷记录</text>
				</view>
				<view class="type-grid">
					<view class="type-item" @click="selectType('daily-note')">
						<view class="type-icon">📝</view>
						<text class="type-name">随手记</text>
					</view>
					<view class="type-item" @click="selectType('milestone')">
						<view class="type-icon">⭐</view>
						<text class="type-name">大事记</text>
					</view>
				</view>
			</view>

			<!-- 日常记录 -->
			<view class="section">
				<view class="section-header">
					<view class="section-line"></view>
					<text class="section-title">日常记录</text>
				</view>
				<view class="type-grid">
					<view class="type-item" @click="selectType('weight')">
						<view class="type-icon">⚖️</view>
						<text class="type-name">体重</text>
					</view>
					<view class="type-item" @click="selectType('toilet')">
						<view class="type-icon">🚽</view>
						<text class="type-name">尿便</text>
					</view>
					<view class="type-item" @click="selectType('food')">
						<view class="type-icon">🍽️</view>
						<text class="type-name">饮食</text>
					</view>
					<view class="type-item" @click="selectType('water')">
						<view class="type-icon">💧</view>
						<text class="type-name">喝水</text>
					</view>
					<view class="type-item" @click="selectType('exercise')">
						<view class="type-icon">🏃</view>
						<text class="type-name">运动</text>
					</view>
				</view>
			</view>

			<!-- 健康记录 -->
			<view class="section">
				<view class="section-header">
					<view class="section-line"></view>
					<text class="section-title">健康记录</text>
				</view>
				<view class="type-grid">
					<view class="type-item" @click="selectType('supplement')">
						<view class="type-icon">💊</view>
						<text class="type-name">保健品</text>
					</view>
					<view class="type-item" @click="selectType('abnormal')">
						<view class="type-icon">⚠️</view>
						<text class="type-name">异常</text>
					</view>
					<view class="type-item" @click="selectType('deworming')">
						<view class="type-icon">🐛</view>
						<text class="type-name">驱虫</text>
					</view>
					<view class="type-item" @click="selectType('vaccine')">
						<view class="type-icon">💉</view>
						<text class="type-name">疫苗</text>
					</view>
					<view class="type-item" @click="selectType('antiparasitic')">
						<view class="type-icon">🛡️</view>
						<text class="type-name">抗体水平</text>
					</view>
					<view class="type-item" @click="selectType('checkup')">
						<view class="type-icon">🩺</view>
						<text class="type-name">体检</text>
					</view>
					<view class="type-item" @click="selectType('illness')">
						<view class="type-icon">🤒</view>
						<text class="type-name">看病</text>
					</view>
					<view class="type-item" @click="selectType('medicine')">
						<view class="type-icon">💊</view>
						<text class="type-name">给药</text>
					</view>
					<view class="type-item" @click="selectType('hospital')">
						<view class="type-icon">🏥</view>
						<text class="type-name">住院</text>
					</view>
					<view class="type-item" @click="selectType('surgery')">
						<view class="type-icon">🔪</view>
						<text class="type-name">手术</text>
					</view>
				</view>
			</view>

			<!-- 洗护记录 -->
			<view class="section">
				<view class="section-header">
					<view class="section-line"></view>
					<text class="section-title">洗护记录</text>
				</view>
				<view class="type-grid">
					<view class="type-item" @click="selectType('bath')">
						<view class="type-icon">🛁</view>
						<text class="type-name">洗澡</text>
					</view>
					<view class="type-item" @click="selectType('nail-trim')">
						<view class="type-icon">✂️</view>
						<text class="type-name">剪指甲</text>
					</view>
					<view class="type-item" @click="selectType('ear-clean')">
						<view class="type-icon">👂</view>
						<text class="type-name">洗耳朵</text>
					</view>
					<view class="type-item" @click="selectType('teeth-clean')">
						<view class="type-icon">🦷</view>
						<text class="type-name">刷牙</text>
					</view>
					<view class="type-item" @click="selectType('hair-trim')">
						<view class="type-icon">💇</view>
						<text class="type-name">梳毛</text>
					</view>
					<view class="type-item" @click="selectType('hair-cut')">
						<view class="type-icon">✂️</view>
						<text class="type-name">剃毛毛</text>
					</view>
					<view class="type-item" @click="selectType('beauty')">
						<view class="type-icon">💅</view>
						<text class="type-name">美容</text>
					</view>
					<view class="type-item" @click="selectType('anal-gland')">
						<view class="type-icon">🍑</view>
						<text class="type-name">挤肛门腺</text>
					</view>
					<view class="type-item" @click="selectType('eye-clean')">
						<view class="type-icon">👁️</view>
						<text class="type-name">擦眼屎</text>
					</view>
				</view>
			</view>

			<!-- 清洁记录 -->
			<view class="section">
				<view class="section-header">
					<view class="section-line"></view>
					<text class="section-title">清洁记录</text>
				</view>
				<view class="type-grid">
					<view class="type-item" @click="selectType('disinfect')">
						<view class="type-icon">🧴</view>
						<text class="type-name">消毒</text>
					</view>
					<view class="type-item" @click="selectType('clean')">
						<view class="type-icon">🧽</view>
						<text class="type-name">清洁</text>
					</view>
					<view class="type-item" @click="selectType('change-sand')">
						<view class="type-icon">📦</view>
						<text class="type-name">换猫砂</text>
					</view>
					<view class="type-item" @click="selectType('wash-litter')">
						<view class="type-icon">🧼</view>
						<text class="type-name">洗猫砂盆</text>
					</view>
					<view class="type-item" @click="selectType('wash-food-bowl')">
						<view class="type-icon">🍽️</view>
						<text class="type-name">洗食盆</text>
					</view>
					<view class="type-item" @click="selectType('wash-water-bowl')">
						<view class="type-icon">💧</view>
						<text class="type-name">洗水盆</text>
					</view>
					<view class="type-item" @click="selectType('wash-toy')">
						<view class="type-icon">🧸</view>
						<text class="type-name">洗玩具</text>
					</view>
					<view class="type-item" @click="selectType('wash-cage')">
						<view class="type-icon">🏠</view>
						<text class="type-name">洗笼子</text>
					</view>
					<view class="type-item" @click="selectType('change-filter')">
						<view class="type-icon">🔄</view>
						<text class="type-name">换滤芯</text>
					</view>
					<view class="type-item" @click="selectType('change-pad')">
						<view class="type-icon">🛏️</view>
						<text class="type-name">换干燥剂</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			petId: ''
		}
	},
	onLoad(options) {
		this.petId = options.petId || '1'
	},
	methods: {
		goBack() {
			uni.navigateBack()
		},
		
		selectType(type) {
			// 根据类型跳转到对应的记录页面
			uni.navigateTo({
				url: `/pages/pets/add-record-form?petId=${this.petId}&type=${type}`
			})
		}
	}
}
</script>

<style lang="scss" scoped>
.select-type-container {
	background: linear-gradient(135deg, #FF8A80 0%, #FFB6C1 25%, #FECFEF 50%, #F8BBD9 100%);
	min-height: 100vh;
	padding-bottom: env(safe-area-inset-bottom);
}

.content-area {
	padding: 20rpx 30rpx 60rpx;
	min-height: calc(100vh - 88rpx); /* 减去导航栏高度 */
	box-sizing: border-box;
}

.section {
	margin-bottom: 60rpx;
}

.section-header {
	display: flex;
	align-items: center;
	margin-bottom: 30rpx;
}

.section-line {
	width: 8rpx;
	height: 32rpx;
	background: #FF8A80;
	border-radius: 4rpx;
	margin-right: 20rpx;
}

.section-title {
	font-size: 32rpx;
	font-weight: bold;
	color: #333;
}

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

.type-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 12rpx;
	padding: 24rpx 16rpx;
	background: rgba(255, 255, 255, 0.9);
	border-radius: 20rpx;
	backdrop-filter: blur(10rpx);
	transition: all 0.3s ease;
	min-height: 140rpx;
	box-sizing: border-box;

	&:active {
		transform: scale(0.95);
		background: rgba(255, 138, 128, 0.2);
	}
}

.type-icon {
	font-size: 40rpx;
	line-height: 1;
}

.type-name {
	font-size: 22rpx;
	color: #333;
	font-weight: 500;
	text-align: center;
	line-height: 1.2;
	word-break: keep-all;
}
</style>
