<template>
  <div class="box-1">
    <div class="statistics">
		<Title1 title="总路段拥堵情况" />
      <!-- <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 :end-val="countData.jamTotal" /> </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 :end-val="countData.totalNum" /> </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 :end-val="countData.coreNum" /></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 :end-val="countData.jamCore" /></span>
        </div>
      </div> -->
    </div>
    <div class="chart">
      <div class="chart-item">
        <Title3 title="拥堵频次占比" />
        <div class="chart__inner">
          <div>
            <spotRate
              :dataList="chartData.roadNum"
              :total="chartData.totalNum"
              label="拥堵频次总数"
            />
            <ul class="chart__legend">
              <li
                class="chart__legend-item"
                v-for="(item, index) in chartData.roadNum"
                :key="index"
              >
                <p class="dot" :style="{ background: colors[index] }" />
                <p class="name">{{ item.name }}</p>
                <p class="value">{{ item.value }}%</p>
              </li>
            </ul>
          </div>
        </div>
      </div>
	  
	  <div class="chart-item">
	    <Title3 title="拥堵类型频次占比" />
	    <div class="chart__inner">
	      <div class="new-vehicle">
			  <vehicle-source :list="chartData.typeNum" />
	       <!-- <spotRate :dataList="chartData.typeNum" :total="chartData.totalNum" label="拥堵总数" /> -->
		   <div class="new-ul">
			  <ul class="chart__legend">
			    <li
			      class="chart__legend-item"
			      v-for="(item, index) in chartData.typeNum"
			      :key="index"
			    >
			      <p class="dot" :style="{ background: colors[index] }" />
			      <p class="name">{{ item.name }}</p>
			      <p class="value">{{ item.value }}%</p>
			    </li>
			  </ul> 
		   </div>
	      
	      </div>
	    </div>
	  </div>
      <div class="chart-item">
        <Title3 title="拥堵时长占比" />
        <div class="chart__inner">
          <div >
            <spotRate
              :dataList="chartData.roadTime"
              :total="chartData.totalTime"
              label="拥堵总时长"
            />
            <ul class="chart__legend">
              <li
                class="chart__legend-item"
                v-for="(item, index) in chartData.roadTime"
                :key="index"
              >
                <p class="dot" :style="{ background: colors[index] }" />
                <p class="name">{{ item.name }}</p>
                <p class="value">{{ item.value }}%</p>
              </li>
            </ul>
          </div>
        </div>
      </div>
  
      <div class="chart-item">
        <Title3 title="拥堵类型时长占比" />
        <div class="chart__inner">
          <div class="new-vehicle">
           <!-- <spotRate
              :dataList="chartData.typeTime"
              :total="chartData.totalTime"
              label="拥堵总数"
            /> -->
			<vehicle-source :list="chartData.typeTime" />
			<div class="new-ul">
				<ul class="chart__legend">
				  <li
				    class="chart__legend-item"
				    v-for="(item, index) in chartData.typeTime"
				    :key="index"
				  >
				    <p class="dot" :style="{ background: colors[index] }" />
				    <p class="name">{{ item.name }}</p>
				    <p class="value">{{ item.value }}%</p>
				  </li>
				</ul>
			</div>
            
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
  import spotRate from './spotRate.vue'
  import countup from 'vue-countup-v3'
  import { getSpotRateApi } from '@/api/workOrder'
  import { getRouterStateApi, getRouterChartsApi } from '@/api/traffic'
  import vehicleSource from './vehicle-source'
  const colors = ['#FDC40A', '#FF5232', '#50F0A6', '#5FDFFA']
  let spotRateData = ref([])
  let countData = ref({
    coreNum: 0,
    jamCore: 0,
    jamTotal: 0,
    totalNum: 0
  })
  let chartData = ref({
    roadNum: [],
    roadTime: [],
    typeNum: [],
    typeTime: [],
    totalNum: 0,
    totalTime: ''
  })

  const getRouterCharts = async () => {
    let res = await getRouterChartsApi()
    chartData.value = res.data
  }
  const getRouterState = async () => {
    let res = await getRouterStateApi()
    countData.value = res.data
  }
  const getSpotRate = async () => {
    let res = await getSpotRateApi()
    spotRateData.value = res.data.data
  }
  onMounted(() => {
    getSpotRate()
    getRouterState()
    getRouterCharts()
  })
</script>

<style lang="scss" scoped>
	.new-vehicle{
		padding-top:vh(20);
	}
	.new-ul{
		padding:0 vw(30);
		margin-top:vh(20);
	}
  .box-1 {
    margin-top: vh(120);
    width: vw(626);
    height: vh(950);
    background: linear-gradient(321deg, #0b2f64 0%, #062b57 100%);

    .chart {
      display: flex;
      flex-wrap: wrap;
      gap: vw(8);
      padding: 0 vw(8);

      &-item {
        width: vw(300);
        background-image: url('@/assets/images/bg-3.png');
        background-size: 100% 100%;
      }

      &__inner {
        display: flex;
        justify-content: center;
        height: vh(380);
		
      }

      &__legend {
        flex: 1;
        &-item {
          position: relative;
          width: 100%;
          height: vh(30);
          display: flex;
          align-items: center;
          margin-bottom: vh(8);
          background: linear-gradient(90deg, rgba(0, 150, 255, 0.34) 0%, rgba(0, 150, 255, 0) 100%);

          &::before {
            position: absolute;
            content: '';
            width: vw(4);
            height: vh(30);
            background-color: #0096ff;
          }

          .dot {
            width: vw(10);
            height: vw(10);
            margin: 0 vw(16);
          }

          .name {
            font-weight: 400;
            font-size: vw(14);
            color: #ffffff;
            width: vw(110);
          }

          .value {
            // padding-right: vw(20);
            font-weight: bold;
            font-size: vw(15);
            color: #ffffff;
          }
        }
      }
    }
    .statistics {
   //    padding: 0 vw(40);
   //    height: vh(110);
   //    display: flex;
   //    align-items: center;
	  // width:100%;
      .item-box {
        flex: 1;
        .item-t {
          display: flex;
          font-weight: 400;
          font-size: vw(14);
          color: #fff;
          text-align: left;
          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>
