<template>
	<view class="content">
		<!-- 顶部导航栏 -->
		<uni-nav-bar
			left-icon="left"
			title="患者详情"
			@clickLeft="goBack"
			fixed
			color="#8B2316"
			height="140rpx"
			:border="false"
			backgroundColor="#eeeeee"
		>
			<template #right>
				<view class="nav-right" @click="editPatient">
					<uni-icons type="compose" size="22" color="#8B2316"></uni-icons>
				</view>
			</template>
		</uni-nav-bar>

		<!-- 头部信息卡片 -->
		<view class="card header-card">
			<image class="avatar" src="/static/avatar-a.png" mode="aspectFill"></image>
			<view class="base-info">
				<view class="name-row">
					<text class="name">aa</text>
					<up-image  :src="manImg" width="36rpx" height="36rpx" ></up-image>
				</view>
				<view class="line"><text class="label">昵称：</text><text class="value">Android</text></view>
				<view class="line"><text class="label">年龄：</text><text class="value">23</text><text class="sep">｜</text><text class="label">民族：</text><text class="value">未知</text></view>
				<view class="line multi">
					<text class="label">地区：</text>
					<text class="value">内蒙古自治区呼伦贝尔市莫力达瓦达斡尔族自治旗</text>
				</view>
			</view>
		</view>

		<!-- 功能分组条目 -->
		<view class="cell" @click="openGroup" style="margin-top: 20rpx;">
			<text class="cell-label">分组</text>
			<view class="cell-right">
				<text class="hint">分组了，分组2</text>
				<uni-icons type="right" color="#999" size="18"></uni-icons>
			</view>
		</view>
		<view class="cell" @click="editDesc">
			<text class="cell-label">描述</text>
			<view class="cell-right">
				<text class="hint">补充患者关键信息，方便随访患者</text>
				<uni-icons type="right" color="#999" size="18"></uni-icons>
			</view>
		</view>
		<view class="cell">
			<text class="cell-label">电话号码</text>
			<view class="cell-right">
				<text class="phone">18012345600</text>
			</view>
		</view>

		<!-- 患者病史 -->
		<view class="section-title">患者病史</view>
		<view class="card history-card">
			<text class="history-text" :class="{ fold: !showAllHistory }">{{ historyText }}</text>
			<text class="toggle" @click="toggleHistory">{{ showAllHistory ? '收起' : '展开全部' }}</text>
		</view>

		<!-- 底部操作 -->
		<view class="actions">
			<view class="action" @click="sendMessage">
				<up-image  :src="msgImg" width="44rpx" height="44rpx" ></up-image>
				<text class="action-text">发消息</text>
			</view>
			<view class="action" @click="goMakePlan">
				<up-image  :src="planImg" width="44rpx" height="44rpx" ></up-image>
				<text class="action-text">制定随访计划</text>
			</view>
			<view class="action" @click="recordIllness">
				<up-image  :src="recordImg" width="44rpx" height="44rpx" ></up-image>
				<text class="action-text">记录病情</text>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { ref } from 'vue'
	import { onShow } from '@dcloudio/uni-app'
	import msgImg from "@/static/icon_message_big.png"
	import planImg from "@/static/image_backgrond_red_big1.png"
	import recordImg from "@/static/image_backgrond_red_big.png"
	import manImg from "@/static/new_man_big.png"
	import womanImg from "@/static/new_woman_big.png"
	const showAllHistory = ref(false)
	const historyText = '2025年检查出戊型肝炎, 同时患有结核。有饮酒史、无吸烟史, 无输血或其他血液制品史, 使用过恩…'
	
	const goBack = ()=> uni.navigateBack()
	const editPatient = ()=> uni.showToast({ title:'编辑资料', icon:'none' })
	const openGroup = ()=> uni.showToast({ title:'分组', icon:'none' })
	const editDesc = ()=> uni.showToast({ title:'编辑描述', icon:'none' })
	const sendMessage = ()=> uni.showToast({ title:'发消息', icon:'none' })
	const goMakePlan = ()=> uni.navigateTo({ url:'/pages_app/visit/visit' })
	const recordIllness = ()=> uni.showToast({ title:'记录病情', icon:'none' })
	const toggleHistory = ()=> showAllHistory.value = !showAllHistory.value
</script>

<style lang="scss" scoped>
	.content { background:#f5f5f5; min-height:100vh;  }
	.nav-right { padding-right: 20rpx; }

	.card { background:#ffffff; padding: 20rpx; }
	.header-card { display:flex; }
	.avatar { width: 140rpx; height: 140rpx; border-radius: 12rpx; margin-right: 20rpx; }
	.base-info { flex:1; }
	.name-row { display:flex; align-items:center; margin-bottom: 10rpx; }
	.name { font-size: 40rpx; color:#222; margin-right: 10rpx;}
	.line { font-size: 28rpx; color:#666; margin-top: 6rpx; display:flex; align-items:center;  }
	.label { color:#999;white-space: nowrap; }
	.value { color:#333; }
	.sep { color:#ddd; margin: 0 10rpx; }
     .multi{
		 display: inline;
	 }
	.cell { display:flex; align-items:center; justify-content:space-between; background:#ffffff; padding: 28rpx 30rpx; border-top:1rpx solid #efefef; }
	.cell:first-of-type { margin-top: 10rpx; border-top:none; }
	.cell-label { font-size: 28rpx; color:#333; }
	.cell-right { display:flex; align-items:center; }
	.hint { font-size: 28rpx; color:#999; margin-right: 12rpx; }
	.phone { font-size: 32rpx; color:#b10000; }

	.section-title { padding: 16rpx 30rpx; color:#8B2316; font-size: 30rpx; margin-top: 20rpx; }
	.history-card { position: relative; }
	.history-text { font-size: 28rpx; color:#666; line-height: 1.7; display:block; }
	.history-text.fold { display:-webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
	.toggle { position:absolute; right: 20rpx; bottom: 16rpx; color:#b10000; font-size: 28rpx; }

	.actions { background:#ffffff; margin-top: 20rpx;}
	.action { display:flex; align-items:center;justify-content: center; padding: 28rpx 30rpx; border-top:1rpx solid #f0f0f0; }
	.action-text { font-size:28rpx; color:#333; margin-left: 12rpx; }
</style>
