<template>
	<view class="consult-header">
		<view class="consult-header-left">
			<div class="doctor-info">
				<text class="doctor-name">{{ consult.doctorName }}</text>
				<text class="doctor-title">{{ consult.doctorTitle }}</text>
			</div>
			<div class="doctor-info" style="margin-top: 10rpx;">
				<text class="doctor-hos">震元堂中医院</text>
				<text v-if="consult.deptName" class="doctor-dept">| {{ consult.deptName }}</text>
			</div>
		</view>
		<view class="summary-btn" @click.stop="viewSummary">病情概要</view>
	</view>
</template>
<script setup>
defineProps({
	consult: {
		type: Object,
		default: () => ({})
	}
})	
const emits = defineEmits(['viewSummary']);

function viewSummary() {
	emits('viewSummary');
}
</script>
<style lang="scss" scoped>
.consult-header {
	display: flex;
	flex-direction: initial;
	align-items: center;
	padding: 24rpx 30rpx;
	background: #fff;

	@at-root &-left {
		width: 0;
		flex-grow: 1;
		overflow: hidden;
	}

	.summary-btn {
		width: 160rpx;
		height: 46rpx;
		line-height: 46rpx;
		text-align: center;
		color: $theme-brown-primary;
		font-size: 26rpx;
		border-radius: 32rpx;
		border: 1px solid $theme-brown-primary;
	}

	.doctor-name {
		font-size: 32rpx;
		font-weight: bold;
	}

	.doctor-title {
		margin-left: 10rpx;
		color: #999;
	}

	.doctor-hos {
		font-size: 30rpx;
		font-weight: 600;
	}

	.doctor-dept {
		font-size: 28rpx;
		margin-left: 10rpx;
	}
}
</style>