<template>
	<view class="search-container">
		<!-- 头部搜索栏 -->
		<view class="search-header">
			<view class="back-icon" @click="goBack">
				<uni-icons type="left" size="30" color="#8B2316"></uni-icons>
			</view>
			<view class="search-input-wrapper">
				<view class="search-icon">
					<uni-icons type="search" size="20" color="#999"></uni-icons>
				</view>
				<input 
					class="search-input" 
					placeholder="搜索视频、精品课、课件、指南等" 
					v-model="searchKeyword"
					@input="onSearchInput"
					@confirm="onSearchConfirm"
					confirm-type="search"
				/>
				<view class="clear-icon" v-if="searchKeyword" @click="clearSearch">
					<uni-icons type="clear" size="20" color="#999"></uni-icons>
				</view>
			</view>
			<view class="cancel-btn" @click="goSearch">
				<text class="cancel-text">搜索</text>
			</view>
		</view>

		

		<!-- 搜索分类 -->
		<view class="search-categories" >
			<view class="category-header">
				<text class="category-title">点击图标选择类型</text>
			</view>
			<view class="category-grid">
				<view 
					class="category-item" 
					v-for="(item, index) in categoryList" 
					:key="index"
					@click="onCategoryClick(index,item.type)"
				>
					<view class="category-icon">
						<up-image  :src="item.icon" width="60rpx" height="60rpx" v-if="tab!=index"></up-image>
						<up-image  :src="item.activeIcon" width="60rpx" height="60rpx" v-else></up-image>
					</view>
					<text class="category-text">{{ item.name }}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { ref, reactive, onMounted } from 'vue';
	import { onShow, onLoad } from "@dcloudio/uni-app";
    import video  from "@/static/item_video_no.png"
	import videoOn  from "@/static/item_video_pass.png"
	import videoPatient  from "@/static/patient_video_no.png"
	import videoPatientOn  from "@/static/patient_video_yes.png"
	import news  from "@/static/item_news_no.png"
	import newsOn  from "@/static/item_news_pass.png"
	import kepu  from "@/static/item_science_no.png"
	import kepuOn  from "@/static/item_science_pass.png"
	import zhinan  from "@/static/item_drug_no.png"
	import zhinanOn  from "@/static/item_drug_pass.png"
	import course  from "@/static/jingpin_no.png"
	import courseOn  from "@/static/jingpin_yes.png"
	import ppt  from "@/static/course_no.png"
	import pptOn  from "@/static/course_yes.png"
	import patient  from "@/static/item_patient_no.png"
	import patientOn  from "@/static/item_patient_yes.png"
	import hospital  from "@/static/item_hospital_no.png"
	import hospitalOn  from "@/static/item_hospital_yes.png"
	import department  from "@/static/item_department_no.png"
	import departmentOn  from "@/static/item_department_yes.png"
	import doctor  from "@/static/item_doctor_no.png"
	import doctorOn  from "@/static/item_doctor_yes.png"
	import mall  from "@/static/item_mall_no.png"
	import mallOn  from "@/static/item_mall_yes.png"
	const tab=ref(0);
	const type=ref('');
	// 搜索关键词
	const searchKeyword = ref('');
	
	// 热门搜索
	const hotSearchList = ref([
		'肝病治疗指南', '肝硬化诊断', '肝炎预防', '肝癌早期症状',
		'肝功能检查', '肝移植', '肝病饮食', '肝病用药'
	]);
	
	// 搜索分类
	const categoryList = reactive([
		{ name: '会议视频', icon: video,activeIcon:videoOn, type: 'video',},
		{ name: '患教视频', icon: videoPatient,activeIcon:videoPatientOn,type: 'videoPatient' },
		{ name: '新闻', icon:news,activeIcon:newsOn,type: 'news' },
		{ name: '科普', icon: kepu,activeIcon:kepuOn, type: 'kepu' },
		{ name: '指南', icon:zhinan, activeIcon:zhinanOn,type: 'zhinan' },
		{ name: '精品课', icon:course,activeIcon:courseOn, type: 'course' },
		{ name: '肝胆课件', icon:ppt,activeIcon:pptOn, type: 'ppt' },
		// { name: '患者', icon:patient, patientIcon:patientOn,type: 'patient' },
		// { name: '名院', icon:doctor,activeIcon:doctorOn, type: 'doctor' },
		// { name: '名科', icon:department,activeIcon:departmentOn, type: 'department' },
		// { name: '名医', icon:doctor, activeIcon:doctorOn,type: 'doctor' },
		{ name: '积分商城', icon:mall,activeIcon:mallOn, type: 'mall' }
	]);
	
	// 搜索输入
	const onSearchInput = (e) => {
		searchKeyword.value = e.detail.value;
	};

	// 搜索确认
	const onSearchConfirm = () => {
		if (searchKeyword.value.trim()) {
			uni.showToast({
				title: `搜索：${searchKeyword.value}`,
				icon: 'none'
			});
		}
	};

	// 清空搜索
	const clearSearch = () => {
		searchKeyword.value = '';
	};

	// 点击热门搜索
	const onHotSearchClick = (keyword) => {
		searchKeyword.value = keyword;
		uni.showToast({
			title: `搜索：${keyword}`,
			icon: 'none'
		});
	};

	// 点击分类
	const goSearch = () => {
		if(!searchKeyword.value){
			uni.showToast({
				title: `请输入搜索内容`,
				icon: 'none'
			});
			return;
		}
		if(type.value=='video'){
			uni.navigateTo({
				url: `/pages_app/searchVideo/searchVideo?keywords=${searchKeyword.value}`
			})
		}else if(type.value=='videoPatient'){
			uni.navigateTo({
				url: `/pages_app/searchVideo/searchVideo?keywords=${searchKeyword.value}&from=hjsp`
			})
		}else if(type.value=='news'){
			uni.navigateTo({
				url: `/pages_app/searchNews/searchNews?keywords=${searchKeyword.value}`
			})
		}else if(type.value=='kepu'){
			uni.navigateTo({
				url: `/pages_app/searchNews/searchNews?keywords=${searchKeyword.value}&from=kp`
			})
		}else if(type.value=='zhinan'){
			uni.navigateTo({
				url: `/pages_app/hot/hot?name=${searchKeyword.value}`
			})
		}else if(type.value=='course'){
			uni.navigateTo({
				url: `/pages_course/course/course?keywords=${searchKeyword.value}`
			})
		}else if(type.value=='ppt'){
			uni.navigateTo({
				url: `/pages_app/hot/hot?name=${searchKeyword.value}`
			})
		}else if(type.value=='mall'){
			uni.navigateTo({
				url: `/pages_goods/pointMall/pointMall?keywords=${searchKeyword.value}`
			})
		}
	}
	const onCategoryClick = (index,typeStr) => {
		tab.value=index;
		type.value=typeStr;
		// 这里可以根据分类进行搜索
	};

	// 返回
	const goBack = () => {
		uni.navigateBack({
			delta:1,
			fail(){
				uni.redirectTo({
					url:'/pages/index/index'
				})
			}
		});
	};

	// 页面加载
	onLoad(() => {
		console.log('搜索页面加载完成');
	});

	// 页面显示
	onShow(() => {
		console.log('搜索页面显示');
	});
</script>

<style lang="scss">
	.search-container {
		min-height: calc(100vh - 180rpx);
		background-color: #fff;
	}

	// 头部搜索栏
	.search-header {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 100;
		background-color: #eeeeee;
		
		display: flex;
		height:180rpx;
		align-items: center;
		padding:0 30rpx;
		gap: 20rpx;
		

		.search-input-wrapper {
			flex: 1;
			display: flex;
			align-items: center;
			background-color: #fff;
			border-radius: 20rpx;
			padding: 0 20rpx;
			height:70rpx;

			.search-icon {
				margin-right: 15rpx;
			}

			.search-input {
				flex: 1;
				height: 80rpx;
				
				font-size: 28rpx;
				color: #333;
			}

			.clear-icon {
				margin-left: 15rpx;
				padding: 10rpx;
			}
		}

		.cancel-btn {
			padding: 10rpx 20rpx;
			background:#8B2316;
			border-radius: 10rpx;

			.cancel-text {
				font-size: 28rpx;
				color: #fff;
			}
		}
	}

	// 热门搜索
	.hot-search {
		margin-top: 20rpx;
		padding: 30rpx;
		background-color: #fff;

		.hot-header {
			margin-bottom: 30rpx;

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

		.hot-tags {
			display: flex;
			flex-wrap: wrap;
			gap: 20rpx;

			.hot-tag {
				padding: 15rpx 25rpx;
				background-color: #fff5f5;
				border: 2rpx solid #ffebeb;
				border-radius: 25rpx;
				cursor: pointer;
				transition: all 0.2s ease;

				&:active {
					background-color: #ffe0e0;
					border-color: #ffcccc;
				}

				.tag-text {
					font-size: 26rpx;
					color: #8B2316;
				}
			}
		}
	}

	// 搜索分类
	.search-categories {
		margin-top: 180rpx;
		padding: 30rpx;
		
		background-color: #fff;

		.category-header {
			margin-bottom: 30rpx;
             display: flex;
			 justify-content: center;
			.category-title {
				font-size: 30rpx;
				text-align: center;
				color: #999;
			}
		}

		.category-grid {
			display: grid;
			
			grid-template-columns: repeat(4, 1fr);
			gap: 40rpx;

			.category-item {
				background-color: #fff;
				display: flex;
				flex-direction: column;
				align-items: center;
				padding: 30rpx 20rpx;
				border-radius: 20rpx;
				cursor: pointer;
				transition: all 0.2s ease;

				&:active {
					background-color: #f0f0f0;
					transform: scale(0.98);
				}

				.category-icon {
					margin-bottom: 15rpx;
				}

				.category-text {
					font-size: 26rpx;
					color: #333;
					text-align: center;
					white-space: nowrap;
				}
			}
		}
	}

	// 响应式调整
	@media (max-width: 750rpx) {
		.search-header {
			padding: 15rpx 20rpx;

			.search-input-wrapper {
				height: 70rpx;

				.search-input {
					height: 70rpx;
					font-size: 26rpx;
				}
			}

			.cancel-text {
				font-size: 26rpx;
			}
		}

		.hot-search,
		.search-categories {
			padding: 20rpx;
		}

		.category-grid {
			gap: 20rpx;

			.category-item {
				padding: 20rpx 15rpx;

				.category-text {
					font-size: 24rpx;
				}
			}
		}
	}
</style>
