<template>
	<uni-nav-bar
		left-icon="left" 
		title="期刊杂志" 
		@clickLeft="goBack" 
		fixed 
		color="#8B2316" 
		height="180rpx" 
		:border="false" 
		backgroundColor="#eeeeee"
	></uni-nav-bar>
	<view class="qikan-page">
		<!-- 导航头部 -->
		
		
		<!-- 主要内容区域 -->
		<view class="main-content">
			<!-- 标签切换区域 -->
			<view class="tab-section">
				<view class="tab-container">
					<view 
						class="tab-item" 
						:class="{ active: activeTab === 'daichawenxian' }"
						@click="switchTab('daichawenxian')"
					>
						<text class="tab-text">代查文献</text>
						<view class="tab-underline" >
							<up-image  :src="activeImg" width="48rpx" height="18rpx" v-if="activeTab === 'daichawenxian'"></up-image>
						</view>
					</view>
					<view 
						class="tab-item" 
						:class="{ active: activeTab === 'yingwenwenxian' }"
						@click="switchTab('yingwenwenxian')"
					>
						<text class="tab-text">英文文献</text>
						<view class="tab-underline">
							<up-image  :src="activeImg" width="48rpx" height="18rpx"  v-if="activeTab === 'yingwenwenxian'"></up-image>
						</view>
					</view>
				</view>
			</view>
			
			<!-- 代查文献内容 -->
			<view class="content-section" v-if="activeTab === 'daichawenxian'">
				<!-- 顶部图标和说明 -->
				
				 <up-image  :src="paperImg" width="100%" ></up-image>
				<!-- 表单区域 -->
				<view class="form-section">
					<!-- 接收邮箱 -->
					<view class="form-group formemail">
						<view class="form-label">
							<text>接收邮箱</text>
							<text class="required">*</text>
						</view>
						<view class="input-container">
							<input 
								class="form-input"
								type="text"
								placeholder="请输入文献接收邮箱"
								v-model="formData.email"
							/>
						</view>
					</view>
					<!-- 文献单元列表 -->
					<view 
						class="from-cell literature-item" 
						v-for="(literature, index) in literatureList" 
						:key="literature.id"
					>
						<!-- 文献类型标签 -->
						<view class="form-group wenxian">
							<view class="tag-container">
								<view class="tag-item active">文献{{ index + 1 }}</view>
							</view>
						</view>
						
						<view class="formbox">
							<!-- 文献名称 -->
							<view class="form-group">
								<view class="form-label">
									<text>文献名称</text>
									<text class="required">*</text>
								</view>
								<view class="input-container">
									<textarea 
										class="form-textarea"
										type="text"
										:adjust-position="false"
										placeholder="不支持关键字/广泛查询"
										v-model="literature.literatureName"
									/>
								</view>
							</view>
							
							<!-- 作者 -->
							<view class="form-group">
								<view class="form-label">
									<text>作者</text>
								</view>
								<view class="input-container">
									<input 
										class="form-input"
										type="text"
										placeholder="请输入作者姓名"
										v-model="literature.author"
									/>
								</view>
							</view>
							
							<!-- 期刊名称 -->
							<view class="form-group">
								<view class="form-label">
									<text>期刊名称</text>
								</view>
								<view class="input-container">
									<input 
										class="form-input"
										type="text"
										placeholder="请输入期刊名称"
										v-model="literature.journalName"
									/>
								</view>
							</view>
						</view>
						
						<!-- 删除按钮 -->
						<view class="delbox" v-if="literatureList.length > 1" @click="removeLiterature(index)">
							<up-image :src="delImg" width="40rpx" height="52rpx"></up-image>
						</view>
						
						<!-- 文献分隔线 -->
						<view class="literature-divider" v-if="index < literatureList.length - 1"></view>
					</view>
					<!-- 添加代查文献按钮 -->
					<view class="add-literature-section" v-if="literatureList.length < 5">
						<view class="add-button" @click="addLiterature">
							<up-icon name="plus" size="18" color="#4A90E2"></up-icon>
							<text class="add-text">添加代查文献</text>
						</view>
						<view class="limit-tip">
							<view class="imgbox">
								<up-image :src="countImg" width="186rpx" height="74rpx"></up-image>
							</view>
							<view class="count">还可添加{{ 5 - literatureList.length }}篇</view>
						</view>
					</view>
				</view>
				
				<!-- 常见问题 -->
				<view class="faq-section">
					<up-image  :src="questionImg" width="100%" mode="widtFix"></up-image>
					
				</view>
				<view class="tips">
					<view class="title">注意</view>
					<view class="row">每次至多提交5篇文献代查</view>
					<view class="row">每篇文献代查消耗50肝胆积分，代查成功后扣除</view>
					<view class="row">不支持模糊代查，请尽可能详细提供所需文献信息</view>
				</view>
				<view class="btnbox">
					<up-image  :src="submitImg" width="100%" height="160rpx" mode="widtFix"></up-image>
					
				</view>
			</view>
			
			<!-- 英文文献内容（暂时显示占位内容） -->
			<view class="content-section" v-if="activeTab === 'yingwenwenxian'">
				<view class="placeholder-content">
					<uni-icons type="info" size="60" color="#999"></uni-icons>
					<text class="placeholder-text">英文文献功能正在开发中...</text>
				</view>
			</view>
		</view>
		
		<!-- 底部导航 -->
		<view class="bottom-tabbar">
			<view class="tab-item active" @click="switchTab('zhinan')">
				<text class="tab-text active">诊疗指南</text>
			</view>
			<view class="tab-item" @click="switchTab('qikan')">
				<text class="tab-text">期刊杂志</text>
			</view>
			<view class="tab-item" @click="switchTab('tools')">
				<text class="tab-text">常用工具</text>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { ref } from 'vue';
	import { onShow } from "@dcloudio/uni-app";
	import paperImg from "@/static/paper_bg.png"
	import activeImg from "@/static/route.png"
	import emailImg from "@/static/email_bg.png"
	import countImg from "@/static/sheng_bg.png"
	import questionImg from "@/static/paper_question.png"
	import submitImg from "@/static/paper_submit.png"
	import delImg from "@/static/delete_paper.png"
	// 响应式数据
	const activeTab = ref('daichawenxian');
	
	// 表单数据
	const formData = ref({
		email: '',
		literatureName: '',
		author: '',
		journalName: ''
	});
	
	// 文献列表数据
	const literatureList = ref([
		{
			id: 1,
			literatureName: '',
			author: '',
			journalName: ''
		}
	]);
	
	// 常见问题数据
	const faqList = ref([
		{
			question: '如何查找文献？',
			answer: '请提供准确的文献标题、作者和期刊信息，我们将为您查找并发送到指定邮箱。',
			expanded: false
		},
		{
			question: '查找需要多长时间？',
			answer: '通常在1-3个工作日内完成文献查找并发送到您的邮箱。',
			expanded: false
		},
		{
			question: '支持哪些文献类型？',
			answer: '支持国内外期刊论文、会议论文、学位论文等多种文献类型。',
			expanded: false
		}
	]);
	
	// 切换顶部标签
	const switchTab = (tab) => {
		activeTab.value = tab;
	};
	
	// 切换底部导航
	const switchBottomTab = (tab) => {
		if (tab === 'zhinan') {
			uni.navigateTo({
				url: '/pages_app/zhinan/zhinan'
			});
		} else if (tab === 'tools') {
			uni.showToast({
				title: '功能开发中',
				icon: 'none'
			});
		}
	};
	
	// 添加文献
	const addLiterature = () => {
		if (literatureList.value.length >= 5) {
			uni.showToast({
				title: '最多只能添加5篇文献',
				icon: 'none'
			});
			return;
		}
		
		const newLiterature = {
			id: Date.now(), // 使用时间戳作为唯一ID
			literatureName: '',
			author: '',
			journalName: ''
		};
		
		literatureList.value.push(newLiterature);
		
		uni.showToast({
			title: '添加成功',
			icon: 'none'
		});
	};
	
	// 删除文献
	const removeLiterature = (index) => {
		if (literatureList.value.length <= 1) {
			uni.showToast({
				title: '至少保留一篇文献',
				icon: 'none'
			});
			return;
		}
		
		literatureList.value.splice(index, 1);
		
		uni.showToast({
			title: '删除成功',
			icon: 'none'
		});
	};
	
	// 切换FAQ展开状态
	const toggleFaq = (index) => {
		faqList.value[index].expanded = !faqList.value[index].expanded;
	};
	
	// 返回上一页
	const goBack = () => {
		const pages = getCurrentPages();
		if (pages.length > 1) {
			uni.navigateBack();
		} else {
			uni.switchTab({
				url: '/pages/index/index'
			});
		}
	};
	
	// 页面显示时的处理
	onShow(() => {
		console.log('期刊杂志页面显示');
	});
</script>

<style lang="scss" scoped>
// SCSS Variables
$primary-color: #8B2316;
$accent-color: #4A90E2;
$bg-color: #f5f5f5;
$white: #fff;
$text-primary: #333;
$text-secondary: #666;
$text-light: #999;
$border-color: #e0e0e0;
$nav-height: 140rpx;

.qikan-page {
	background:#f6f6f6;
	min-height: 100vh;
	padding-top:0rpx;
	padding-bottom: 100rpx; // 为底部导航预留空间
}

.main-content {
	flex: 1;
}

// 标签切换区域 - 固定在顶部
.tab-section {
	position: fixed;
	top: $nav-height; // 140rpx
	left: 0;
	right: 0;
	z-index: 80;
	background-color: #a5d9fe;
	padding: 0 30rpx;
	
	
	.tab-container {
		display: flex;
		align-items: center;
		height: 100rpx;
		
		.tab-item {
			position: relative;
			margin-right: 60rpx;
			padding: 20rpx 0;
			
			.tab-text {
				font-size: 32rpx;
				color: $text-secondary;
				font-weight: 500;
			}
			
			&.active {
				.tab-text {
					color: $primary-color;
					font-weight: 600;
				}
			}
			
			.tab-underline {
				position: absolute;
				bottom:15rpx;
				left: 50%;
				right: 0;
				transform: translateX(-50%);
				height: 18rpx;
				
				
			}
		}
	}
}

// 内容区域
.content-section {
	background-color: $bg-color;
	min-height: calc(100vh - 340rpx);
	margin-top: 100rpx; // 为固定的标签切换区域留出空间
}

// 头部横幅
.header-banner {
	background: linear-gradient(135deg, #87CEEB, #B0E0E6);
	margin: 20rpx 30rpx;
	border-radius: 20rpx;
	padding: 40rpx 30rpx;
	
	.banner-content {
		display: flex;
		align-items: center;
		
		.icon-container {
			position: relative;
			margin-right: 30rpx;
			
			.sparkle-icon {
				position: absolute;
				top: -10rpx;
				right: -10rpx;
				font-size: 24rpx;
			}
		}
		
		.banner-text {
			flex: 1;
			
			.main-title {
				font-size: 48rpx;
				font-weight: bold;
				color: $text-primary;
				margin-bottom: 10rpx;
			}
			
			.sub-title {
				font-size: 24rpx;
				color: $text-secondary;
				line-height: 1.4;
			}
		}
	}
}

// 表单区域
.form-section {
	
	margin: -156rpx 30rpx  20rpx;
	border-radius: 20rpx;
	padding: 0rpx 0rpx ;
	.wenxian{
		margin-top: 40rpx;
		
		
		overflow: hidden;
	}
	.from-cell{
		position: relative;
		.delbox{
			top:10rpx;
			right:30rpx;
			position: absolute;
		}
	}
	.formbox{
		padding:30rpx 30rpx 30rpx;
		background:#fff url("@/static/email_bg.png") no-repeat 0rpx 0;
		background-size: 100% 148rpx;
		border-radius: 10rpx;
		position: relative;
		z-index:8;
	}
	.formemail{
		padding:0 30rpx;
		height: 148rpx;
		display: flex;
		align-items:center;
		border-radius: 20rpx;
		background:#fff url("@/static/email_bg.png") no-repeat 0rpx 0!important;
		background-size: cover!important;
	}
	
	// 文献分隔线
	.literature-divider {
		height: 20rpx;
		margin: 20rpx 0;
		background-color: #f0f0f0;
		border-radius: 10rpx;
	}
	
	.form-group {
	
		margin-bottom: 40rpx;
		display: flex;
		
		background-size: 100% 652rpx;
		overflow: hidden;
		&:last-child {
			margin-bottom: 0;
		}
		
		.form-label {
			display: flex;
			align-items: center;
			width:160rpx;
			font-size: 28rpx;
			color: $text-primary;
			font-weight: 500;
			
			.required {
				color: #ff4757;
				margin-left: 8rpx;
			}
		}
		
		.input-container {
			flex:1;
			.form-input,.form-textarea{
				width: 100%;
				height: 80rpx;
				padding: 0 20rpx;
				background:#f6f6f6;
				border: 2rpx solid $border-color;
				border-radius: 12rpx;
				font-size: 28rpx;
				color: $text-primary;
				background-color: $white;
				box-sizing: border-box;
				&::placeholder {
					color: $text-light;
				}
				
				&:focus {
					border-color: $accent-color;
				}
			}
			.form-textarea{
				padding:20rpx;
				height: 200rpx;
			}
		}
		
		.tag-container {
			.tag-item {
				display: inline-block;
				padding: 16rpx 32rpx;
				background-color: #008aff;
				color: $white;
				border-radius: 10rpx 10rpx 0 0;
				font-size: 24rpx;
				font-weight: 500;
			}
		}
	}
	.from-cell .form-group:nth-child(1){
		margin-bottom: 0;
	}
	.formbox  .form-group:nth-child(1){
		margin-bottom: 40rpx;
	}
	
}

// 添加文献区域
.add-literature-section {
	position: relative;
	margin-top: 40rpx;
	padding-top: 40rpx;
	border-top: 2rpx solid $border-color;
	
	.add-button {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 80rpx;
		margin:0 20rpx;
		border: 2rpx solid #0197f1;
		border-radius:40rpx;
		background-color: rgba(74, 144, 226, 0.05);
		
		.add-text {
			margin-left: 10rpx;
			font-size: 28rpx;
			color: #0197f1;
			font-weight: 500;
		}
	}
	
	.limit-tip {
		position: absolute;
		right:0;
		top:-10rpx;
		text-align: center;
		margin-top: 20rpx;
		font-size: 24rpx;
		color: #fff;
		
	    width: 186rpx;
		height:74rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		box-sizing: border-box;
		.imgbox{
			top:0;
			position: absolute;
		}
		.count{
			margin-top: -20rpx;
			position: relative;
			z-index:3;
		}
	}
}

// 常见问题区域
.faq-section {
	margin: 0rpx 30rpx;
	background-color: $white;
	border-radius: 20rpx;
	padding: 1rpx 1rpx;
	
}
.tips{
	font-size: 24rpx;
	margin:30rpx 30rpx;
	color:#999;
}
.btnbox{
  margin:0 30rpx;
}
// 占位内容
.placeholder-content {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 400rpx;
	
	.placeholder-text {
		margin-top: 30rpx;
		font-size: 28rpx;
		color: $text-light;
	}
}


// 底部导航
.bottom-tabbar {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	height: 100rpx;
	background-color: $white;
	display: flex;
	align-items: center;
	justify-content: space-around;
	border-top: 1rpx solid #f0f0f0;
	z-index: 100;

	.tab-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		flex: 1;
		height: 100rpx;
		gap: 8rpx;
         &.active {
				color: #fff;
				background-color: #8B2316;
			}
		.tab-icon {
			width: 44rpx;
			height: 44rpx;
		}

		.tab-text {
			font-size: 32rpx;
			color: $text-secondary;
			&.active {
							color: #fff;
							
						}
		}
	}
	.tab-item:nth-child(2){
		border-right: 2rpx solid #eee;
		border-left: 2rpx solid #eee;
	}
}
</style>
