<template>
	<view class="container">
		<!-- 头部导航 -->
		<navBar :title="headerTitle" />
		
		<!-- 主要内容区域 -->
		<view class="main-content">
			<!-- 疾病诊断部分 -->
			<view class="header">
				<view class="section">
				<view class="section-content">
					<text class="diagnosis-text">疾病诊断: {{ pageData.diseaseName }}</text>
				</view>
			</view>
			</view>
			
			<!-- 化验报告部分 -->
			<view class="section">
				<view class="section-header">
					<text class="section-title">化验报告</text>
				</view>
				<view class="section-content">
					<text class="no-report-text" v-if="!pageData.hasLabReport">无检查化验报告</text>
					<view v-else class="lab-report-container">
						<view class="image-grid">
							<view 
								class="image-item" 
								v-for="(image, index) in caseImages" 
								:key="image.uuid"
								@click="previewImage(index)"
							>
								<image 
									:src="docUrl+image.path" 
									class="report-image"
									mode="aspectFill"
								/>
								<!-- <view class="image-date">{{ formatDate(image.createDate) }}</view> -->
							</view>
						</view>
					</view>
				</view>
			</view>
			
			<!-- 疾病描述部分 -->
			<view class="section">
				<view class="section-header">
					<text class="section-title">疾病描述</text>
				</view>
				<view class="section-content">
					<text class="description-text">{{ pageData.des || '暂无描述' }}</text>
				</view>
			</view>
		</view>
		
		<!-- 底部线条 -->
		<view class="bottom-line"></view>
	</view>
</template>

<script setup>
// Vue3 Composition API
import { ref, reactive, onMounted, computed } from 'vue'
import { onShow,onLoad } from '@dcloudio/uni-app'
import navBar from '@/components/navBar/navBar.vue'
import api from '@/api/api.js'
import docUrl from '@/utils/docUrl.js'
const uuid = ref('')
onLoad((options) => {
	uuid.value = options.uuid
})
onShow(() => {
	getDetail()
})
// 响应式数据
const pageData = ref({
	date: '',
	diseaseName: '',
	diagnosis: '',
	hasLabReport: false,
	labReport: '',
	description: '',
	photo: '',
	age: 0,
	title: '',
	patientUuid: '',
	diseaseUuid: '',
	state: 0,
	createDate: '',
	modifyDate: null
})

// 案例图片数据
const caseImages = ref([])

const getDetail = () => {
	api.caseDetail({
		caseUuid: uuid.value
	}).then(res => {
        console.log(res)
		if(res.code == 200){
			// 更新案例数据
			pageData.value = res.data.case
			// 更新案例图片
			caseImages.value = res.data.caseImg || []
			// 设置是否有化验报告（根据图片数量判断）
			pageData.value.hasLabReport = caseImages.value.length > 0
		}
	}).catch(err => {
		console.error('获取案例详情失败:', err)
		uni.showToast({
			title: '获取数据失败',
			icon: 'none'
		})
	})
}

// 计算属性
const headerTitle = computed(() => {
	return pageData.value.title || `${pageData.value.createDate}${pageData.value.diseaseName}`
})

// 格式化日期
const formatDate = (dateStr) => {
	if (!dateStr) return ''
	const date = new Date(dateStr)
	return date.toLocaleDateString('zh-CN', {
		year: 'numeric',
		month: '2-digit',
		day: '2-digit'
	}).replace(/\//g, '-')
}

// 方法
const goBack = () => {
	uni.navigateBack()
}

// 预览图片
const previewImage = (index) => {
	const urls = caseImages.value.map(img => docUrl+img.path)
	uni.previewImage({
		current: index,
		urls: urls
	})
}

// 生命周期
onMounted(() => {
	// 页面加载时的逻辑
	console.log('检查记录页面已加载')
})
</script>

<style scoped lang="scss">
.container {
	background-color: #ffffff;
	min-height: 100vh;
}

/* 状态栏样式 */
.status-bar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 10rpx 30rpx;
	background-color: #ffffff;
	font-size: 28rpx;
	color: #333333;
}

.status-left {
	font-weight: 500;
}

.status-center {
	flex: 1;
	display: flex;
	justify-content: center;
}

.network-icons {
	display: flex;
	align-items: center;
	gap: 10rpx;
}

.bluetooth-icon, .wifi-icon {
	font-size: 24rpx;
}

.speed {
	font-size: 24rpx;
	color: #666666;
}

.signal {
	font-size: 24rpx;
	color: #333333;
}

.status-right {
	font-weight: 500;
}

/* 头部导航样式 */


.back-btn {
	width: 60rpx;
	height: 60rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 20rpx;
}

.back-icon {
	font-size: 40rpx;
	color: #ff4444;
	font-weight: bold;
}

.header-title {
	font-size: 36rpx;
	color: #ff4444;
	font-weight: bold;
	flex: 1;
}

/* 主要内容区域 */
.main-content {
	position: fixed;
	top: calc(var(--status-bar-height) + 44px);
	left: 0;
	right:0;
	bottom: 0rpx;
	overflow-y: scroll;
	
}

.section {
	margin-bottom: 40rpx;
}

.section-header {
    margin-top: 20rpx;
	position: relative;
	
	margin-bottom: 20rpx;
}

.red-bar {
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 8rpx;
	height: 40rpx;
	background-color: #ff4444;
	border-radius: 4rpx;
}

.section-title {
	font-size: 32rpx;
	color: #333333;
	font-weight: bold;
	margin-left: 20rpx;
}

.section-content {
	padding-left: 28rpx;
}

.diagnosis-text {
	font-size: 30rpx;
	color: #333333;
	line-height: 1.5;
}
.header{
	background: #8B2316;
	color: #fff;
	margin-bottom: 20rpx;
	.section{
		padding:20rpx;
		margin-bottom: 10rpx;
	}
	.section-content{
		padding-left:0rpx;
	}
	.diagnosis-text{
		color: #fff;
	}
}
.no-report-text {
	font-size: 28rpx;
	color: #999999;
	line-height: 1.5;
}

.lab-report-text {
	font-size: 28rpx;
	color: #333333;
	line-height: 1.5;
}

.lab-report-container {
	margin-top: 20rpx;
}

.image-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 20rpx;
}

.image-item {
	position: relative;
	width: 200rpx;
	height: 200rpx;
	border-radius: 12rpx;
	overflow: hidden;
	
}

.report-image {
	width: 100%;
	height: 100%;
}

.image-date {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
	color: white;
	font-size: 20rpx;
	padding: 20rpx 10rpx 10rpx;
	text-align: center;
}

.description-text {
	font-size: 28rpx;
	color: #999999;
	line-height: 1.5;
}

/* 底部线条 */
.bottom-line {
	height: 2rpx;
	background-color: #f0f0f0;
	margin: 40rpx 30rpx 0;
}
</style>
