<template>
  <div id="mapPage">
    <Echart
          :options="options"
          id="map"
          height="100%"
          width="100%"
        ></Echart>
        <div class="left-items">
         <div class="h">安全系数</div>
         <div class="row">
             <div class="title">高速前碰撞：</div>
             <div class="val">{{alarmStats1.avgFCW.toFixed(2)}}</div>
           </div>
         <div class="row">
             <div class="title">低速前碰撞：</div>
             <div class="val">{{alarmStats1.avgUFCW.toFixed(2)}}</div>
           </div>
         <div class="row">
             <div class="title">虚拟保险杠：</div>
             <div class="val">{{alarmStats1.avgVBW.toFixed(2)}}</div>
           </div>
         <div class="row">
             <div class="title">车距检测：</div>
             <div class="val">{{alarmStats1.avgHMW.toFixed(2)}}</div>
           </div>
         <div class="row">
             <div class="title">车道左\右偏离：</div>
             <div class="val">{{alarmStats1.avgLDW.toFixed(2)}}</div>
           </div>
         <div class="row">
             <div class="title">行人碰撞：</div>
             <div class="val">{{alarmStats1.avgPCW.toFixed(2)}}</div>
           </div>
         <div class="row">
             <div class="title">超速：</div>
             <div class="val">{{alarmStats1.avgSLI.toFixed(2)}}</div>
           </div>
        </div>
        <div class="right-items">
         <div class="val">{{alarmStats1.totalCarCount}}</div>
         <div class="title">车辆总数</div>
         <div class="val">{{alarmStats1.todayCarCount}}</div>
         <div class="title">出车次数</div>
         <div class="val">{{alarmStats1.totalAlarmCount}}</div>
         <div class="title">报警总数</div>
         <!--修改的时候确定一下这个地方的单位是公里还是米，可以做相应的处理-->
         <div class="val">{{(alarmStats1.todayMilesage/1000).toFixed(0)}}</div>
         <div class="title">总里程</div>
        </div>
  </div>
</template>
<script>
  import Echart from '@/common/echart'
  require ('echarts/extension/bmap/bmap')
// import CenterLeft1Chart from '@/components/echart/centerLeft/centerLeft1Chart'
export default {
  data() {
    return {
      alarmStats1:{},
      options:{},
      geoCoordMap:{},
      mapData:{},
      alermList:[],
    }
  },
  components: {
    Echart
  },
  props:{
    cdata: {
      type: Object,
      default: () => ({})
    },
    sdata: {
      type: Object,
      default: () => ({})
    },
  },
  watch: {
    cdata: {
      handler (newData) {
        this.alermList = newData;
        for(var i=0;i<newData.length;i++){
          var item = newData[i];
          if(item.dataType== '1'){
              item.icon = 'image://image/adas3_lldw.png';
          }else if(item.dataType =='2'){
              item.icon = 'image://image/adas4_rldw.png';
          }else if(item.dataType =='3'){
              item.icon = 'image://image/adas6_hmw.png';
          }else if(item.dataType =='4'){
              item.icon = 'image://image/adas1_pcw.png';
          }else if(item.dataType =='5'){
              item.icon = 'image://image/adas7_ufcw.png';
          }else if(item.dataType =='5_1'){
              item.icon = 'image://image/adas8_vb.png';
          }else if(item.dataType =='6_1'){
              item.icon = 'image://image/adas2_fcw.png';
          }else if(item.dataType =='6_2'){
              item.icon = 'image://image/adas2_fcw.png';
          }else if(item.dataType =='6_3'){
              item.icon = 'image://image/adas2_fcw.png';
          }else if(item.dataType =='8'){
              item.icon = 'image://image/adas2_fcw.png';
          }else if(item.dataType =='10'){
              item.icon = 'image://image/adas5_sli.png';
          }else if(item.dataType =='12'){
              item.icon = 'image://image/adas2_fcw.png';
          }
        }
        this.options ={
          backgroundColor: 'transparent',
          tooltip: {
            trigger: 'item'
          },
          bmap: {
            center: [115.81, 40.29],
            zoom: 9,
            roam: true,
            mapStyle: {
              styleJson: [
                {
                  featureType: 'water',
                  elementType: 'all',
                  stylers: {
                    color: '#0d1021'
                  }
                },
                {
                  featureType: 'land',
                  elementType: 'all',
                  stylers: {
                    color: '#0d1021'
                  }
                },
                {
                  featureType: 'boundary',
                  elementType: 'geometry',
                  stylers: {
                    color: '#064f85'
                  }
                },
                {
                  featureType: 'railway',
                  elementType: 'all',
                  stylers: {
                    visibility: 'off'
                  }
                },
                {
                  featureType: 'highway',
                  elementType: 'geometry',
                  stylers: {
                    color: '#2060d4'
                  }
                },
                {
                  featureType: 'highway',
                  elementType: 'geometry.fill',
                  stylers: {
                    visibility: 'off'
                  }
                },
                {
                  featureType: 'highway',
                  elementType: 'labels',
                  stylers: {
                    visibility: 'off'
                  }
                },
                {
                  featureType: 'arterial',
                  elementType: 'geometry',
                  stylers: {
                    color: '#004981'
                  }
                },
                {
                  featureType: 'arterial',
                  elementType: 'geometry.fill',
                  stylers: {
                    color: '#00508b'
                  }
                },
                {
                  featureType: 'poi',
                  elementType: 'all'
                },
                {
                  featureType: 'green',
                  elementType: 'all'
                },
                {
                  featureType: 'subway',
                  elementType: 'all'
                },
                {
                  featureType: 'manmade',
                  elementType: 'all'
                },
                {
                  featureType: 'local',
                  elementType: 'all'
                },
                {
                  featureType: 'arterial',
                  elementType: 'labels'
                },
                {
                  featureType: 'boundary',
                  elementType: 'geometry.fill',
                  stylers: {
                    color: '#029fd4'
                  }
                },
                {
                  featureType: 'building',
                  elementType: 'all',
                  stylers: {
                    color: '#1a5787'
                  }
                },
                {
                  featureType: 'label',
                  elementType: 'all'
                }
              ]
            }
          },
          series: [
          {
              name: '报警地图',
              type: 'scatter',
              coordinateSystem: 'bmap',
            },
            {
              name: '报警',
              type: 'effectScatter',
              coordinateSystem: 'bmap',
              data: this.convertData(this.alermList),
              symbolSize: function (val) {
                return val[2] / 10;
              },
              symbol: function(val){
                return val[3];//  'image:///image/adas1_pcw.png',
              },
              encode: {
                value: 2
              },
              showEffectOn: 'render',
              rippleEffect: {
                brushType: 'stroke'
              },
              label: {
                formatter: "{b}",
                position: 'right',
                show: true
              },
              tooltip: {
            "trigger": "item",
            "confine": true,
            "formatter": (p)=>{
              //console.log(JSON.stringify(p));
              // let dataCon = p.data,
              //     txtCon = `${dataCon.name}</br>AQI：${dataCon.aqi}`
              // return txtCon
              return p.value[4]+"<br/> 时速:"+p.value[5]+"<br/> 车号:"+p.value[6];

            }
        },
              itemStyle: {
                shadowBlur: 10,
                color:"red",
                shadowColor: '#333'
              },
              emphasis: {
                scale: true
              },
              zlevel: 1
            }]
        };
      },
      deep: true,
      immediate: true,
    },
    sdata: {
      handler (newData) {
          this.alarmStats1 = newData;
      },
      deep: true,
      immediate: true,
    },
  },
  mounted() {
   this.geoCoordMap = {};
  },
  methods: {
    //'latitude':40.82, 'longitude':114.876
   convertData (data) {
      var res = [];
      for (var i = 0; i < data.length; i++) {
         res.push({
           name: '',
           value: [data[i].lng,data[i].lat,200,data[i].icon,data[i].alarmTypeName,data[i].speed,data[i].carCode]
          });
     } 
     return res;
    },
    changeTiming() {
     
    },
    changeNumber() {
    
    }
  }
}
</script>
<style lang="scss" scoped>
  $box-width: 100%;
  $box-height: 100%;

 #mapPage {
   padding: 16px;
   height: $box-height;
   width: $box-width;

   .left-items{
    position: absolute;
    top: 40px;
    text-align:center;
     width:180px;
     padding:10px;
     background-color: rgba(0,0,0,.5);

     .h{
       font-size: 16px;
      font-weight: 600;
      color: #26EAC9;
      line-height: 33px;
     }
     .row{
        display:flex;
       justify-content: center;
       align-items: center;

       .title{
        font-size: 16px;
        font-weight: 400;
        color: #E5E6EB;
        line-height: 40px;
     }
     .val{
       font-size: 16px;
      font-weight: bold;
      color: #26EAC9;
      line-height: 40px;
     }
     }
    
   }
   .right-items{
      display:flex;
      flex-direction:column;
     position: absolute;
     top: 40px;
     right: 20px;
     text-align:center;
     width:150px;
     padding-top:20px;
     background-color: rgba(0,0,0,.5);
     .title{
       display: inline;
       font-size: 16px;
      font-weight: 400;
      color: #E5E6EB;
      line-height: 33px;
      width: 100%;
      margin-bottom:20px;
     }
     .val{
       display: inline;
       font-size: 30px;
      font-weight: bold;
      color: #26EAC9;
      line-height: 33px;
      width: 100%;
     }
   }
}
</style>