<template>
  <div id="carGroup">
    <div class="d-flex pt-2 pl-2">
        <span>
          <icon name="chart-bar" class="text-icon"></icon>
        </span>
        <div class="d-flex">
          <span class="fs-xl text mx-2">机构报警排行榜</span>
        </div>
      </div>
      <div class="box-wrap">
        <div class="left-items">
          <div class="row1">
            <div class="group">#车队</div>
            <div class="count">报警数</div>
          </div>

          <div class="row2" v-for="(item,index ) in groupData">
            <div class="group">{{item.name}}</div>
            <div class="count">{{item.value}}</div>
          </div>
          <div class="row1">
            <div class="group">123443</div>
            <div class="count">10</div>
          </div>
        </div>
        <div class="right-items">
          <div class="right-top">
            <div class="item bg-color-black">
              <span>昨日达标率</span>
              <CenterChart
                :id="rate[0].id"
                :tips="rate[0].tips"
                :colorObj="rate[0].colorData"
              />
            </div>
            <div class="item bg-color-black">
              <span>昨日未达标率</span>
              <CenterChart
                :id="rate[1].id"
                :tips="rate[1].tips"
                :colorObj="rate[1].colorData"
              />
            </div>
          </div>
        <div class="water">
          <span>昨日机构安全得分</span>
          <dv-water-level-pond class="dv-wa-le-po" :config="water" />
        </div>
        </div>
      </div>
  </div>
</template>
<script>
  import CenterChart from '@/components/echart/center/centerChartRate'

export default {
  data() {
    return {
      options:{},
      groupData:[],
      water: {
        data: [75],
        shape: 'roundRect',
        formatter: '{value} 分',
        waveNum: 3
      },
      rate: [
        {
          id: 'centerRate1',
          tips: 60,
          colorData: {
            textStyle: '#3fc0fb',
            series: {
              color: ['#00bcd44a', 'transparent'],
              dataColor: {
                normal: '#03a9f4',
                shadowColor: '#97e2f5'
              }
            }
          }
        },
        {
          id: 'centerRate2',
          tips: 40,
          colorData: {
            textStyle: '#67e0e3',
            series: {
              color: ['#faf3a378', 'transparent'],
              dataColor: {
                normal: '#ff9800',
                shadowColor: '#fcebad'
              }
            }
          }
        }
      ],
      colorObj:{
          textStyle: "#3fc0fb",
          series: {
            color: ["#00bcd44a", "transparent"],
            dataColor: {
              normal: "#03a9f4",
              shadowColor: "#97e2f5"
            }
          }
        },
    }
  },
  props:{
      cdata: {
        type: Object,
        default: () => ({})
      },
      sdata:{
        type: Object,
        default: () => ({})
      }
  },
  watch: {
    cdata: {
      handler (newData) {
        //console.log("=======offTarget========")
        //console.log(newData);
        var reverse=[]
        newData.forEach( (value,index)=>{
          reverse.unshift(value)
        }) 
        this.groupData = reverse;
      },
      deep: true,
      immediate: true,
    },
    sdata: {
      handler (newData) {
        //console.log("=======offTarget========")
        //console.log(newData);
        this.rate[0].tips= parseInt(newData?.onTarget*100);
        this.rate[1].tips= parseInt(newData?.offTarget*100);
        this.water.data[0] = parseInt(newData?.avgScore);
      },
      deep: true,
      immediate: true,
    }
  },
  components: {
    CenterChart
  },
  mounted() {
    
    var newData = 80;
    this.options = {
          title:{
            text: 80 * 1 + "%",
            x: "center",
            y: "center",
            textStyle: {
              color: this.colorObj.textStyle,
              fontSize: 16
            }
          },
          series: [
            {
              type: "pie",
              radius: ["75%", "80%"],
              center: ["50%", "50%"],
              hoverAnimation: false,
              color: this.colorObj.series.color,
              label: {
                normal: {
                  show: false
                }
              },
              data: [
                {
                  value: newData,
                  itemStyle: {
                    normal: {
                      color: this.colorObj.series.dataColor.normal,
                      shadowBlur: 10,
                      shadowColor: this.colorObj.series.dataColor.shadowColor
                    }
                  }
                },
                {
                  value: 100 - newData
                }
              ]
            }
          ]
        }
  },
  methods: {
    changeTiming() {
     
    },
    changeNumber() {
    
    }
  }
}
</script>
<style lang="scss" scoped>
  $box-width: 100%;
  $box-height: 410px;

 #carGroup {
   padding: 16px;
   height: $box-height;
   width: $box-width;
   padding:15px;
    overflow: hidden;
   .box-wrap{
     display:flex;
   }
   .left-items{
       width:50%;
      .row1,.row2{
        display: flex;
        justify-content: space-between;
        height:50px;
        line-height:40px;
        padding:0 15px;
        .num{
          display: flex;
          align-items: center;
          text-align:left;
          font-size: 16px;
          font-weight: 600;
          color: #E5E6EB;
          width:60px;
        }
        .group{
          display: flex;
          align-items: center;
          font-size: 16px;
          font-weight: 600;
          color: #2060D4;
        }
        .count{
          display: flex;
          align-items: center;
          font-size: 16px;
          font-weight: 600;
          color: #2060D4;
        }
      }
    }
    .right-items{
      width:50%;
      padding-top:70px;
       .right-top{
         display:flex;
         justify-content:space-around;
       }
    }
}
</style>