<template>
	<div class="daping">
		<div class="titleRow" style="height: 7%">
			<div>
				<div class="nav_to_left">
					<el-image style="height: 67px" :src="logo" fit="contain" />
					<div class="nav_top_null" :style="{ height: 40 + 'px' }"></div>
					<span class="nav_top_title" :style="{ fontSize: 36 + 'px' }" @click="virtualClick">胜透叫号系统</span>
				</div>
			</div>
			<div>
			</div>
			<div>
				<div>
					<div class="dateTime">
						{{ riqi }}
						<span class="time">
							<button style="border: solid 2px #70a3dd" class="buttime">{{ date }}</button>
						</span>
					</div>
				</div>
			</div>
		</div>
		<el-row style="height: 90%; background-color: #cbdae6">
			<el-col :span="8" style="height: 100%">
				<div class="jiaohao" style="width: 100%; height: 100%; font-weight: bolder">
					<div class="containerjiaohao" style="height: 49%; font-size: 40px; border-radius: 8px; color: #303133">
						<div style="border-bottom: 1px solid #dcdfe6; border-radius: 10px; text-align: center; background-color: #65aaf6; color: #ffffff">
							当前叫号
						</div>
						<div style="width: 100%; height: 100%; color: #65aaf6">
							<div style="height: 100%" :style="{ fontSize: fontSizeNum + 'px' }">
								<div style="height: 50%; display: flex; justify-content: center; align-items: center">{{ bedJh }}</div>
								<div style="height: 20%; display: flex; justify-content: center; align-items: center">
									<p v-if="大屏展示数据脱敏">{{ hideMiddleChars(patientNameJh) }}</p>
									<p v-else>{{ patientNameJh }}</p>
								</div>
							</div>
						</div>
					</div>
					<div
						class="containerjiaohao"
						style="height: 49%; font-size: 40px; margin-top: 20px; border-radius: 8px; color: #303133; overflow: hidden; position: relative"
					>
						<div style="border-bottom: 1px solid; background: #e6a910; text-align: center; border-radius: 10px; color: #ffffff">已叫号患者</div>
						<div>
							<div class="containerClin" style="overflow: hidden; position: relative" :style="{ fontSize: fontSizeNum1 + 'px' }">
								<div class="item" style="text-align: center" v-for="(pat, index) in yijioahaohuanzList" :key="index">
									<div class="nameclass">
										<div class="text">
											<span v-if="大屏展示数据脱敏">{{ hideMiddleChars(pat.患者姓名) }}</span>
											<span v-else>{{ pat.患者姓名 }}</span>
											<span> {{ pat.床号 }}</span
											>床
										</div>
										<div class="circle">过</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</el-col>
			<el-col :span="16" style="height: 100%">
				<div class="container">
					<div v-for="(row, index) in tableData" :key="index" :style="{ fontSize: fontSizeNum2 + 'px' }">
						<div class="card" style="width: 100%; height: 100%; background-color: #65aaf6; color: #ffffff" v-if="row.叫号状态 === '已叫号'">
							<div class="info">
								<p v-if="大屏展示数据脱敏">{{ hideMiddleChars(row.patientName) }}</p>
								<p v-else>{{ row.patientName }}</p>
								<el-row
									:style="{ fontSize: fontSizeNum2 * 0.7 + 'px' }"
									style="margin-top: 10px; font-family: AlibabaPuHuiTi, AlibabaPuHuiTi; font-weight: 500"
								>
									<el-col :span="8" class="buhuanhang" style="height: 35px; line-height: 35px; width: 100%"  v-if="isShow('分区')">{{ row.设备分区名称 }}</el-col>
									<el-col :span="8" class="buhuanhang" style="height: 35px; line-height: 35px; text-align:  center" v-if="isShow('床号')">{{ row.deviceNo }}床</el-col>
									<el-col :span="8" class="buhuanhang" style="height: 35px; line-height: 35px; text-align: right" v-if="isShow('剩余时间')">{{ row.leftTime }}</el-col>
								</el-row>
							</div>
							<div class="status" style="background-color: #ffffff">
								<span class="ml-2" style="color: #333333">呼叫中</span>
							</div>
						</div>
						<div class="card" style="width: 100%; height: 100%; background-color: #ffffff; color: #333333" v-else>
							<div class="info">
								<p v-if="大屏展示数据脱敏">{{ hideMiddleChars(row.patientName) }}</p>
								<p v-else>{{ row.patientName }}</p>

								<el-row
									:style="{ fontSize: fontSizeNum2 * 0.7 + 'px' }"
									style="margin-top: 10px; font-family: AlibabaPuHuiTi, AlibabaPuHuiTi; font-weight: 500"
								>
									<el-col class="buhuanhang" :span="8" style="height: 35px; line-height: 35px; overflow: hidden"  v-if="isShow('分区')">{{ row.设备分区名称 }}</el-col>
									<el-col class="buhuanhang" :span="8" style="height: 35px; line-height: 35px; text-align: center" v-if="isShow('床号')">{{ row.deviceNo }}床</el-col>
									<el-col class="buhuanhang" :span="8" style="height: 35px; line-height: 35px; text-align: right" v-if="isShow('剩余时间')">{{ row.leftTime }}</el-col>
								</el-row>
							</div>
							<div class="status" style="color: #ffffff" v-if="isShow('状态')">
								<span class="ml-2" style="background-color: #909399" v-if="row.status == '0.0'">未签到</span>
								<span class="ml-2" style="background-color: #67c23a" v-if="row.status == '1.0'">已签到</span>
								<span class="ml-2" style="background-color: #67c23a" v-if="row.status == '2.0'">透析中</span>
								<span class="ml-2" style="background-color: #409eff" v-if="row.status == '2.5'">已结束</span>
								<span class="ml-2" style="background-color: #e6a23c" v-if="row.status == '3.0'">已检查</span>
								<span class="ml-2" style="background-color: #f56c6c" v-if="row.status == '4.0'">已归档</span>
								<!-- <span class="ml-2" >透析中</span> -->
							</div>
						</div>
					</div>
				</div>
			</el-col>
		</el-row>
		<el-row>
			<div style="height: 3%; width: 100%; font-size: 20px; text-align: right">
				<div style="text-align: right; color: black">
					共{{ pages }}页{{ total }}条&nbsp;&nbsp;当前第<b>{{ whereForm.page }}</b
					>页

					<el-popover placement="top-start" title="字体设置" :width="200" trigger="hover">
						<template #reference>
							<el-icon><Tools /></el-icon>
						</template>
						<div>
							叫号字体
							<el-input-number v-model="fontSizeNum" :min="20" :max="200" @change="handleChange" />
						</div>
						<div>
							已叫号字体
							<el-input-number v-model="fontSizeNum1" :min="20" :max="200" @change="handleChange" />
						</div>
						<div>
							卡片字体
							<el-input-number v-model="fontSizeNum2" :min="20" :max="100" @change="handleChange" />
						</div>
					</el-popover>
				</div>
			</div>
			<audio id="audioElement" ref="audioRef" controls preload="none"></audio>
		</el-row>

		<div class="centBody2" v-if="jhzhuangt">
			<div style="margin-top: 10%; font-size: 3rem; margin-left: 3rem">当前叫号</div>
			<div style="font-size: 12rem; text-align: center; color: #70a3dd">{{ patientName }}</div>
		</div>
		<div class="centBody2" v-if="xjzhuangtai">
			<div style="font-size: 11rem; text-align: center; color: #70a3dd; margin-top: 20%">{{ patientName }} 治疗结束</div>
		</div>
		<webSocket @retBody="alertBody"></webSocket>
		<div v-if="showVideo" class="fullscreen-video-overlay" @click="hideVideo" style="width: 100%;height: 100%;background-color: #409eff;">
			<video v-if="videoType==='video'" ref="videoPlayer" class="fullscreen-video" :src="videoUrl" autoplay loop muted playsinline></video>
            <el-carousel v-else indicator-position="outside" :interval="30000" :height="screenHeight + 'px'" style="width: 100%;height: 100%;" >
                <el-carousel-item v-for="item in imgsRuls" :key="item" style="width: 100%;height: 100%;">
                    <el-image :src="item" fit="fill" style="width: 100%;height: 100%;"></el-image>
                </el-carousel-item>
            </el-carousel>
		</div>
	</div>
</template>
<script setup lang="ts">
import { useRouter } from 'vue-router';
import { computed, onMounted, ref } from 'vue';
import { listCurrentHemoMeds, listCurrentLcdMedia } from '/@/api/comm';
import { useRoute } from 'vue-router';
import { useStore } from '/@/store/index';
import logo from '/@/assets/imgs/LOGO.png';
import { formatDate } from '/@/utils/formatTime';
import webSocket from '/@/views/components/webSocket/index.vue';
import Speech from 'speak-tts';
import { ElLoading, ElMessage } from 'element-plus';
import pinyin from 'pinyin';
import { Local, Session } from '/@/utils/storage';
import { findNearestTimeSlot } from '/@/utils/utils.ts';
const router = useRoute();
const store: any = useStore();
const tableData = ref([]);
const showCols = ref(['姓名', '床号', '剩余时间', '状态', '班次', '透析模式', '开始时间', '超滤总量', '下次治疗日期']);
const pages = ref(0);
const total = ref(0);
const date = ref('');
const riqi = ref('');
const jhzhuangt = ref(false);
const xjzhuangtai = ref(false);
const patientName = ref('');
const num = ref(0); // 是否再播报中  0 是空 1 是再播报
const userouter = useRouter();
const fontSizeNum = ref(36); // 叫号字体
const audioRef = ref(null)
const fontSizeNum1 = ref(36); //已叫号字体

const fontSizeNum2 = ref(30); // 卡片字体
const screenHeight = ref(window.innerHeight)
// 语音播报
const speech = ref(null);
// 表格模式 还是卡片模式
const 大屏展示数据脱敏 = ref(false);
const 大屏语音播报类型 = ref(0); // 0 后端 1前端
const whereForm = ref({
	page: 1,
	size: 10,
	clientCode: '',
	clientName: '',
	groupCode: '',
});

// 视频相关
const videoUrl = ref(""); // 替换为你的 HTTPS 视频地址
const imgsRuls = ref([]); // 替换为你的 HTTPS 视频地址
const showVideo = ref(false);
const videoType=ref(0) // 0 视频 1 图片
const videoPlayer = ref(null);

// 当前小时
const currentHour = ref(new Date().getHours());
const timeSlots = ref();
const shiduanneirong = ref({
	startHours: 24,
	endHours: 24,
	startMinutes: -1,
	endMinutes: -1,
	imgUrl: '',
});
/**
 * 获取时段内容
 */
const getShiduan = () => {
	listCurrentLcdMedia({ clientCode: whereForm.value.clientCode }).then((res) => {
		console.log(res, '-----------------');
		timeSlots.value = res.data;
	});
};
// 定时更新时间（每分钟）
const updateTime = () => {
	const now = new Date();
	currentHour.value = now.getHours();
	const minutes = now.getMinutes();
	const hours = now.getHours();
	console.log('当前时间:', hours + ':' + minutes);
	console.log('当前时间:', hours + ':' + minutes);
	console.log('当前时间:', hours + ':' + minutes);
	console.log('当前时间:', hours + ':' + minutes);
	console.log(hours, minutes, shiduanneirong.value);
	const mode1 = findNearestTimeSlot(timeSlots.value);
	// 判断是否在 x:00 - y:00 之间
	if (mode1) {
		console.log('在指定时间段内，显示视频');
		// 只赋值一次
		if (videoUrl.value !== mode1.lcdMediaFilesList[0].filePath&&mode1.lcdMediaFilesList[0].fileType=="video") {
            videoType.value=mode1.lcdMediaFilesList[0].fileType //查看是视频还是图片
			videoUrl.value = mode1.lcdMediaFilesList[0].filePath; //赋值视频地址
            imgsRuls.value=mode1.lcdMediaFilesList.map(item=>item.filePath) // 赋值图片地址
            
		}else if(videoUrl.value !== mode1.lcdMediaFilesList[0].filePath&&mode1.lcdMediaFilesList[0].fileType=="image"){
            videoType.value=mode1.lcdMediaFilesList[0].fileType //查看是视频还是图片
            imgsRuls.value=mode1.lcdMediaFilesList.map(item=>item.filePath) // 赋值图片地址

        }
		console.log(mode1, '当前时段');
		console.log(videoUrl.value, '视频地址');
        console.log(imgsRuls.value, '图片地址');
		showVideo.value = true;
	} else {
		console.log('不在指定时间段内，隐藏视频');
		showVideo.value = false;
	}
};

// 手动隐藏视频（可选）
const hideVideo = () => {
	showVideo.value = false;
	if (videoPlayer.value) {
		videoPlayer.value.pause();
	}
};
const numberTime = () => {
	setInterval(() => {
		date.value = formatDate(new Date(), 'HH:MM');
		riqi.value = formatDate(new Date(), 'YYYY-mm-dd WWW');
		updateTime(); // 每分钟更新一次时间和视频显示状态
		if (date.value === '00:00') {
			userouter.go(0);
		} else if (date.value === '03:00') {
			userouter.go(0);
		} else if (date.value === '06:00') {
			userouter.go(0);
		} else if (date.value === '09:00') {
			userouter.go(0);
		} else if (date.value === '12:00') {
			userouter.go(0);
		} else if (date.value === '15:00') {
			userouter.go(0);
		} else if (date.value === '18:00') {
			userouter.go(0);
		} else if (date.value === '21:00') {
			userouter.go(0);
		}
	}, 59000);
};
// 当前叫号
const dangqianjiaohaoList = ref([{ patientName: '', date: new Date(), bedNo: '' }]);
// 治疗结束
const zhiliaojieshuList = ref([{ patientName: '', date: new Date(), bedNo: '' }]);
// 已叫号患者
const yijioahaohuanzList = ref([]);
function getFirstLetter(char: string): string {
	const result = pinyin(char, { style: pinyin.STYLE_TONE }).join('');
	return result.toUpperCase();
}

const hideMiddleChars = (name) => {
	console.log(name, '名字');
	// 检查输入是否为字符串并且长度大于等于2
	if (typeof name !== 'string' || name.length < 2) {
		return name;
	}

	// 获取名字的第一个字符和最后一个字符
	const firstChar = name[0];
	const lastChar = name[name.length - 1];
	const jiami = getFirstLetter(name[1]).substring(0, 1);
	// 如果名字长度为2，则只保留首尾字符，中间不加*
	if (name.length === 2) {
		return firstChar + jiami;
	}

	// 计算需要替换为 * 的字符数量
	const stars = jiami.repeat(1);

	// 返回新的名字格式
	return `${firstChar}${stars}${lastChar}`;
};

const alertBody = (data) => {
	console.log(data);
	if (data.callType === '结束叫号') {
		console.log('结束叫号');
	} else if (data.callType === '开始叫号') {
		if (num.value === 0) {
			patientNameJh.value = data.patientName;
			if (data.patPinyinCode) {
				if(大屏语音播报类型.value===0){
					ksjh0(data.patPinyinCode, data.bedNo,data.deviceGroupName);	
				}else{
					ksjh1(data.patPinyinCode, data.bedNo,data.deviceGroupName);
				}
			} else {
				if(大屏语音播报类型.value===0){
					ksjh0(data.patientName, data.bedNo,data.deviceGroupName);}
				else{
					ksjh1(data.patientName, data.bedNo,data.deviceGroupName);
				}
				
			}
		}
	} else if (data.callType === '下机') {
		patientName.value = data.patientName;
		if (data.patPinyinCode) {
			xjjh(data.patPinyinCode);
		} else {
			xjjh(data.patientName);
		}
	}
	//只要叫号 就赋值给叫号列表
	patientName.value = data.patientName;
	const x = yijioahaohuanzList.value.findIndex((e) => e.患者姓名 === patientName.value);
	console.log('-----------------', x);
	if (x === -1) {
		yijioahaohuanzList.value.unshift({ 患者姓名: data.patientName, date: new Date(), 床号: data.bedNo });
	}
};
const patientNameJh = ref('');
const bedJh = ref('');
/**
 * 
 * @param patientName 后端叫号
 * @param bedNo 
 * @param deviceGroupName 
 */
const ksjh0= async (patientName,bedNo,deviceGroupName)=>{
	bedJh.value = bedNo + '床';
	try {
		const formData = new FormData();
		formData.append('text', `当前叫号 ${patientName},${deviceGroupName} ${bedJh.value}`);
		formData.append('lang', 'zh');
		formData.append('spk_id', 0);
		formData.append('rate', '+10%');
		formData.append('vol', '6');
		
		// 从环境变量获取 TTS 地址
		const ttsUrl = import.meta.env.VITE_TTS_URL as string;
		console.log('TTS URL:', ttsUrl);
		
		const response = await fetch(ttsUrl, {
			method: 'POST',
			body: formData,
		});
		if (!response.ok) {
			throw new Error(`HTTP ${response.status}: ${response.statusText}`);
		}
		// 获取音频数据
		const audioData = await response.arrayBuffer();
		// 创建音频 Blob
		const audioBlob = new Blob([audioData], { type: 'audio/wav' });
		const audioUrl = URL.createObjectURL(audioBlob);
		const audioElement = audioRef.value // 获取 DOM 元素
		// 清理之前的音频
		if (audioElement.src) {
			URL.revokeObjectURL(audioElement.src);
		}
		// 设置新音频
		audioElement.src = audioUrl;
		audioElement.load();
		// 播放音频
		try {
			console.log('开始播放音频');
			num.value = 1; // 标记正在播报中
			await audioElement.play();
			
			// 等待音频播放完成
			await new Promise((resolve) => {
				const onEnded = () => {
					audioElement.removeEventListener('ended', onEnded);
					resolve(null);
				};
				audioElement.addEventListener('ended', onEnded);
			});
			
			console.log("播报完成...")
		} catch (playError) {
			throw new Error('播放失败: ' + playError.message);
		}
	}catch (error) {
		console.error('Error:', error);
		ElMessage.error('语音合成服务异常，请联系管理员');
	} finally {
		// 播报完成，重置所有状态
		num.value = 0;
		jhzhuangt.value = false;
		xjzhuangtai.value = false;
		patientNameJh.value = '';
		bedJh.value = '';
	}
	
}
/**
 * 
 * @param patientName 前端叫号
 * @param bedNo 
 * @param deviceGroupName 
 */
const ksjh1 = (patientName, bedNo, deviceGroupName) => {
	console.log(num.value);
	num.value = 1;
	bedJh.value = bedNo + '床';
	speech.value
		.speak({
			text: `当前叫号 ${patientName},${deviceGroupName} ${bedJh.value}`,
			rate: 10,
			listeners: {
				//开始播放
				onstart: () => {
					console.log('Start utterance');
				},
				//判断播放是否完毕
				onend: () => {
					console.log('End utterance');
				},
				//恢复播放
				onresume: () => {
					console.log('Resume utterance');
				},
			},
		})
		.then(() => {
			console.log('播报完成...');
		})
		.finally(() => {
			// 播报完成，重置所有状态
			num.value = 0;
			jhzhuangt.value = false;
			xjzhuangtai.value = false;
			patientNameJh.value = '';
			bedJh.value = '';
		});
};

const xjjh = (patientName) => {
	console.log(num.value);
	num.value = 1;
	speech.value
		.speak({
			text: `${patientName} 治疗结束`,
			listeners: {
				//开始播放
				onstart: () => {
					console.log('Start utterance');
				},
				//判断播放是否完毕
				onend: () => {
					console.log('End utterance');
				},
				//恢复播放
				onresume: () => {
					console.log('Resume utterance');
				},
			},
		})
		.then(() => {
			num.value = 0;
			console.log('播报完成...');
			jhzhuangt.value = false;
			xjzhuangtai.value = false;
		});
};
const test = () => {
	speech.value
		.speak({
			text: '开启播报',
			listeners: {
				//开始播放
				onstart: () => {
					console.log('开始播报');
				},
				//判断播放是否完毕
				onend: () => {
					console.log('播报完成');
				},
				//恢复播放
				onresume: () => {
					console.log('Resume utterance');
				},
			},
		})
		.then(() => {
			console.log('播报完成...');
		});
};
/**
 * 模拟按钮点击
 * @param callback
 */
const virtualClick = () => {
	if(大屏语音播报类型.value===0){
		ksjh0('后端测试用户', '001','测试分区');	
	}else{
		ksjh1('前端测试用户', '001','测试分区');	
	}
};
const handleChange = () => {
	console.log(fontSizeNum.value, '设置字体大小');
	Local.set('fontSizeNum', fontSizeNum.value);
	Local.set('fontSizeNum1', fontSizeNum1.value);
	Local.set('fontSizeNum2', fontSizeNum2.value);
};
const isShow=(col:string)=>{
	const x=showCols.value.findIndex(e=>{return e===col})
	if(x>=0){return true}
	else{
		return false
	}
}
onMounted(() => {
	let num = Local.get('fontSizeNum');
	let num1 = Local.get('fontSizeNum1');
	let num2 = Local.get('fontSizeNum2');
	console.log(num, '-----------------------------');
	console.log(num1, '-----------------------------');
	if (num) {
		fontSizeNum.value = num;
	}
	if (num1) {
		fontSizeNum1.value = num1;
	}
	if (num2) {
		fontSizeNum2.value = num2;
	}
	dangqianjiaohaoList.value = [];
	date.value = formatDate(new Date(), 'HH:MM');
	riqi.value = formatDate(new Date(), 'YYYY-mm-dd WWW');
	numberTime();
	console.log(router.query);
	const query = router.query;
	if (query === undefined) {
		ElMessage.error('没有请求参数，请重新配置路径参数');
		return false;
	}
	if (query.pagesize === undefined || query.clientCode === undefined) {
		ElMessage.error('没有请求参数，请重新配置路径参数');
		return false;
	}

	if (query.groupCode !== undefined && query.groupCode !== '') {
		whereForm.value.groupCode = query.groupCode.toString();
	}
	if (query.clientCode !== '' && query.pagesize !== '') {
		whereForm.value.size = Number(query.pagesize);
		whereForm.value.clientCode = query.clientCode.toString();
		getData();
		getShiduan();
	}
	speech.value = new Speech();
	speech.value?.setLanguage('zh-CN');
	speech.value?.init().then(() => {
		console.log('语音初 始化成功');
	});
});
const getData = () => {
	const pa = {
		clientCode: whereForm.value.clientCode,
		groupCode: whereForm.value.groupCode,
		page: whereForm.value.page,
		size: whereForm.value.size,
	};
	listCurrentHemoMeds(pa)
		.then((re) => {
			whereForm.value.clientName = re.data.clientName;
			大屏展示数据脱敏.value = re.data.大屏展示数据脱敏选项 === 1 ? true : false;
			大屏语音播报类型.value = re.data.大屏语音播报类型;
			let arrlist = re.data.rows.list;
			arrlist.sort((a, b) => {
				if (a.叫号状态 === '已叫号' && b.叫号状态 !== '已叫号') return -1;
				if (a.叫号状态 !== '已叫号' && b.叫号状态 === '已叫号') return 1;
				return 0;
			});
			tableData.value = arrlist;
			pages.value = re.data.rows.pages;
			total.value = re.data.rows.total;
			yijioahaohuanzList.value = re.data.已叫号列表;
			if (re.data.当前叫号列表.length) {
				yijioahaohuanzList.value.push(...re.data.当前叫号列表);
				// yijioahaohuanzList.value.unshift()
			}
			// yijioahaohuanzList.value.push(...re.data.已前叫号列表)
			if (re.data.患者等待大屏自定义显示项) {
				showCols.value = JSON.parse(re.data.患者等待大屏自定义显示项);
			}
			// Tools
			if (re.data.rows.endRow < re.data.rows.total) {
				setTimeout(() => {
					whereForm.value.page++;
					getData();
				}, 10000);
			} else {
				setTimeout(() => {
					whereForm.value.page = 1;
					getData();
				}, 10000);
			}
		})
		.catch(() => {
			setTimeout(() => {
				whereForm.value.page = 1;
				getData();
			}, 10000);
		});
	// 更据当前时间来清理之前的叫号显示  预计显示1分钟以内的
	dangqianjiaohaoList.value = dangqianjiaohaoList.value.filter((el) => isTimeIntervalMoreThanFiveMinutes(new Date(), el.date));
	zhiliaojieshuList.value = zhiliaojieshuList.value.filter((el) => isTimeIntervalMoreThanFiveMinutes(new Date(), el.date));
};
const isTimeIntervalMoreThanFiveMinutes = (date1, date2) => {
	// 计算两个日期之间的差值（绝对值）
	let diffMs = Math.abs(date1 - date2);

	// 将差值从毫秒转换为分钟
	let diffMins = Math.floor(diffMs / 60000);

	// 判断是否超过5分钟
	return diffMins < 1.5;
};
</script>
<style scoped lang="scss">
.nav_to_left {
	display: flex;
	align-items: center;
	img {
		display: block;
	}
	.nav_top_null {
		width: 2px;
		margin: 20px 25px;
		background-color: #b4b4b4;
	}
	.nav_top_title {
		font-weight: bolder;
		color: #657d9d;
	}
}
.jiaohao {
	padding: 10px;
}
.containerjiaohao {
	background: #ffffff;
	border-radius: 16px;
	.sidebar {
		// display: grid;
		place-items: center; /* 同时水平和垂直居中 */
		width: 60px;
		color: #ffffff;
		background: #65aaf6;
		border-radius: 10px;
		align-items: center; /* 垂直居中 */
		height: 100%;
	}
	.content {
		flex: 1;
		padding: 20px;
		background-color: white;
		border-radius: 10px;
		box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
		display: grid;
		grid-template-columns: repeat(2, 1fr); /* 定义三列，每列等宽 */
		grid-auto-rows: auto; /* 行高根据内容自动调整 */
		.itemContainer {
			font-size: 38px;
			.item {
				display: inline-block;
				text-align: center;
				vertical-align: middle; /* 对齐垂直居中 */
				margin-right: 10px; /* 子元素之间的间距 */
			}
			.item:last-child {
				margin-right: 0; /* 最后一个元素不加右边距 */
			}
		}
	}
}
.container {
	// display: flex;
	// flex-wrap: wrap; /* 自动换行 */
	// gap: 10px; /* 卡片之间的间距 */
	// padding: 10px;
	display: flex;
	flex-wrap: wrap; /* 自动换行 */
	// background-color: rgb(179, 216, 255);
	display: grid;
	grid-template-columns: repeat(4, 1fr); /* 每行6列 */
	gap: 10px; /* 项目之间的间距 */
	padding: 10px;
}
.card {
	background-color: #ffffff;
	color: #333333;
	padding: 10px;
	border-radius: 12px;
	position: relative; /* 创建相对定位上下文 */
	// width: 250px;
}

.info {
	margin-right: auto; /* 推动信息内容到左侧 */
}

.info p {
	margin: 0;
	// line-height: 40px;
	// height: 40px;
	font-weight: bold;
}

.status {
	width: 60px;
	height: 20px;
	font-size: 15px;
	text-align: center;
	color: #333333;
	background-color: #ffffff;
	position: absolute;
	top: 15px; /* 根据padding调整距离顶部的距离 */
	right: 5px; /* 根据padding调整距离右侧的距离 */
}
.status2 {
	width: 80px;
	height: 20px;
	text-align: center;
	background-color: green;
	position: absolute;
	top: 45px; /* 根据padding调整距离顶部的距离 */
	right: 5px; /* 根据padding调整距离右侧的距离 */
}
.daping {
	position: relative;
	width: 100%;
	height: 100%;
	// background: url('/@/assets/imgs/dapingbgk.png') no-repeat;
	// background-size: 100% 100%;
	margin: 0 auto;
	padding-top: 10px;
	padding-left: 1em;
	padding-right: 1em;

	.titleRow {
		display: grid;
		grid-template: auto 1fr auto / auto 1fr auto;
		.clientName {
			text-align: center;
			font-size: 5rem;
			font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
			color: #105adb;
			text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
			font-weight: 800;
			font-style: oblique;
			height: 50px;
			line-height: 5rem;
		}

		.dateTime {
			padding-left: 20px;
			// padding-right: 2px;
			height: 62px;
			background: #ffffff;
			box-shadow: 0px 2px 4px 0px rgba(112, 163, 221, 0.5);
			border-radius: 20px;
			font-size: 30px;
			font-family: AlibabaPuHuiTi-Regular, AlibabaPuHuiTi;
			font-weight: 400;
			color: #345683;
			line-height: 62px;

			.time {
				.buttime {
					padding-left: 10px;
					padding-right: 10px;
					font-size: 30px;
					height: 62px;
					line-height: 62px;
					background: #70a3dd;
					// box-shadow: 2px 2px 4px 0px rgba(112,163,221,0.5);
					border-radius: 16px;
					color: #ffffff;
				}
			}
		}
	}
	.centBody2 {
		width: 98%;
		height: 75%;
		border-radius: 30px;
		background-color: #ffffff;
		position: absolute;
		top: 20%;
		right: 1%;
	}
	.centBody {
		background: #ffffff;
		border-radius: 30px;
		margin-top: 23px;

		table {
			border-collapse: separate;
			border-spacing: 0;
			border-radius: 1em;
			border: solid 0.3em #ffffff;
			// border-collapse: collapse;
			margin: 0 auto;
			font-size: 2.5em;
			font-weight: 400;
			color: #333333;
			text-align: center;
		}

		table tr {
			border: 2px solid #e7e8ea;
			color: #666;
			height: 3em;
			line-height: 3em;
		}

		table tr td,
		th {
			border-bottom: 2px solid #e7e8ea;
		}
	}
}

img {
	position: relative;
	top: 12px;
	right: 10px;
	width: 1.5em;
	height: 1.5em;
}
.buhuanhang {
	overflow: hidden; /* 隐藏超出的内容 */
	white-space: nowrap; /* 不换行 */
	text-overflow: ellipsis; /* 显示省略号 */
}
.containerClin {
	display: grid;
	grid-template-columns: repeat(2, 1fr); /* 每行两个等宽的小div */
	gap: 10px; /* 小div之间的间距 */
	padding: 10px;
	// box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* 轻微的阴影效果 */
	.item {
		// background-color: #f0f0f0;
		text-align: center;
		line-height: 50px; /* 假设高度为50px，根据实际情况调整 */
		.nameclass {
			display: flex;
			align-items: center; /* 垂直居中 */
			padding: 10px; /* 内边距 */
			.text {
				margin-right: 10px; /* 文本与图标之间的间距 */
			}

			.circle {
				width: 30px;
				height: 30px;
				background-color: #ffeb3b; /* 圆形背景颜色 */
				border-radius: 50%; /* 圆角 */
				display: flex;
				justify-content: center;
				align-items: center;
				color: #fff; /* 图标文字颜色 */
				font-size: 20px;
			}
		}
	}
}
.fullscreen-video-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background-color: #000;
	z-index: 99999;
	display: flex;
	justify-content: center;
	align-items: center;
	cursor: pointer; /* 点击可关闭 */
}

.fullscreen-video {
	width: 100%;
	height: 100%;
	object-fit: cover; /* 保持比例铺满 */
}
.el-carousel__item  {
  color: #475669;
  opacity: 0.75;
  margin: 0;
  text-align: center;
  height: 100%;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
/* 轮播图容器全屏 */
.el-carousel {
  width: 100vw !important;
  height: 100vh !important;
}

.el-carousel__container {
  width: 100% !important;
  height: 100% !important;
}
</style>