<template>
	<!-- 日期弹窗 -->
	<dateSelection ref="Selectiondate" v-model="showdate" @change="change"></dateSelection>

	<view class="tabs">
		<view class="left" @click="showdate=true">
			<view class="time" :class="{on:queryDate}">

				<block v-if="queryDate">{{queryDate}}{{getDateDescription(queryDate)}}</block>
				<block v-if="!queryDate">选择日期</block>
			</view>
			<image src="/static/time.png"></image>
		</view>
		<view class="reset" @click="reset()">重置</view>
	</view>
	<view class="totalTime">
		<view class="name">{{info.unitName}}</view>
		<view class="time">{{info.monitoringDuration}}</view>
	</view>
	<view class="ul">
		<view class="li">
			<view class="num">{{info.totalVehicles}}</view>
			<view class="title">过车数量</view>
		</view>
		<view class="li">
			<view class="num">{{info.warningCount}}</view>
			<view class="title">预警数量</view>
		</view>
		<view class="li">
			<view class="num">{{info.warningRatio}}</view>
			<view class="title">预警比例</view>
		</view>
		<view class="li">
			<view class="num">{{info.seizureRatio}}</view>
			<view class="title">查扣比例</view>
		</view>
	</view>
	<view class="statistics">
		<view class="title">各超速类型数量对比</view>
		<view class="charts-box" id="echart" :info='info' :change:info='echart.updata' :init="charts"
			:change:init="echart.init">
			<!-- <qiun-data-charts type="bar" :opts="opts" :chartData="chartData" /> -->
		</view>
	</view>
</template>

<script module="echart" lang="renderjs">
	let myChart
	export default {
		mounted() {
			// 加载echart图表
			if (typeof window.echarts === 'function') {
				this.init()
			} else {
				// 动态引入较大类库避免影响页面展示
				const script = document.createElement('script')
				// view 层的页面运行在 www 根目录，其相对路径相对于 www 计算
				script.src = 'static/echarts.min.js'
				document.head.appendChild(script)
			}

		},
		methods: {
			init(e) {
				if (!window.echarts) {
					return
				}


			},
			updata(r) {

				if (window.echarts && r.overspeedStatistics) {
					let allnum=r.overspeedStatistics.overspeedOver50+r.overspeedStatistics.overspeed20To50+r.overspeedStatistics.overspeed10To20+r.overspeedStatistics.overspeedUnder10
					myChart = echarts.init(document.getElementById("echart"))
					myChart.setOption({
						grid: {
							top: 20,
							right: 0,
							bottom: 15,
							left: 0,

						},
						xAxis: {
							type: 'value',
							axisLabel: { interval: 0 }
						},
						yAxis: {
							type: 'category',
							interval: 0,
							data: ["超速50%以上", "超速20%-50%", "超速10%-20%", "超速10%以下"]
						},
						series: [{
								barWidth: 20,
								type: 'bar',
								color: "#4D7BFF",
								label: {
									show: true,
									position: 'right',
									interval: 0,
									formatter:function(a){
										return Number(a.value/allnum*100 || 0).toFixed(2)+'%';
									}
								},
								emphasis:{
									disabled:true
								},
								data: [
									r.overspeedStatistics.overspeedOver50,
									r.overspeedStatistics.overspeed20To50,
									r.overspeedStatistics.overspeed10To20,
									r.overspeedStatistics.overspeedUnder10,
								],
							},
							{
								barGap: "-100%",
								silent: true,
								barWidth: 20,
								type: 'bar',
								color: "#4D7BFF",
								label: {
									show: true,
									position: 'insideTopRight',
									color: "#fff"
								},
								emphasis:{
									disabled:true
								},
								data: [
									r.overspeedStatistics.overspeedOver50,
									r.overspeedStatistics.overspeed20To50,
									r.overspeedStatistics.overspeed10To20,
									r.overspeedStatistics.overspeedUnder10,
								],
							},
							{
								barGap: "-100%",
								silent: true,
								barWidth: 20,
								type: 'bar',
								
								itemStyle:{
									color: "rgba(255,255,255,0)",
								},
								emphasis:{
									disabled:true
								},
								label: {
									show: true,
									position: 'insideTopRight',
									color: "#fff"
								},
								data: [
									r.overspeedStatistics.overspeed50Plus+10,
									r.overspeedStatistics.overspeed20To50+10,
									r.overspeedStatistics.overspeed10To20+10,
									r.overspeedStatistics.overspeedUnder10+10,
								],
							}
						]
					})
				}

			}
		}


	}
</script>


<script setup>
	import {
		ref
	} from 'vue'
	import {
		getmonitorStatistics
	} from "/appapi/index.js"
	const showdate = ref(false)
	const Selectiondate = ref();
	const queryDate = ref("")
	const info = ref({})

	const chartData = ref({})
	const charts = ref(false);

	function change(e) {
		queryDate.value = e;
		getinfo()
	}

	function reset() {
		Selectiondate.value.reset();
		queryDate.value = "";
		getinfo()
	}

	function getDateDescription(dateString) {
		// 将日期字符串转换为 Date 对象
		const date = new Date(dateString);
		const today = new Date();
		today.setHours(0, 0, 0, 0);

		// 计算两个日期之间的天数差
		const diffTime = Math.abs(today - date);
		const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));

		if (diffDays === 0) {
			return "(今天)";
		} else if (diffDays === 1) {
			return "(昨天)";
		} else if (diffDays === 2) {
			return "(前天)";
		} else {
			return "";
		}
	}





	function load() {
		console.log('统计load')
	}

	function hide() {
		console.log('统计hide')
		charts.value = false;
	}

	function show() {

		getinfo()


	}

	function getinfo() {
		getmonitorStatistics({
			queryDate: queryDate.value
		}).then(r => {
			info.value = r.data;
		})
	}
	defineExpose({
		load,
		hide,
		show
	})
</script>

<style scoped lang="scss">
	.charts-box {
		height: 150rpx;
	}

	.totalTime {
		background: url("/static/tjbj.png");
		background-size: 100% 100%;
		margin: 0 15rpx;
		padding: 15rpx;

		.name {
			font-weight: 500;
			font-size: 13rpx;
			color: #333333;
		}

		.time {
			font-weight: 700;
			font-size: 17rpx;
			color: #4D7BFF;
			margin-top: 11rpx;
		}

	}

	.ul {
		display: flex;
		gap: 15rpx;
		margin: 15rpx;

		.li {
			flex: 1;
			text-align: center;
			background: #fff;
			border-radius: 3rpx;
			padding: 17rpx 0;

			.num {
				font-weight: 500;
				font-size: 16rpx;
				color: #4D7BFF;
			}

			.title {
				font-size: 11rpx;
				margin-top: 9rpx;
			}
		}
	}

	.statistics {
		background: #fff;
		margin: 15rpx;
		border-radius: 3rpx;
		padding: 15rpx;

		.title {
			font-size: 11rpx;
		}
	}

	.tabs {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 15rpx;
		gap: 15rpx;

		.reset {
			width: 69rpx;
			line-height: 31rpx;
			background: linear-gradient(45deg, #4F8AFF 0%, #4B5EFF 100%);
			border-radius: 3rpx;
			color: #fff;
			font-size: 11rpx;
			text-align: center;
			font-weight: 800;

		}

		.left {
			display: flex;
			align-items: center;
			background: #fff;
			border-radius: 3rpx;
			line-height: 31rpx;
			overflow: hidden;
			justify-content: space-between;
			padding: 0rpx 15rpx;
			width: 150rpx;

			image {
				width: 10rpx;
				height: 10rpx;
			}

			.time {
				font-weight: 800;
				font-size: 11rpx;
				color: #000000;

				&.on {
					color: #4D7BFF;
				}
			}

		}


	}
</style>