<template>
	<div class="traffic-box-1">
		<div class="title-num">
			<div class="item-box">
				<div class="item-t flex">
					<img src="@/assets/images/t-icon-1.png" alt="">总路段
				</div>
				<div class="item-num"><span><countup endVal="88895" /></span>	</div>
			</div>
			<div class="item-box">
				<div class="item-t flex">
					<img src="@/assets/images/t-icon-1.png" alt="">总路段
				</div>
				<div class="item-num"><span><countup endVal="88895" /></span></div>
			</div>
			<div class="item-box">
				<div class="item-t flex">
					<img src="@/assets/images/t-icon-1.png" alt="">总路段
				</div>
				<div class="item-num"><span><countup endVal="88895" /></span></div>
			</div>
			<div class="item-box">
				<div class="item-t flex">
					<img src="@/assets/images/t-icon-1.png" alt="">总路段
				</div>
				<div class="item-num"><span><countup endVal="88895" /></span></div>
			</div>
		</div>
		<div class="list-item">
			<div class="item-li" v-for="item in 4">
				<div class="title-3"><span>拥堵频次占比</span></div>
				<div class="chart-box">
					<v-chart class="chart"  :option="option1" autoresize />
				</div>
			</div>
			
		</div>
	</div>
</template>

<script setup>
	import countup from 'vue-countup-v3'
	import * as echarts from 'echarts'
	import { fitChartSize } from '@/utils/dataUtil'
	import Map from '@/components/Map/marker.vue'
	import VChart, { THEME_KEY } from 'vue-echarts';
	import { ref, provide } from 'vue';
	
	provide(THEME_KEY, 'dark');
	const option1 = ref({
		  backgroundColor:'transparent',
		  tooltip: {
		    trigger: 'item'
		  },
		  legend: {
		  		type: 'scroll',
		  		orient: 'vertical',
		  		right: fitChartSize(10),
		  		top: fitChartSize(70),
		  		bottom: fitChartSize(20),
		  		itemWidth:5,
		  		itemHeight:5,
				padding: [20,10,20,10],
				// itemGap:15,
				show:true,
				lineStyle:{
					 borderColor:'#fff',
					 width:5,
				},
				textStyle: {
				  color: '#fff',
				  fontSize:fitChartSize(16),
				  lineHeight: 16,
				  rich: {
					d: {   
						  width: '100%',
						  borderWidth: 0.5,
						  height:5,
						  backgroundColor: '1',
						},
					 a: {
						width: fitChartSize(75),
						align: 'left',
						fontSize:fitChartSize(16),
						// backgroundColor:'1'
						// color:'1',
						// borderColor:'#eee',
						// borderWidth:2
					 },
				  }
				},
				formatter: (e) => {
					 let ratio = 0
					 let value = 0
					 if (option1.value.series[0].data.length > 0) {
						option1.value.series[0].data.forEach(item => {
							if (e == item.name) {
						  ratio = (item.value*100/3799).toFixed(0)
						  value = item.value
							}
						 });
					  }
					  // return `${e}    ${ratio}%  
					  let arr = ['{a|' + e + '}', '{b|' + ratio + '%}'] 
					  return arr.join('')
				},
				itemStyle:{
					// color:'#fff'
					
				},
				backgroundColor:'rgba(0,77,136,0.6)'
		  },
		  series: [
		    {
		      name: 'Access From',
			  type: 'pie',
			  left:fitChartSize(-50),
			  top:fitChartSize(40),
			  width:fitChartSize(350),
			  height:fitChartSize(350),
			  // width:200,
			  // height:200,
			  radius: ['40%', '50%'],
			  avoidLabelOverlap: false,
			  padAngle: 5,
			  itemStyle: {
				borderRadius: 2
			  },
			  label: {
				  show: false,
				  position: 'center',
				  fontWeight: 'bold',
				  // formatter: function (o) {
					 //  let data = o.data.value
				  //   return `{value|${data}}` + '\n' + `{name|整改率}`
				  // },
				  // rich: {
					  
				  //   value: {
				  //     color: '#fff',
				  //     fontSize: fitChartSize(24),
				  //     fontWeight: 'bold',
				  //     padding: [0, 0, 5, 0]
				  //   },
				  //   name: {
				  //     color: '#7894A8',
				  //     fontSize: fitChartSize(12)
				  //   }
				  // }
			  },
			  emphasis: {
				label: {
					show: true,
					fontSize: fitChartSize(16),
					fontWeight: 'bold',
					color:'#fff',
					fontWeight: 'bold',
					formatter: function (o) {
						let data = o.data.value
					  return `{value|${data}}` + '\n' + `{name|整改率}`
					},
					rich: {
					  value: {
					    color: '#fff',
					    fontSize: fitChartSize(24),
					    fontWeight: 'bold',
					    padding: [0, 0, 5, 0]
					  },
					  name: {
					    color: '#7894A8',
					    fontSize: fitChartSize(12)
					  }
					}
				  }
				},
				labelLine: {
				  show: true
				},
		      data: [
		        { value: 200, name: '异常状况1' },
		        { value: 500, name: '异常状况2' },
		        { value: 234, name: '异常状况3' },
		        { value: 135, name: '异常状况4' },
		        { value: 100, name: '异常状况5' },
				{ value: 777, name: '异常状况6' },
				{ value: 888, name: '其他' },
		      ]
		     
		    },
		  ],
	});
</script>

<style lang="scss" scoped>
	.traffic-box-1{
		width:vw(815);
		height:vh(975);
		background: linear-gradient( 321deg, #0B2F64 0%, #062B57 100%);
		border-radius: 0px 0px 0px 0px;
		margin-top:vh(100);
		position: relative;
		z-index: 9;
		.list-item{
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
			padding:0 vw(10);
			.item-li{
				width: vw(388);
				height: vh(420);
				background: radial-gradient(  70% at 99% 50%, #0A4190 0%, rgba(0,77,136,0.6) 100%);
				border-radius: 0px 0px 0px 0px;
				border: 1px solid;
				border-image: linear-gradient(180deg, rgba(0, 150, 255, 1), rgba(0, 90, 153, 0)) 1 1;
				.title-3{
					margin-left:vw(10);
					position: relative;
					width: vw(344);
					height: vh(12);
					margin-top: vh(20);
					background-image: url('@/assets/images/title-6.png');
					background-size: 100% 100%;
								
					& > span {
					  position: absolute;
					  bottom: vh(4);
					  left: vw(20);
					  font-size: vw(15);
					  font-weight: bold;
					  background-image: linear-gradient(to bottom, #ffffff 0%, #0096ff 100%);
					  -webkit-background-clip: text;
					  background-clip: text;
					  -webkit-text-fill-color: transparent; /* 兼容WebKit内核浏览器 */
					  color: transparent; /* 兼容其他浏览器 */
					}
				}
				.chart-box{
					width:100%;
					height:vh(370);
				}
			}
		}
		.title-num{
			display: flex;
			justify-content: flex-start;
			padding:vw(40);
			.item-box{
				flex: 1;
				.item-t{
					display: flex;
					font-weight: 400;
					font-size: vw(14);
					color: rgba(255,255,255,0.8);
					text-align: left;
					font-style: normal;
					text-transform: none;
					margin-bottom:vh(20);
					img{
						margin-right:vw(5);
						width:vw(8);
						height:vh(8);
					}
					
				}
				.item-num{
					width:vw(134);
					height:vh(30);
					background-image: url('@/assets/images/t-box-title-bg-1.png');
					background-size: 100% 100%;
					font-weight: bold;
					font-size: vw(24);
					color: #02F9FA;
					text-align: left;
					font-style: normal;
					text-transform: none;
					padding-left:vw(15);
					position: relative;
					left:vw(-8);
					span{
						position: relative;
						top:vh(-5);
					}
				}
			}
		}
	}
</style>