<template>
	<ScaleScreen :width="1920" :height="1080" class="scale-wrap" :selfAdaption="true" fullScreen>
		<div id="index" ref="appRef">
			<div class="bg">
				<dv-loading v-if="loading">Loading...</dv-loading>
				<div v-else class="host-body">
					<div class="d-flex jc-between headerWrapper">
					</div>
					<div class="mainWrapper">
						<div class="m-left">
							<p class="title">车辆信息</p>
							<div class="detection">
								<p>检测中</p>
								<p class="d-mark">电池评分</p>
								<p class="d-date"><span>评估日期：</span>2025-02-22 16:33:56</p>
							</div>
							<div class="box">
								<p>电池类型</p>
								<p>磷酸铁锂电池</p>
							</div>
							<div class="box1 box">
								<p>判别位</p>
								<p>空闲</p>
							</div>
							<div class="box3 box">
								<p>车牌号</p>
								<p>苏FD11191</p>
							</div>
							<div class="box4 box">
								<p>电池额定容量</p>
								<p>500 KWH</p>
							</div>
							<div class="box5 box">
								<p>VIN</p>
								<p>VIN未上报</p>
							</div>
							<div class="box6 box">
								<p>电池标称能量</p>
								<p>500 KWH</p>
							</div>
							<p class="title title2">充电检测</p>
							<ul>
								<li><span>电压</span> <span>200</span>V</li>
								<li><span>电流</span> <span>200</span>A</li>
							</ul>
							<ul>
								<li><span>功率</span> <span>200</span>kW</li>
								<li><span>电量</span> <span>500</span>kWh</li>
							</ul>
							<ul>
								<li><span>单体最高电压</span> <span>4.19</span>V</li>
								<li><span>单体最低电压</span> <span>4.11</span>V</li>
							</ul>
							<ul>
								<li><span>开始SOC</span> <span>17.4%</span>V</li>
								<li><span>结束SOC</span> <span>98%</span>V</li>
							</ul>
							<p class="chargeBegin"><span>充电开始时间</span><span>2025-02-11 16:24:56</span></p>
							<p class="chargeEnd"><span>充电结束时间</span><span>2025-02-11 18:32:24</span></p>
							<p class="title title3">车辆外观检测</p>
							<div class="carAppearance">
								<div class="overall">
									<img src="../assets/shouye/carAll.png" alt="">
								</div>
								<div class="four">
									<div><img src="../assets/shouye/frontLeft.png" alt=""></div>
									<div><img src="../assets/shouye/frontRight.png" alt=""></div>
									<div><img src="../assets/shouye/rearLeft.png" alt=""></div>
									<div><img src="../assets/shouye/rearRight.png" alt=""></div>
								</div>
							</div>
						</div>
						<div class="m-main">
							<img @click="getQrcode()" src="../assets/car.png" alt="">
							<canvas ref="qrcode" class="qrcode">
							</canvas>
						</div>
						<div class="m-right">
							<p class="title">红外检测</p>
							<div class="infrared">
								<img src="../assets/shouye/infrared.png" alt="">
							</div>
							<p class="title">紫外检测</p>
							<div class="ultraviolet">
								<img src="../assets/shouye/ultraviolet.png" alt="">
							</div>
							<p class="title">声纹检测</p>
							<div id="chart1" ref="chart1" class="chart1">

							</div>
							<div id="chart2" ref="chart2" class="chart2">

							</div>
						</div>
					</div>
					<!-- <layoutMain></layoutMain> -->
				</div>
			</div>
		</div>
	</ScaleScreen>
</template>

<script>
// import echarts from 'echarts'
import QRCode from 'qrcode'
import * as echarts from 'echarts'
// import drawMixin from "@/utils/drawMixin";
import {
	formatTime
} from '@/utils/index.js'
import layoutMain from '@/components/layout/index.vue'
import ScaleScreen from '@/components/scale-screen/scale-screen.vue'
import projectData from '@/utils/data.json'
export default {
	// mixins: [drawMixin],
	data() {
		return {
			timing: null,
			loading: true,
			dateDay: null,
			dateYear: null,
			dateWeek: null,
			weekday: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
			decorationColor: ['#568aea', '#000000'],
			leftTabData: [{
				label: '健身锻炼综合数据',
				value: '/integratedData',
			},
			{
				label: '赛事活动',
				value: '/matchActivity',
			},
			{
				label: '体育场地设施',
				value: '/sportFacilities',
			},
			{
				label: '体育社会组织',
				value: '/sportsSociety',
			},
			{
				label: '社会指导员',
				value: '/socialInstructor',
			},
			],
			rightTabData: [{
				label: '百姓健身房',
				value: '/fitnessSite',
			},
			{
				label: '基层体育委员组织',
				value: '/grassrootsSports',
			},
			{
				label: '百姓运动码',
				value: '/sportCode',
			},
			{
				label: '运动银行',
				value: '/sportsBank',
			},
			],
			currentTab: '/integratedData',
			menudata: [],
			projectName: '',
			viewData: {}
		}
	},
	components: {
		layoutMain,
		ScaleScreen,
	},
	beforeRouteEnter(to, from, next) {
		next((vm) => {
			vm.getCurrentIndex(to.path)
		})
	},
	mounted() {
		this.timeFn();
		this.cancelLoading();
		this.$nextTick(() => {
			this.initChart();
			this.initChart2();
		});
	},
	beforeDestroy() {
		clearInterval(this.timing)
	},
	created() {
		this.getMenuData()
	},
	methods: {
		getQrcode(){
			var text1 = 'https://www.baidu.com';
			console.log(QRCode, this.$refs.qrcode, text1, 'QQQQ')
			QRCode.toCanvas(this.$refs.qrcode, text1, function (error) {
				if (error) {
					console.error('生成二维码时出错:', error);
				} else {
					console.log('二维码生成成功!');
				}
			});
		},
		initChart() {
			// const chartDom = this.$refs.chart;
			setTimeout(() => {
				var chartDom = document.getElementById('chart2');
				this.myChart = echarts.init(chartDom);
				var option;
				const rawData = [
					[0.1, 0.5, 0.7, 0.9, 0.3, 0.6, 0.8, 0.9, 0.5, 0.7, 0.6, 0.5, 0.7, 0.9, 0.3, 0.6, 0.8, 0.9, 0.5, 0.7], // 示例数据，确保数据在0到1之间
				];
				const totalData = [];
				for (let i = 0; i < rawData[0].length; ++i) {
					let sum = 0;
					for (let j = 0; j < rawData.length; ++j) {
						sum += rawData[j][i];
					}
					totalData.push(sum);
				}

				const grid = {
					left: 10,
					right: 40,
					top: 10,
					bottom: 30,
					containLabel: true
				};

				// 处理数据，分为绿色和黄色部分
				const processedData = rawData[0].map(value => {
					return {
						green: Math.min(value, 0.4), // 绿色部分（0 到 0.4）
						yellow: Math.max(0, value - 0.4), // 黄色部分（0.4 到 1）
					};
				});

				const series = [
					{
						name: 'Green',
						type: 'bar',
						stack: 'total',
						barWidth: '30%',
						label: {
							show: false,
							formatter: (params) => Math.round(params.value * 1000) / 10 + '%'
						},
						data: processedData.map(item => item.green),
						itemStyle: {
							color: '#05D9ED',
						},
					},
					{
						name: 'Yellow',
						type: 'bar',
						stack: 'total',
						barWidth: '30%',
						label: {
							show: false,
							formatter: (params) => Math.round(params.value * 1000) / 10 + '%'
						},
						data: processedData.map(item => item.yellow),
						itemStyle: {
							color: '#fadb14', // 黄色
						},
					},
				];

				option = {
					grid,
					yAxis: {
						type: 'value',
						min: 0,
						max: 1,
						axisLabel:{
							show: true,
							color: '#FFFFFF',
						},
						splitLine: {
							show: true,  // 显示分割线
							lineStyle: {
								color: '#ccc',  // 设置网格线颜色
								type: 'dashed',  // 设置为虚线
								width: 1,  // 设置网格线宽度
							},
						},
					},
					xAxis: {
						type: 'category',
						// data: ['0', '2', '4', '6', '8', '10'],
						// min: '0',
						// max: '10',
						boundaryGap: true,
						axisTick: {
							alignWithLabel: true,
						},
						axisLabel: {
							show: true,
							interval: 0,
							color: '#ff0000',
						},
					},
					series,
					graphic: [
						{
							type: 'text',
							right: '0%', // 相对于容器左侧的位置
							top: '5%', // 相对于容器顶部的位置
							style: {
								text: '异  特',
								fontSize: 12,
								fill: '#FFF' // 文本颜色
							}
						},
						{
							type: 'text',
							right: '0%', // 相对于容器左侧的位置
							top: '20%', // 相对于容器顶部的位置
							style: {
								text: '常  征',
								fontSize: 12,
								fill: '#FFF' // 文本颜色
							}
						},
						{
							type: 'text',
							right: '0%', // 相对于容器左侧的位置
							top: '35%', // 相对于容器顶部的位置
							style: {
								text: '声  范',
								fontSize: 12,
								fill: '#FFF' // 文本颜色
							}
						},
						{
							type: 'text',
							right: '0%', // 相对于容器左侧的位置
							top: '50%', // 相对于容器顶部的位置
							style: {
								text: '纹  围',
								fontSize: 12,
								fill: '#FFF' // 文本颜色
							}
						},
						{
							type: 'text',
							right: '0%', // 相对于容器左侧的位置
							top: '75%', // 相对于容器顶部的位置
							style: {
								text: '时间/S',
								fontSize: 10,
								fill: '#FFF 50%' // 文本颜色
							}
						}
					]
				};
				this.myChart.setOption(option);
				window.addEventListener('resize', () => {
					this.myChart.resize();
				});
			}, 1000);
		},
		initChart2() {
			setTimeout(() => {


				var chartDom1 = document.getElementById('chart1');
				this.myChart1 = echarts.init(chartDom1);
				var option1;
				const rawData = [0.1, 0.5, 0.7, 0.9, 0.3, 0.6, 0.8, 0.9, 0.5, 0.7, 0.6, 0.5, 0.7, 0.9, 0.3, 0.6, 0.8, 0.9, 0.5, 0.7] // 示例数据，确保数据在0到1之间
				const grid = {
					left: 10,
					right: 40,
					top: 10,
					bottom: 30,
					containLabel: true
				};
				option1 = {
					grid,
					series: [
						{	
							stack: 'total',
							barWidth: '30%',
							data: rawData,
							type: 'bar',
							itemStyle: {
								color: '#05D9ED', // 绿色
							},
						}
					],
					yAxis: {
						type: 'value',
						min: 0,
						max: 1,
						axisLabel:{
							show: true,
							color: '#FFFFFF',
						},
						splitLine: {
							show: true,  // 显示分割线
							lineStyle: {
								color: '#ccc',  // 设置网格线颜色
								type: 'dashed',  // 设置为虚线
								width: 1,  // 设置网格线宽度
							},
						},
					},
					xAxis: {
						type: 'category',
						// data: ['0', '2', '4', '6', '8', '10'],
						// min: '0',
						// max: '10',
						boundaryGap: true,
						axisTick: {
							alignWithLabel: true,
						},
						axisLabel: {
							show: true,
							interval: 0,
							color: '#FFFFFF',
						},
					},graphic: [
						{
							type: 'text',
							right: '0%', // 相对于容器左侧的位置
							top: '5%', // 相对于容器顶部的位置
							style: {
								text: '正  特',
								fontSize: 12,
								fill: '#FFF' // 文本颜色
							}
						},
						{
							type: 'text',
							right: '0%', // 相对于容器左侧的位置
							top: '20%', // 相对于容器顶部的位置
							style: {
								text: '常  征',
								fontSize: 12,
								fill: '#FFF' // 文本颜色
							}
						},
						{
							type: 'text',
							right: '0%', // 相对于容器左侧的位置
							top: '35%', // 相对于容器顶部的位置
							style: {
								text: '声  范',
								fontSize: 12,
								fill: '#FFF' // 文本颜色
							}
						},
						{
							type: 'text',
							right: '0%', // 相对于容器左侧的位置
							top: '50%', // 相对于容器顶部的位置
							style: {
								text: '纹  围',
								fontSize: 12,
								fill: '#FFF' // 文本颜色
							}
						},
						{
							type: 'text',
							right: '0%', // 相对于容器左侧的位置
							top: '75%', // 相对于容器顶部的位置
							style: {
								text: '时间/S',
								fontSize: 10,
								fill: '#FFF 50%' // 文本颜色
							}
						}
					]
				};
				this.myChart1.setOption(option1);
				window.addEventListener('resize', () => {
					this.myChart1.resize();
				});
			}, 1000);	
		},
		onResize() {
			if (this.myChart) {
				this.myChart.resize();  // 重新计算图表尺寸
			}
		},
		getMenuData() {
			this.projectName = '健身锻炼综合数据';
			this.currentTab = `/integratedData`;
			this.$router.push({
				path: `/integratedData`
			})

		},
		timeFn() {
			this.timing = setInterval(() => {
				this.dateDay = formatTime(new Date(), 'HH: mm: ss')
				this.dateYear = formatTime(new Date(), 'yyyy-MM-dd')
				this.dateWeek = this.weekday[new Date().getDay()]
			}, 1000)
		},
		cancelLoading() {
			setTimeout(() => {
				this.loading = false
			}, 500)
		},
		routeChange(data) {
			if (data.value && data.value != '' && data.value != this.currentTab) {
				this.projectName = data.label;
				this.currentTab = data.value
				this.$router.push(`${data.value}`)
			}

		},
		getCurrentIndex(path) {
			this.currentTab = path
		},
	},
}
</script>

<style lang="scss" scoped>
@import '../assets/scss/index.scss';

.scale-wrap {
	width: 1920px;
	height: 1080px;

	.bg {
		width: 100%;
		height: 100%;
		// padding: 16px 16px 0 16px;
		background-image: url('../assets/pageBg.png');
		background-size: cover;
		background-position: center center;

		.headerWrapper {
			height: 90px;
			width: 100%;
			background-image: url('../assets/header.png');
			background-size: cover;
			// background-position: center center;
			z-index: 10;

			&>div {

				padding-top: 38px;
			}

			.aside-width {
				flex: 1;
				justify-content: space-around;
			}

			.projectName {
				width: 300px;
				text-align: center;
				padding-top: 20px;
				margin: 0 90px;
				font-size: 30px;
				font-weight: bold;
				color: #fff;
				text-shadow: 5px 5px 5px 5px red;
			}

			.leftBox,
			.rightBox {
				min-width: 100px;
				padding: 14px 20px 6px;
				background-color: none;

				&.active {
					background-image: url('../assets/tab_active.png');
					background-size: 100% 100%;
					background-position: center center;
				}
			}
		}

		.mainWrapper {
			height: 990px;
			width: 100%;
			display: flex;

			.m-left {
				width: 475px;
				padding-left: 30px;

				.title {
					width: 410px !important;
					height: 40px;
					line-height: 40px;
					background-image: url('../assets/shouye/yiji.png');
					// background-size: cover;
					background-size: 100% 100%;
					// background-position: center center;
					text-align: left !important;
					padding-left: 43px;
					font-family: PangMenZhengDao, PangMenZhengDao;
					font-weight: 400;
					font-size: 22px;
				}

				.detection {
					width: 196px;
					height: 114px;
					margin-top: 18px;
					background-image: url('../assets/shouye/mark.png');
					background-size: 100% 100%;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					position: relative;

					p:first-child {
						font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
						font-weight: 500;
						font-size: 18px;
						text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.3);
						font-style: normal;
						text-transform: none;
						background: linear-gradient(90deg, #C2EAFF 0%, #28B4FF 100%);
					}

					.d-mark {
						font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
						font-weight: 400;
						font-size: 10px;
						color: #FFFFFF;
						font-style: normal;
						text-transform: none;
					}

					.d-date {
						font-size: 12px;
						color: #05D9ED;
						position: absolute;
						bottom: 1px;
					}

					float: left;
				}

				.box {
					width: 196px;
					height: 52px;
					margin-top: 18px;
					background-image: url('../assets/shouye/battery.png');
					background-size: 100% 100%;
					float: left;
					margin-left: 18px;

					p:nth-child(1) {
						height: 17px;
						padding-left: 58px;
						font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
						font-weight: 400;
						font-size: 12px;
						color: #FFFFFF;
						line-height: 17px;
						text-align: left;
						font-style: normal;
						text-transform: none;
						margin-top: 4px;
					}

					p:nth-child(2) {
						height: 22px;
						padding-left: 58px;
						font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
						font-weight: 700;
						font-size: 16px;
						color: #05D9ED;
						line-height: 22px;
						text-align: left;
						font-style: normal;
						text-transform: none;
						margin-top: 3px;
					}
				}

				.box1 {
					margin-top: 10px;
				}

				.box3 {
					margin-top: 10px;
					margin-left: 0px;
				}

				.box4 {
					margin-top: 10px;
				}

				.box5 {
					margin-top: 10px;
					margin-left: 0px;
				}

				.box6 {
					margin-top: 10px;
				}

				.title2 {
					margin-top: 23px;
					float: left;
				}

				.title3 {
					margin-top: 20px;
					float: left;
				}

				ul {
					list-style: none;
					float: left;
					width: 410px;
					margin-top: 6px;

					li {
						display: block;
						float: left;
						width: 200px;
						height: 36px;
						border-radius: 4px 4px 4px 4px;
						border: 1px solid;
						border-image: linear-gradient(270deg, rgba(194.00000363588333, 234.00000125169754, 255, 0.30000001192092896), rgba(194.00000363588333, 234.00000125169754, 255, 0)) 1 1;
						line-height: 36px;
						font-size: 12px;
						text-align: right;
						padding-right: 16px;

						span:nth-child(1) {
							font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
							font-weight: 400;
							font-size: 14px;
							color: #FFFFFF;
							float: left;
							padding-left: 16px;
						}

						span:nth-child(2) {
							padding-right: 4px;
							font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
							font-weight: 700;
							font-size: 14px;
							color: #28B4FF;
						}
					}

					li:nth-child(2) {
						margin-left: 10px;
					}
				}

				.chargeBegin,
				.chargeEnd {
					width: 410px;
					height: 36px;
					line-height: 36px;
					margin-top: 6px;
					float: left;
					border-radius: 4px 4px 4px 4px;
					border: 1px solid;
					border-image: linear-gradient(270deg, rgba(194.00000363588333, 234.00000125169754, 255, 0.30000001192092896), rgba(194.00000363588333, 234.00000125169754, 255, 0)) 1 1;

					span:nth-child(1) {
						font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
						font-weight: 400;
						font-size: 14px;
						color: #FFFFFF;
						padding-left: 16px;
					}

					span:nth-child(2) {
						font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
						font-weight: 700;
						font-size: 14px;
						color: #28B4FF;
						float: right;
						padding-right: 16px;
					}
				}

				.carAppearance {
					width: 410px;
					height: 248px;
					float: left;
					border-radius: 0px 0px 0px 0px;
					border: 1px solid rgba(255, 255, 255, 0.5);
					margin-top: 8px;
					display: flex;

					.overall {
						margin: 8px;
						width: 128px !important;
						height: 232px;
						border-radius: 0px 0px 0px 0px;
						border: 1px solid rgba(255, 255, 255, 0.5);
						float: left;

						img {
							width: 100%;
							height: 100%;
							object-fit: cover;
							/* 保持图片比例，裁剪溢出的部分 */
						}
					}

					.four {
						flex: 1;
						float: left;

						div {
							float: left;
							width: 128px;
							height: 113px;
							border-radius: 0px 0px 0px 0px;
							border: 1px solid rgba(255, 255, 255, 0.5);

							img {
								width: 100%;
								height: 100%;
								object-fit: cover;
								/* 保持图片比例，裁剪溢出的部分 */
							}
						}

						div:nth-child(1) {
							margin-top: 8px;
						}

						div:nth-child(2) {
							margin-top: 8px;
							margin-left: 4px;
						}

						div:nth-child(3) {
							margin-top: 6px;
						}

						div:nth-child(4) {
							margin-top: 6px;
							margin-left: 4px;
						}
					}
				}
			}

			.m-main {
				flex: 1;
				display: flex;
				align-items: center;
				justify-content: center;
				position: relative;
				.qrcode{
					position: absolute;
					bottom: 40px;
					right: 50px;
					width: 200px;
					height: 200px;
					border: 1px solid salmon;
				}
			}

			.m-right {
				width: 475px;
				padding-left: 30px;

				.title {
					width: 410px !important;
					height: 40px;
					line-height: 40px;
					background-image: url('../assets/shouye/yiji.png');
					// background-size: cover;
					background-size: 100% 100%;
					text-align: left !important;
					padding-left: 43px;
					font-family: PangMenZhengDao, PangMenZhengDao;
					font-weight: 400;
					font-size: 22px;
				}

				.infrared {
					width: 410px;
					height: 248px;
					margin-top: 8px;
					margin-bottom: 20px;
					background-image: url('../assets/shouye/boxbg.png');

					img {
						width: 100%;
						height: 100%;
						object-fit: cover;
						/* 保持图片比例，裁剪溢出的部分 */
					}
				}

				.ultraviolet {
					width: 410px;
					height: 248px;
					margin-top: 8px;
					margin-bottom: 20px;
					background-image: url('../assets/shouye/boxbg.png');

					img {
						width: 100%;
						height: 100%;
						object-fit: cover;
						/* 保持图片比例，裁剪溢出的部分 */
					}
				}

				.chart1 {
					width: 410px;
					height: 150px;
				}

				.chart2 {
					width: 410px;
					height: 150px;
				}
			}
		}
	}
}</style>