<template>
	<div class="report-container">
		<el-page-header icon="" @back="goBack" content="医院预约报表中心">
			<template #title>
				<span></span>
			</template>
		</el-page-header>
		<el-row style="margin-top: 20px;margin-bottom: -30px;">
			<el-form-item>
				<el-date-picker style="margin-left: 8px; width: 300px"  
					type="daterange" range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间"
					value-format="YYYY-MM-DD" />
			</el-form-item>
			<el-button  style="margin-left: 10px;">搜索</el-button>
			<!-- <el-button type="primary" @click="Add()" style="margin-left: 10px;">添加</el-button> -->
		</el-row>
		<el-tabs v-model="activeTab" type="card" style="margin-top: 20px" @tab-change="handleTabChange">
			<!-- 手术预约 -->


			<!-- 床位预约 -->


			<!-- 医技预约 -->
			<el-tab-pane label="医技预约" name="tech">
				<el-row :gutter="20" class="mb-20">
					<el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
						<el-card shadow="hover" class="chart-card">
							<div ref="techBarRef" class="chart-large"></div>
						</el-card>
					</el-col>
					<el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
						<el-card shadow="hover" class="chart-card">
							<div ref="techPieRef" class="chart-large"></div>
						</el-card>
					</el-col>
				</el-row>

				<el-row :gutter="20">
					<el-col :span="24">
						<el-card shadow="hover">
							<template #header>
								<div class="card-header">预约时间段分布</div>
							</template>
							<el-table :data="techTableData" stripe height="300" style="width: 100%">
								<el-table-column prop="type" label="时间段" />
								<el-table-column prop="dept" label="预约数量" />
								<el-table-column prop="patient" label="预约率" />
								<el-table-column prop="scheduledTime" label="空闲数量" />
								<el-table-column prop="status" label="空闲率" />
								<el-table-column prop="shuangyueliang" label="爽约数量" />
								<el-table-column prop="shuangyuelv" label="爽约率" />
							</el-table>
						</el-card>
					</el-col>
				</el-row>
			</el-tab-pane>
		</el-tabs>
	</div>
</template>

<script setup>
	import {
		ref,
		onMounted,
		onBeforeUnmount,
		nextTick
	} from 'vue'
	import * as echarts from 'echarts'
	import {
		ElMessage
	} from 'element-plus'
	import {
		useRoute,
		useRouter
	} from "vue-router"
	const route = useRoute()
	const router = useRouter()

	const goBack = () => {
		ElMessage.info('返回上一页')
	}
	const activeTab = ref('surgery')

	// 图表引用
	const surgeryBarRef = ref(null)
	const surgeryPieRef = ref(null)
	const bedLineRef = ref(null)
	const bedGaugeRef = ref(null)
	const techBarRef = ref(null)
	const techPieRef = ref(null)

	// 存储所有图表实例
	const chartInstances = {
		surgery: [],
		bed: [],
		tech: []
	}

	// 模拟表格数据
	const surgeryTableData = ref([{
			dept: '普外科',
			surgeon: '张医生',
			patient: '李明',
			date: '2025-11-28',
			status: '已确认',
			count: 3
		},
		{
			dept: '骨科',
			surgeon: '王医生',
			patient: '赵芳',
			date: '2025-11-29',
			status: '待确认',
			count: 2
		},
		{
			dept: '心胸外科',
			surgeon: '刘医生',
			patient: '陈强',
			date: '2025-11-30',
			status: '已取消',
			count: 1
		},
	])

	const bedTableData = ref([{
			ward: '内科A区',
			total: 50,
			occupied: 42,
			available: 8,
			rate: 84
		},
		{
			ward: '外科B区',
			total: 40,
			occupied: 30,
			available: 10,
			rate: 75
		},
		{
			ward: 'ICU',
			total: 20,
			occupied: 18,
			available: 2,
			rate: 90
		},
		{
			ward: '儿科',
			total: 30,
			occupied: 22,
			available: 8,
			rate: 73
		},
	])

	const techTableData = ref([{
			type: '8点-9点',
			dept: '20',
			patient: '0.63',
			scheduledTime: '10',
			status: '0.3',
			shuangyueliang:2,
			shuangyuelv:0.07
		},
		{
			type: '9点-10点',
			dept: '19',
			patient: '0.7',
			scheduledTime: '8',
			status: '0.3',
			shuangyueliang:0,
			shuangyuelv:0
		},
		{
			type: '10点-11点',
			dept: '26',
			patient: '0.81',
			scheduledTime: '6',
			status: '0.19',
			shuangyueliang:0,
			shuangyuelv:0
		},
	])

	// 进度条颜色
	const getProgressColor = (rate) => {
		if (rate > 90) return '#e74c3c'
		if (rate > 70) return '#f39c12'
		return '#2ecc71'
	}

	// 初始化指定标签页的图表
	const initTabCharts = (tab) => {
		// 先销毁该标签页已有的图表
		if (chartInstances[tab]) {
			chartInstances[tab].forEach(chart => chart.dispose())
			chartInstances[tab] = []
		}

		const initChart = (ref, option) => {
			if (!ref.value) return
			// 确保DOM元素可见
			const resizeObserver = new ResizeObserver(() => {
				const chart = echarts.init(ref.value)
				chart.setOption(option)
				chartInstances[tab].push(chart)
				resizeObserver.disconnect()
			})
			resizeObserver.observe(ref.value)
		}

		switch (tab) {
			case 'surgery':
				// 手术预约图表
				initChart(surgeryBarRef, {
					title: {
						text: '近7天手术预约量',
						left: 'center'
					},
					tooltip: {
						trigger: 'axis'
					},
					grid: {
						left: '3%',
						right: '4%',
						bottom: '10%',
						containLabel: true
					},
					xAxis: {
						type: 'category',
						data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
					},
					yAxis: {
						type: 'value'
					},
					series: [{
						data: [12, 19, 15, 22, 18, 10, 8],
						type: 'bar',
						color: '#5470c6'
					}]
				})

				initChart(surgeryPieRef, {
					title: {
						text: '手术类型分布',
						left: 'center'
					},
					tooltip: {
						trigger: 'item'
					},
					legend: {
						orient: 'vertical',
						left: 'left'
					},
					series: [{
						type: 'pie',
						radius: '60%',
						data: [{
								value: 335,
								name: '普外科'
							},
							{
								value: 310,
								name: '骨科'
							},
							{
								value: 234,
								name: '心胸外科'
							},
							{
								value: 135,
								name: '神经外科'
							},
							{
								value: 154,
								name: '其他'
							}
						]
					}]
				})
				break

			case 'bed':
				// 床位预约图表
				initChart(bedLineRef, {
					title: {
						text: '床位占用趋势（月度）',
						left: 'left'
					},
					tooltip: {
						trigger: 'axis'
					},
					legend: {
						data: ['已预约', '空闲']
					},
					grid: {
						left: '3%',
						right: '4%',
						bottom: '15%',
						containLabel: true
					},
					xAxis: {
						type: 'category',
						data: ['1月', '2月', '3月', '4月', '5月', '6月']
					},
					yAxis: {
						type: 'value'
					},
					series: [{
							name: '已预约',
							type: 'line',
							data: [820, 932, 901, 934, 1290, 1330],
							smooth: true
						},
						{
							name: '空闲',
							type: 'line',
							data: [180, 168, 199, 166, 110, 170],
							smooth: true
						}
					]
				})

				initChart(bedGaugeRef, {
					title: {
						text: '床位使用率',
						left: 'center',
						top: '1%'
					},
					series: [{
						type: 'gauge',
						startAngle: 180,
						endAngle: 0,
						min: 0,
						max: 100,
						progress: {
							show: true,
							width: 18
						},
						pointer: {
							show: false
						},
						axisLine: {
							lineStyle: {
								width: 18
							}
						},
						axisTick: {
							show: false
						},
						splitLine: {
							show: false
						},
						axisLabel: {
							show: false
						},
						detail: {
							formatter: '{value}%',
							valueAnimation: true,
							offsetCenter: [0, '60%'],
							fontSize: 30
						},
						data: [{
							value: 78,
							name: ''
						}]
					}]
				})
				break

			case 'tech':
				// 医技预约图表
				initChart(techBarRef, {
					title: {
						text: '申请科室分布',
						left: 'center'
					},
					tooltip: {
						trigger: 'axis'
					},
					grid: {
						left: '3%',
						right: '4%',
						bottom: '10%',
						containLabel: true
					},
					xAxis: {
						type: 'category',
						data: ['超声科', '放射科', '普放', '心电图', '胃肠镜科']
					},
					yAxis: {
						type: 'value'
					},
					series: [{
						data: [45, 32, 67, 28, 53],
						type: 'bar',
						color: '#91cc75'
					}]
				})

				initChart(techPieRef, {
					title: {
						text: '检查类型分布',
						left: 'center'
					},
					tooltip: {
						trigger: 'item'
					},
					legend: {
						orient: 'vertical',
						left: 'left'
					},
					series: [{
						type: 'pie',
						radius: ['40%', '70%'],
						data: [{
								value: 70,
								name: 'CT(70)'
							},
							{
								value: 30,
								name: '核磁(30)'
							},
							{
								value: 30,
								name: 'DR(30)'
							},
							{
								value: 150,
								name: '超声(150)'
							}
						]
					}]
				})
				break
		}
	}

	// 处理标签切换
	const handleTabChange = (tab) => {
		nextTick(() => {
			initTabCharts(tab)
		})
	}

	// 窗口大小变化时调整图表
	const handleResize = () => {
		Object.values(chartInstances).forEach(charts => {
			charts.forEach(chart => chart.resize())
		})
	}

	onMounted(() => {
		if (route.query.type) {
			activeTab.value = route.query.type
		}
		// 初始化默认标签页图表
		initTabCharts(activeTab.value)
		window.addEventListener('resize', handleResize)
	})

	onBeforeUnmount(() => {
		window.removeEventListener('resize', handleResize)
		// 销毁所有图表实例
		Object.values(chartInstances).forEach(charts => {
			charts.forEach(chart => chart.dispose())
		})
	})
</script>

<style scoped>
	.report-container {
		padding: 20px;
		background-color: #f5f7fa;
		min-height: 100vh;
	}

	.mb-20 {
		margin-bottom: 20px;
	}

	.card-header {
		font-weight: bold;
		color: #303133;
	}

	.chart-card {
		height: 100%;
	}

	/* 图表容器：大尺寸 */
	.chart-large {
		width: 100%;
		min-height: 380px;
	}

	/* 全宽图表（用于折线图） */
	.chart-full {
		width: 100%;
		min-height: 360px;
	}

	/* 仪表盘专用 */
	.chart-gauge {
		width: 100%;
		min-height: 360px;
		display: flex;
		align-items: center;
		justify-content: center;
	}
</style>