<template>
	<view class="type-select-page">
		<view class="header-section">
			<text class="header-title">选择记录类型</text>
			<text class="header-desc">添加疫苗、驱虫、体检等健康记录，守护毛球健康成长</text>
		</view>

		<view class="type-grid">
			<view
				v-for="item in typeOptions"
				:key="item.value"
				class="type-card"
				hover-class="type-card-hover"
				@click="handleSelect(item.value)"
			>
				<view class="type-icon-wrap" :style="{ backgroundColor: item.bg }">
					<TnIcon :name="item.icon" :size="48" :color="item.color" />
				</view>
				<text class="type-label">{{ item.label }}</text>
				<text class="type-desc">{{ item.desc }}</text>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
import TnIcon from '@/uni_modules/tuniaoui-vue3/components/icon/src/icon.vue'

const typeOptions = [
	{ value: 'vaccine', label: '疫苗', icon: 'safe-fill', color: '#3B82F6', bg: '#EFF6FF', desc: '记录疫苗接种信息' },
	{ value: 'deworm',  label: '驱虫', icon: 'notice-fill', color: '#8B5CF6', bg: '#F5F3FF', desc: '体内外驱虫记录' },
	{ value: 'medical', label: '病历', icon: 'write-feather', color: '#F97316', bg: '#FFF7ED', desc: '就诊、诊断及用药' },
	{ value: 'checkup', label: '体检', icon: 'data-fill', color: '#14B8A6', bg: '#F0FDFA', desc: '常规体检报告' },
	{ value: 'other',   label: '其他', icon: 'inventory-fill', color: '#64748B', bg: '#F8FAFC', desc: '其他健康相关记录' },
]

function handleSelect(type: string) {
	uni.navigateTo({ url: `/pages/record/add?type=${type}` })
}
</script>

<style lang="scss" scoped>
$primary: #F97316;
$text-dark: #1E293B;
$text-body: #475569;
$text-muted: #94A3B8;
$card-bg: #FFFFFF;
$shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.04);
$radius-lg: 24rpx;

.type-select-page {
	min-height: 100vh;
	background: #F8FAFC;
	padding: 32rpx 28rpx;
}

.header-section {
	padding: 20rpx 8rpx 32rpx;
}

.header-title {
	font-size: 44rpx;
	font-weight: 800;
	color: $text-dark;
	display: block;
}

.header-desc {
	margin-top: 12rpx;
	font-size: 26rpx;
	color: $text-muted;
	display: block;
	line-height: 1.6;
}

.type-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 20rpx;
}

.type-card {
	width: calc(50% - 10rpx);
	background: $card-bg;
	border-radius: $radius-lg;
	padding: 32rpx 24rpx 28rpx;
	box-shadow: $shadow;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	transition: transform 0.15s ease, box-shadow 0.15s ease;

	&.type-card-hover {
		transform: scale(0.96);
		box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.08);
	}
}

.type-icon-wrap {
	width: 100rpx;
	height: 100rpx;
	border-radius: 24rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 16rpx;
}

.type-label {
	font-size: 30rpx;
	font-weight: 700;
	color: $text-dark;
}

.type-desc {
	margin-top: 8rpx;
	font-size: 22rpx;
	color: $text-muted;
	line-height: 1.5;
}
</style>
