<template>
	<div class="doctor-appointment-container">
		<!-- 顶部标题 -->
		<div class="header">
			<h1>在线预约医生</h1>
			<p>专业医疗团队，为您提供精准医疗服务</p>
		</div>
		<el-row :gutter="20">
			<el-col :span="6">
				<!-- 搜索栏 -->
				<div class="search-section">
					<div class="search-tabs">
						<button
							:class="['search-tab', activeTab === 'department' ? 'active' : '']"
							@click="activeTab = 'department'"
						>
							按科室
						</button>
						<button
							:class="['search-tab', activeTab === 'disease' ? 'active' : '']"
							@click="activeTab = 'disease'"
						>
							按疾病
						</button>
					</div>

					<div class="search-content">
						<!-- 按科室搜索 -->
						<div v-if="activeTab === 'department'" class="department-search">
							<div class="department-list">
								<div
									:class="['department-card', selectedDept === '' ? 'selected' : '']"
									@click="selectDepartment('')"
								>
									<h3></h3>
									<p>全部</p>
									<p>选择查看全部</p>
								</div>
								<div
									v-for="dept in departments"
									:key="dept.id"
									:class="['department-card', selectedDept === dept.id ? 'selected' : '']"
									@click="selectDepartment(dept.id)"
								>
									<h3>{{ dept.name }}</h3>
									<p>{{ dept.description }}</p>
								</div>
							</div>
						</div>
						<!-- 按疾病搜索 -->
						<div v-if="activeTab === 'disease'" class="disease-search">
							<div class="disease-tags">
            <span
							v-for="disease in filteredDiseases"
							:key="disease.id"
							class="disease-tag"
							@click="selectDisease(disease)"
						>
              {{ disease.name }}
            </span>
							</div>
						</div>
					</div>
				</div>
			</el-col>
			<el-col :span="18">
				<!-- 医生列表 -->
				<div class="doctor-list-section">
						<el-row :gutter="20" style="padding-bottom: 20px">
							<el-col :span="8"><h2>{{ currentTitle }}</h2></el-col>
							<el-col :span="8">
								<el-select v-model="state.page.intro"
													 placeholder="选择疾病"
													 size="large"
													 @change="init"
													 clearable>
									<el-option
										v-for="item in diseases"
										:key="item.name"
										:label="item.name"
										:value="item.name"
									/>
								</el-select>
							</el-col>
							<el-col :span="8">
								<el-select v-model="state.page.position"
													 placeholder="选择职称"
													 size="large"
													 @change="init"
													 clearable>
									<el-option
										v-for="item in position"
										:key="item.name"
										:label="item.name"
										:value="item.name"
									/>
								</el-select>
							</el-col>
						</el-row>

					<div class="doctor-list">

						<div v-for="doctor in state.getList" :key="doctor.id" class="doctor-card">
							<div class="doctor-info">
								<el-avatar :src="doctor.img" :size="80" class="doctor-avatar" />
								<div class="doctor-details">
									<div class="doctor-header">
										<h3 class="doctor-name">{{ doctor.userName }}</h3>
										<span class="doctor-title">{{ doctor.title }}</span>
									</div>
									<p class="doctor-hospital">
										<i class="el-icon-office-building"></i>
										{{ doctor.hospital }} · {{ doctor.department }}
									</p>
									<p class="doctor-specialty">
										<i class="el-icon-first-aid-kit"></i>
										擅长：{{ doctor.intro}}
									</p>
									<p class="doctor-education">
										<i class="el-icon-notebook-2"></i>
										{{ doctor.graduationSchool }} · {{ doctor.yearsExperience }}年经验
									</p>
									<div class="doctor-tags">
										<el-tag
											v-for="tag in doctor.tags.split(',')"
											:key="tag"
											size="small"
											:type="tagTypes[Math.floor(Math.random() * tagTypes.length)]"
										>
											{{ tag }}
										</el-tag>
									</div>
								</div>
							</div>
							<div class="doctor-actions">
								<div class="doctor-price">
									<span class="price">¥{{ doctor.amount }}</span>
									<span class="price-label">预约费用</span>
								</div>
								<el-button type="primary" class="book-btn" @click="bookAppointment(doctor)">
									立即预约
								</el-button>
							</div>
						</div>
					</div>
				</div>
			</el-col>
		</el-row>
	</div>
</template>

<script lang="ts" setup>
import { ref, computed, onMounted } from 'vue'
import { useRouter } from 'vue-router'
const router = useRouter()
const state = reactive(<any>{
	page:{
		limit:999,
		departmentId:"",
		intro:"",
	},
	getList:[]
})

// 当前激活的标签页
const activeTab = ref<'department' | 'disease'>('department')
// 科室数据
const departments = ref([])
// 疾病数据
const diseases = ref([
	{ id: 1, name: '感冒', departmentId: 1 },
	{ id: 2, name: '高血压', departmentId: 1 },
	{ id: 3, name: '糖尿病', departmentId: 1 },
	{ id: 4, name: '骨折', departmentId: 2 },
	{ id: 5, name: '腰椎间盘突出', departmentId: 2 },
	{ id: 6, name: '乳腺增生', departmentId: 3 },
	{ id: 7, name: '妊娠期糖尿病', departmentId: 3 },
	{ id: 8, name: '小儿肺炎', departmentId: 4 },
	{ id: 9, name: '儿童多动症', departmentId: 4 },
	{ id: 10, name: '近视', departmentId: 5 },
	{ id: 11, name: '白内障', departmentId: 5 },
	{ id: 12, name: '中耳炎', departmentId: 6 },
	{ id: 13, name: '过敏性鼻炎', departmentId: 6 }
])
const position = ref([
	{ id: 1, name: '专家' },
	{ id: 2, name: '主任医师' },
	{ id: 3, name: '副主任医师'},
])
// 选中的科室
const selectedDept = ref<number | null>(1)
// 过滤后的疾病
const filteredDiseases = ref(diseases.value)
// 选中的疾病
const selectedDisease = ref<any>(null)
// 标签类型
const tagTypes = ['', 'success', 'info', 'warning', 'danger']
// 当前标题
const currentTitle = computed(() => {
	if (selectedDisease.value) {
		return `擅长治疗"${selectedDisease.value.name}"的医生`
	}
	if (selectedDept.value) {
		const dept = departments.value.find(d => d.id === selectedDept.value)
		return dept ? `${dept.name}医生` : '所有医生'
	}
	return '推荐医生'
})
// 选择科室
const selectDepartment = (deptId: any) => {
	state.page.departmentId = deptId
	selectedDept.value = deptId
	selectedDisease.value = null
	init()
}
// 选择疾病
const selectDisease = (disease: any) => {
	state.page.intro = disease.name
	init()
}
// 预约医生
const bookAppointment = (doctor: any) => {
	router.push(`/list/${doctor.id}`)
}
function init() {
	frontRequest.get("/api/departments/page?limit=999").then(res =>{
		departments.value = res.data.list
	})
	frontRequest.get("/api/doctors/page",{params:state.page}).then(res =>{
		state.getList = res.data.list
	})
}
onMounted(() => {
	init()
})
</script>

<style scoped>
.doctor-appointment-container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 20px;
	font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', Arial, sans-serif;
	color: #333;
}

.header {
	text-align: center;
	margin-bottom: 30px;
}

.header h1 {
	font-size: 28px;
	color: #1a73e8;
	margin-bottom: 10px;
}

.header p {
	font-size: 16px;
	color: #666;
}

/* 搜索区域 */
.search-section {
	background-color: #f5f7fa;
	border-radius: 8px;
	padding: 20px;
	margin-bottom: 30px;
	box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.search-tabs {
	display: flex;
	border-bottom: 1px solid #e4e7ed;
	margin-bottom: 20px;
}

.search-tab {
	padding: 10px 20px;
	background: none;
	border: none;
	font-size: 16px;
	color: #606266;
	cursor: pointer;
	position: relative;
	transition: all 0.3s;
}

.search-tab:hover {
	color: #1a73e8;
}

.search-tab.active {
	color: #1a73e8;
	font-weight: bold;
}

.search-tab.active::after {
	content: '';
	position: absolute;
	bottom: -1px;
	left: 0;
	right: 0;
	height: 2px;
	background-color: #1a73e8;
}

/* 科室列表 */
.department-list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	gap: 15px;
}

.department-card {
	background-color: white;
	border-radius: 8px;
	padding: 15px;
	text-align: center;
	cursor: pointer;
	transition: all 0.3s;
	border: 1px solid #e4e7ed;
}

.department-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.department-card.selected {
	border-color: #1a73e8;
	background-color: #f0f7ff;
}
.department-card h3 {
	font-size: 16px;
	margin-bottom: 8px;
	color: #303133;
}

.department-card p {
	font-size: 12px;
	color: #909399;
}
.disease-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.disease-tag {
	padding: 8px 15px;
	background-color: #f0f7ff;
	color: #1a73e8;
	border-radius: 20px;
	font-size: 14px;
	cursor: pointer;
	transition: all 0.3s;
}

.disease-tag:hover {
	background-color: #1a73e8;
	color: white;
}

/* 医生列表区域 */
.doctor-list-section {
	background-color: white;
	border-radius: 8px;
	padding: 20px;
	box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
	font-size: 24px;
}

.section-header h2 {
	font-size: 20px;
	color: #303133;
}
.sort-options span {
	margin-right: 10px;
	font-size: 14px;
	color: #606266;
}

/* 医生卡片 */
.doctor-list {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.doctor-card {
	display: flex;
	justify-content: space-between;
	padding: 20px;
	border-radius: 8px;
	border: 1px solid #e4e7ed;
	transition: all 0.3s;
}

.doctor-card:hover {
	box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
	transform: translateY(-2px);
}

.doctor-info {
	display: flex;
	flex: 1;
}

.doctor-avatar {
	margin-right: 20px;
	flex-shrink: 0;
}

.doctor-details {
	flex: 1;
}

.doctor-header {
	display: flex;
	align-items: center;
	margin-bottom: 10px;
	flex-wrap: wrap;
	gap: 10px;
}

.doctor-name {
	font-size: 18px;
	font-weight: bold;
	color: #303133;
	margin: 0;
}

.doctor-title {
	font-size: 14px;
	color: #1a73e8;
	background-color: #f0f7ff;
	padding: 2px 8px;
	border-radius: 4px;
}
.doctor-hospital,
.doctor-specialty,
.doctor-education {
	font-size: 14px;
	color: #606266;
	margin: 5px 0;
	display: flex;
	align-items: center;
}

.doctor-hospital i,
.doctor-specialty i,
.doctor-education i {
	margin-right: 5px;
	color: #909399;
}

.doctor-tags {
	margin-top: 10px;
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
}

.doctor-actions {
	width: 180px;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	justify-content: space-between;
}

.doctor-price {
	text-align: right;
}

.price {
	font-size: 24px;
	font-weight: bold;
	color: #ff6b6b;
}

.price-label {
	display: block;
	font-size: 12px;
	color: #909399;
}
.book-btn {
	width: 100%;
}

/* 响应式设计 */
@media (max-width: 768px) {
	.doctor-card {
		flex-direction: column;
	}
	.doctor-actions {
		width: 100%;
		margin-top: 15px;
		align-items: flex-start;
	}
	.doctor-price {
		text-align: left;
	}
	.department-list {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 480px) {
	.search-tabs {
		flex-direction: column;
	}
	.department-list {
		grid-template-columns: 1fr;
	}
	.doctor-header {
		flex-direction: column;
		align-items: flex-start;
	}
}
</style>

<route lang="json">
{
"meta": {
"layout": "front"
}
}
</route>
