<template>
	<view class="content">
		<view class="text-area">
			<view class="carDetection">
				<view class="header">
				</view>
				<view class="title">
					<span>车辆信息</span>
					<span class="smallTitle">CHE LIANG XIN XI</span>
				</view>
				<view class="chargeDataList">
					<view class="item" v-for="(item,index) in chargingKey" :key="index">
						<span>
							<text class="name">{{item.name}}</text>
							<!-- <text class="status" v-if="item.status == 'normal'">正常</text>
							<text class="status1" v-else></text> -->
						</span>
						<span class="value"><span class="unit">{{item.value}}</span></span>
					</view>
				</view>
				<view class="title">
					<span>均衡信息</span>
					<span class="smallTitle">JUN HENG XIN XI</span>
				</view>
				<view class="visualInspection">
					<view class="chargeInfo">
						<view v-for="(item,index) in chargeData" :key="index" class="chartCard">
							<span>
								<image src="/static/img/jx.png"></image>
								{{item.name}}
							</span>
							<span v-if="item.name != '充电时长'" class="cdValue">{{item.value}}</span>
							<!-- <span v-else class="cdValue">{{item.value}}min</span> -->
						</view>
					</view>
				</view>
				<view class="title">
					<span>均衡对比</span>
					<span class="smallTitle">JUN HENG DUI BI</span>
				</view>
				<view class="visualInspection"
					style="display: flex;justify-content: space-between;padding:10% 10px 3% 10px">
					<view class="item" v-for="(item,index) in balancedComparison" :key="index">
						<span>
							<text class="name">{{item.name}}</text>
							<!-- <text class="status" v-if="item.status == 'normal'">正常</text>
							<text class="status1" v-else></text> -->
						</span>
						<span class="value">{{item.detail}}：<span class="unit">{{item.value}}</span></span>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import circular from '../../components/circular.vue'
	import radarVue from '../../components/radar.vue'
	import barVue from '../../components/bar.vue'
	import lineVue from '../../components/lineChart.vue'
	import ip from '../../static/config.js'
	export default {
		data() {
			return {
				detectionReportId: '',
				apiData: {},
				carStatus: '',
				chargeData: [{
						value: '3.37V',
						name: '最高电压'
					},
					{
						value: '13V',
						name: '最低电压'
					},
					{
						value: '',
						name: '最高电压位'
					},
					{
						value: '15℃',
						name: '最高温度'
					},
					{
						value: '13℃',
						name: '最低温度'
					},
					{
						value: '',
						name: '最高温度位'
					},
					{
						value: '',
						name: '最低温度位'
					},
				],
				chargingKey: [{
						name: '车牌号',
						value: ''
					},
					{
						name: '车架号',
						value: ''
					},
					{
						name: '电池类型',
						value: ''
					},
					{
						name: '电池容量',
						value: ''
					},
					{
						name: '检测时间',
						value: ''
					}, {
						name: '检测站点',
						value: ''
					},
				],
				//均衡对比
				balancedComparison: [{
						name: '均衡前后对比',
						detail: '均衡前压差',
						value: ''
					},
					{
						name: '均衡前后对比',
						detail: '均衡后压差',
						value: ''
					}
				]
			}
		},
		onLoad(options) {
			this.detectionReportId = options.DetectionReportId
			//获取接口数据
			this.getData()
		},
		components: {
			circular,
			radarVue,
			barVue,
			lineVue
		},
		methods: {
			getData() {
				uni.request({
					url: window.g.API_IP + '/api/GetDetectionReport?DetectionReportId=' + this.detectionReportId,
					// url: window.g.API_IP +
					// 	'/api/GetDetectionReport?DetectionReportId=21ad44647c8a4b9c871af5bae82d160a', // 接口地址
					method: 'GET',
					success: (res) => {
						// 请求成功时执行的回调函数
						console.log('Data received:', res.data.data);
						if (res.data.code == 0) {
							this.apiData = res.data.data; // 将获取的数据存储到data中
							//车辆信息
							this.chargingKey[0].value = this.apiData.plateNo
							this.chargingKey[1].value = this.apiData.vin
							this.chargingKey[2].value = this.apiData.batteryType
							this.chargingKey[3].value = this.apiData.ratedEnergy
							this.chargingKey[4].value = new Date(this.apiData.evalDate)
								.toLocaleString();
							//均衡信息
							this.chargeData[0].value = this.apiData.voltMax + 'kWh'
							this.chargeData[1].value = this.apiData.voltMin + 'kWh'
							this.chargeData[3].value = this.apiData.tempMax + '℃'
							this.chargeData[4].value = this.apiData.tempMax - this.apiData.tempDiff + '℃'

						}
					},
					fail: (err) => {
						// 请求失败时执行的回调函数
						console.error('Request failed:', err);
					}
				});
			}
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.text-area {
		display: flex;
		justify-content: center;
		width: 100%;
		background: rgb(21, 21, 33);

		.carDetection {
			height: auto;
			width: 100%;
			padding: 0 10px;
		}
	}

	.header {
		width: 100%;
		height: 500px;
		background: url(@/static/img/bg.png) no-repeat;
		background-size: 100% 100%;
	}

	.title {
		background: url(@/static/img/titleBg.png) no-repeat;
		background-size: 100% 100%;
		width: 68%;
		height: 60px;
		font-size: 5vw;
		font-weight: 550;
		color: #fff;
		display: flex;
		align-items: start;
		margin-bottom: 10px;
		margin-top: 10px;
		flex-direction: column;
		justify-content: center;
		padding-left: 10px;

		span:first-child {
			font-family: 'SourceHanSansCN-Heavy';
			font-size: 5vw;
			background: linear-gradient(0deg, rgb(49, 190, 255) 0%, rgba(20, 158, 255, 1) 0%, rgba(239, 252, 254, 1) 58.7646484375%);
			-webkit-text-stroke: 0px #28b4ff;
			-webkit-background-clip: text;
			background-clip: text;
			-webkit-text-fill-color: transparent;
			color: transparent;
			display: inline-block;
		}

		.smallTitle {
			font-size: 1.7vw;
			color: #8195AA;
		}

	}

	.visualInspection {
		width: 100%;
		height: 16%;
		/* margin-top: 8px; */
		background: url(@/static/img/detailBg.png) no-repeat;
		background-size: 100% 100%;
		position: relative;
		top: -2.1%;
		padding: 10% 0 3% 0;
		box-sizing: border-box;
		color: #96DBFF;
		font-family: 'SourceHanSansCN-Regular';

		.item {
			display: flex;
			flex-direction: column;
			width: 48%;
			background: url(@/static/img/cdlistBg.png) no-repeat;
			background-size: 100% 100%;
			padding: 10px 10px 0px 10px;
			box-sizing: border-box;
			height: 120px;
			margin-top: 13px;
			line-height: 1.5;

			span:first-child {
				display: flex;
				justify-content: space-between;

				.name {
					font-size: 4vw;
					font-weight: 700;
					white-space: nowrap;
					font-family: 'SourceHanSansCN-Bold';
					background: linear-gradient(0deg, rgb(49, 190, 255) 0%, rgba(20, 158, 255, 1) 0%, rgba(239, 252, 254, 1) 58.7646484375%);
					-webkit-text-stroke: 0px #28b4ff;
					-webkit-background-clip: text;
					background-clip: text;
					-webkit-text-fill-color: transparent;
					color: transparent;
					display: inline-block;
				}

				.status {
					background: url(@/static/img/zc.png) no-repeat;
					background-size: 100% 100%;
					font-size: 15px;
					width: 30%;
					display: flex;
					justify-content: center;

					span {
						font-family: 'SourceHanSansCN-Bold';
						background: linear-gradient(270deg, rgba(40, 180, 255, 1) 60%, rgba(60, 253, 255, 1) 100%);
						-webkit-text-stroke: 0px #28b4ff;
						-webkit-background-clip: text;
						background-clip: text;
						-webkit-text-fill-color: transparent;
						color: transparent;
						display: inline-block;
					}
				}

				.status1 {
					background: url(@/static/img/yc.png) no-repeat;
					background-size: 100% 100%;
					font-size: 15px;
					color: #D93E3E;
					width: 30%;
					display: flex;
					justify-content: center;
				}
			}

			.value {
				color: #88A9CD;
				margin-top: 5px;
				font-size: 13px;
				/* white-space: nowrap; */
				display: flex;
				align-items: center;

				.unit {
					color: #3CFDFF;
					font-size: 15px;
					font-weight: 550;
				}
			}

			.value::before {
				content: "·";
				/* 这里是你要添加的内容 */
				color: #88A9CD;
				/* 点的颜色 */
				font-size: 3vw;
				/* 点的尺寸 */
				margin-right: 5px;
				/* 点和文字之间的间距 */
			}
		}
	}

	.visualInspection1 {
		width: 100%;
		height: 8%;
		background: url(@/static/img/detailBg.png) no-repeat;
		background-size: 100% 100%;
		position: relative;
		top: -0.7%;
		display: flex;
		align-items: center;
		justify-content: space-around
	}

	.cularBg {
		background: url(@/static/img/chartBg.png) no-repeat;
		background-size: 100% 100%;
	}

	.plateNumber {
		background: url(@/static/img/numberBg.png) no-repeat;
		background-size: 100% 100%;
		height: 50%;
		width: 40%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: flex-start;

		.number {
			font-family: 'SourceHanSansCN-Heavy';
			font-size: 5vw;
			background: linear-gradient(0deg, rgb(49, 190, 255) 0%, rgba(20, 158, 255, 1) 0%, rgba(239, 252, 254, 1) 58.7646484375%);
			-webkit-text-stroke: 0px #28b4ff;
			-webkit-background-clip: text;
			background-clip: text;
			-webkit-text-fill-color: transparent;
			color: transparent;
			display: inline-block;
		}

		.carStatus {
			color: #96DBFF;
			font-family: 'SourceHanSansCN-Regular';
		}
	}

	.chargeInfo {
		width: 100%;
		height: auto;
		display: flex;
		/* border-bottom: 1px solid rgba(136, 169, 205, 1); */
		justify-content: space-between;
		flex-wrap: wrap;

		.chartCard {
			width: 31%;
			display: flex;
			flex-direction: column;
			padding-bottom: 5px;
			box-sizing: border-box;
			align-items: center;

			image {
				height: 26px;
				width: 22px;
				top: 15%;
			}

			span:first-child {
				font-size: 4vw;
				font-family: 'SourceHanSansCN-Bold';
				background: linear-gradient(0deg, rgb(49, 190, 255) 0%, rgba(20, 158, 255, 1) 0%, rgba(239, 252, 254, 1) 58.7646484375%);
				-webkit-text-stroke: 0px #28b4ff;
				-webkit-background-clip: text;
				background-clip: text;
				-webkit-text-fill-color: transparent;
				color: transparent;
				display: inline-block;
			}

			span:nth-child(2) {
				color: rgb(173, 184, 212);
				font-size: 4vw;
			}

			.cdValue {
				font-family: 'SourceHanSansCN-Bold';
				background: linear-gradient(270deg, rgba(40, 180, 255, 1) 60%, rgba(60, 253, 255, 1) 100%);
				-webkit-text-stroke: 0px #28b4ff;
				-webkit-background-clip: text;
				background-clip: text;
				-webkit-text-fill-color: transparent;
				color: transparent;
				display: inline-block;
			}
		}
	}

	.batteryInfo {
		background: rgb(45, 55, 66);
		margin-top: 5px;

		.list {
			list-style-type: none;
			padding: 20px;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			color: rgb(173, 184, 212);

			li {
				margin-top: 5px;
			}
		}
	}

	.comment {
		background: rgb(45, 55, 66);
		margin-top: 5px;
		color: rgb(173, 184, 212);
		padding: 8px;
		font-size: 25rpx;
	}

	.twoTitle {
		font-size: 30rpx;
		color: #fff;
		width: 100%;
		margin: 10px 0
	}

	.chargeDataList {
		background: url(@/static/img/cdgjsjBg.png) no-repeat;
		background-size: 100% 100%;
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		padding: 10% 3% 6% 3%;
		box-sizing: border-box;
		position: relative;
		top: -2.1%;

		.item {
			display: flex;
			flex-direction: column;
			width: 48%;
			background: url(@/static/img/cdlistBg.png) no-repeat;
			background-size: 100% 100%;
			padding: 10px 10px 0px 10px;
			box-sizing: border-box;
			height: 120px;
			margin-top: 13px;
			line-height: 1.5;

			span:first-child {
				display: flex;
				justify-content: space-between;

				.name {
					font-size: 4vw;
					font-weight: 700;
					white-space: nowrap;
					font-family: 'SourceHanSansCN-Bold';
					background: linear-gradient(0deg, rgb(49, 190, 255) 0%, rgba(20, 158, 255, 1) 0%, rgba(239, 252, 254, 1) 58.7646484375%);
					-webkit-text-stroke: 0px #28b4ff;
					-webkit-background-clip: text;
					background-clip: text;
					-webkit-text-fill-color: transparent;
					color: transparent;
					display: inline-block;
				}

				.status {
					background: url(@/static/img/zc.png) no-repeat;
					background-size: 100% 100%;
					font-size: 15px;
					width: 30%;
					display: flex;
					justify-content: center;

					span {
						font-family: 'SourceHanSansCN-Bold';
						background: linear-gradient(270deg, rgba(40, 180, 255, 1) 60%, rgba(60, 253, 255, 1) 100%);
						-webkit-text-stroke: 0px #28b4ff;
						-webkit-background-clip: text;
						background-clip: text;
						-webkit-text-fill-color: transparent;
						color: transparent;
						display: inline-block;
					}
				}

				.status1 {
					background: url(@/static/img/yc.png) no-repeat;
					background-size: 100% 100%;
					font-size: 15px;
					color: #D93E3E;
					width: 30%;
					display: flex;
					justify-content: center;
				}
			}

			.value {
				color: #88A9CD;
				margin-top: 5px;
				font-size: 13px;
				/* white-space: nowrap; */
				display: flex;
				align-items: center;

				.unit {
					color: #3CFDFF;
					font-size: 15px;
					font-weight: 550;
				}
			}

			.value::before {
				content: "·";
				/* 这里是你要添加的内容 */
				color: #88A9CD;
				/* 点的颜色 */
				font-size: 3vw;
				/* 点的尺寸 */
				margin-right: 5px;
				/* 点和文字之间的间距 */
			}
		}
	}

	.prompt {
		font-size: 18rpx;
		color: rgb(127, 127, 127);
	}

	.chatResult {
		background: rgba(58, 153, 212, 0.5);
		border: 1px solid rgb(58, 153, 212);
		border-radius: 5px;
		padding: 5px 15px;
		box-sizing: border-box;

		.twoTitle {
			display: flex;
			justify-content: space-between;

			.comStatus {
				color: #000;
				background: rgb(0, 220, 255);
				border-radius: 20px;
				display: flex;
				width: 15%;
				justify-content: center;
				padding: 5px;
			}
		}

		.remind {
			color: rgb(173, 184, 212);
		}
	}
</style>