<template>
  <div class="full-w-h d-trafficStatus">
    <v-chart class="d-trafficStatus-pie" autoresize :option="option"/>
    <div class="legends">
      <div class="legend-item" v-for="(item, index) of pieData" :key="index">
        <div :style="`background-color:${colorMap[item.name]}`" class="color"></div>
        {{ fieldMap[item.name] }}: {{item.value}}%
      </div>
    </div>
  </div>
</template>

<script>
import {getCrossStatusTimeRate} from "@/dao/optApi";

export default {
  name:'trafficStatus',
  props:['crossData'],
  data(){
    return{
      chart:null,
      pieData:[],
      legends:[1,2,3,4,5,],
      fieldMap:{
        'congestionTimeRate':'拥堵时长',
        'phaseEmptyTimeRate':'空放时长',
        'spilloverTimeRate':'溢出时长',
        'unbalanceTimeRate':'失衡时长',
        'unblockedTimeRate':'畅通时长'
      },
      colorMap:{
        'congestionTimeRate':'#b00a05',
        'phaseEmptyTimeRate':'#ff8200',
        'spilloverTimeRate':'#ffd145',
        'unbalanceTimeRate':'#afafaf',
        'unblockedTimeRate':'#00933a'
      },

    }
  },
  mounted() {
    this.renderCharts()
  },
  computed:{
    option(){
      return {
        tooltip: {
          show:false,
          trigger: 'item'
        },
        legend: {
          show:false,
          right: 0,
          top: 'middle',
          orient: 'vertical',
        },
        series: [
          {
            name: '',
            type: 'pie',
            radius: ['50%', '80%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: false,
              }
            },
            labelLine: {
              show: false
            },
            data: this.pieData
          }
        ]
      }
    }
  },
  methods:{
    renderCharts(){
      getCrossStatusTimeRate({crossId: this.crossData.id}).then(res=>{
        console.log('交通状态',res)
        let result = []
        for(let key in res.content){
          if(key!=='crossId'){
            result.push({
              value:res.content[key],
              // name:this.fieldMap[key],
              name:key,
              // nameVal: key
              itemStyle:{
                color:this.colorMap[key]
              }
            })
          }
        }
        this.pieData = result
      })

    }
  }
}
</script>

<style lang="less" scoped>
.d-trafficStatus{
  display: flex;
  .d-trafficStatus-pie{
    width: 60%;
    height: 100%;
  }
  .legends{
    width: 40%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    .legend-item{
      display:flex;
      align-items: center;
      .color{
        width: 12px;
        height: 12px;
        background-color: grey;
        margin-right: 10px;
      }
    }
  }
}
</style>