<template>
	<div class="consultation-page">
		<!-- Doctor Information Section -->
		<el-link type="primary" class="back-button" @click="to">
			返回
		</el-link>
		<el-card class="doctor-info-card" shadow="hover">
			<div class="doctor-header">
				<el-avatar :src="state.info.img" size="large" class="doctor-avatar"/>
				<div class="doctor-details">
					<h2>{{ state.info.userName }}</h2>
					<p class="specialty">{{ state.info.specialty }}</p>
					<p>{{ state.info.position }}</p>
					<p>{{ state.info.intro }}</p>
				</div>
			</div>
		</el-card>
		<el-card class="doctor-info-card" shadow="hover">
			<message :info="state.info"></message>
		</el-card>
	</div>
</template>
<script setup lang="ts">
import { reactive, ref } from 'vue'
import { useRoute } from 'vue-router'
import Message from '~/components/message.vue'
const route = useRoute()
const itemId = route.params.id
import { useRouter } from 'vue-router'
const router = useRouter()
const state = reactive(<any>{
	info: {},
})

function init() {
	frontRequest.get(`/api/doctors/${itemId}`).then(response => {
		state.info = response.data
	})
}


onMounted(() => {
	init()
})

/**
 * 跳转
 */
const to = () => {
	router.push(`/info/${itemId}`)
}
</script>
<style scoped>

.back-button {
	display: inline-flex;
	align-items: center;
	font-size: 14px; /* 设置字体大小 */
	color: #409eff; /* 默认的主色调 */
	font-weight: bold; /* 设置加粗 */
	padding: 5px 10px; /* 设置内边距 */
	border: 1px solid #409eff; /* 添加边框 */
	border-radius: 4px; /* 设置圆角 */
	background-color: #ffffff; /* 设置背景颜色 */
	transition: background-color 0.3s, color 0.3s; /* 添加过渡效果 */
	margin-bottom: 10px;
}

.back-button:hover {
	background-color: #409eff; /* hover 时背景色 */
	color: #ffffff; /* hover 时字体颜色 */
	cursor: pointer; /* 鼠标悬停时显示手型 */
}

.back-button::before {
	content: '←'; /* 添加箭头符号 */
	margin-right: 8px; /* 箭头与文本的间距 */
	font-size: 18px; /* 设置箭头大小 */
}
.consultation-page {
	max-width: 1000px;
	margin: 0 auto;
}

.doctor-info-card {
	display: flex;
	align-items: center;
	padding: 20px;
	background-color: #f9f9f9;
	margin-bottom: 20px;
}

.doctor-header {
	display: flex;
	align-items: center;
}

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

.doctor-details h2 {
	margin: 0;
	font-size: 24px;
}

.specialty, .doctor-details p {
	margin: 5px 0;
	color: #666;
}
</style>
<route lang="json">
{
"meta": {
"layout": "front"
}
}
</route>
