<template>
  <div class="app-chinaMapBox theme-map">
    <div class="mapTitle eleVerHorCenter-flex">
      <div class="cellBox">
        <table class="parkTotalTb">
          <tr>
            <td><div class="parkTotalImg"></div></td>
            <td><div class="infoBox"><div><countTo :startVal='parkParams.startVal' :endVal='parkParams.endVal' :duration='animationTime'></countTo></div><div>停车场总数</div></div> </td>
          </tr>
        </table>
      </div>
      <div class="cellBox">
        <table class="parkTotalTb">
          <tr>
            <td><div class="memberTotalImg"></div></td>
            <td><div class="infoBox"><div><countTo :startVal='memberParams.startVal' :endVal='getParkingTotal' :duration='animationTime'></countTo></div><div>会员总数</div></div> </td>
          </tr>
        </table>
      </div>
      <div class="cellBox">
        <table class="parkTotalTb">
          <tr>
            <td><div class="dayTotalImg"></div></td>
            <td><div class="infoBox"><div><countTo :startVal='dayParams.startVal' :endVal='getOrderTotal' :duration='animationTime'></countTo></div><div>今日订单数</div></div> </td>
          </tr>
        </table>
      </div>
    </div>
    <div class="mapChart"> </div>
  </div>
</template>
<script>
  import echarts from 'echarts'
  import countTo from 'vue-count-to';//通过设置：endVall 和 ：startVall 会自动判断计数和倒数，:duration='3000'是指完成动画的时间。
  import {mapGetters} from 'vuex' //use commit
  export default {
    name: "chinaMap",
    components: { countTo },
    data() {
      return {
        animationTime:5000,//动画时间
        parkParams:{//parkTotal:738,//停车场总数
          startVal:0,
          endVal: 0
        },
        memberParams:{//memberTotal:738,//会员总数
          startVal:0,
          endVal: 7200
        },
        dayParams:{//dayTotal:10000,//今日订单数
          startVal:0,
          endVal: 1000
        },
        mapChart: {},
      }
    },
    computed: {
      ...mapGetters(['getParkingTotal','getOrderTotal'])
    },
    mounted() {
      this.axios.post('urban/intelligence/park/queryParkNumStatisticByOrgIds',{
        orgIds: [10003,10005]
      }).then((response)=>{
        let  data = response.data.data
        this.parkParams.endVal=data
      }).catch((response)=>{
        console.log(response);
      })
      this.axios.post('urban/intelligence/berth/queryBerthStatisticForOrgId',{
        orgIds: [10003,10005]
      }).then((response)=>{
        let  data = response.data.data
        console.log(data)
      }).catch((response)=>{
        console.log(response);
      })

      //this.parkParams.endVal = this.getParkingTotal
      this.mapChart= this.createPie();
      const _self=this;
      //var tmpCount=0;
      setInterval(function(){
       let tmpCount =Math.floor(Math.random()*3+1);;//1-3随机数
//        _self.parkParams.startVal= _self.parkParams.endVal;
//        _self.parkParams.endVal +=tmpCount;
        //console.log(tmpCount);
        _self.dayParams.startVal=_self.dayParams.endVal;
        _self.dayParams.endVal +=tmpCount;
      },10000);
      window.addEventListener('resize', function() {
        this.mapChart.resize()
      }.bind(this));
    },
    methods: {
      /*
       * china地图
       * */
      createPie(){
        let mapChart = echarts.init(document.querySelector('.app-chinaMapBox .mapChart'));
        const series=this._getSeries();
        const option= {
          grid: {
            top: '0%',left: '0%',
            right: '0%',bottom: '3%'
          },
          tooltip: {
            trigger: 'item',
            backgroundColor: 'rgba(6, 75, 140, 0)',
            borderColor: '#FFFFCC',
            showDelay: 0,
            hideDelay: 0,
            enterable: true,
            transitionDuration: 0,
            //extraCssText: 'z-index:100',
            formatter: function(params, ticket, callback) {
              if (params.seriesType != "lines") {
                //console.log(params)
                //根据业务自己拓展要显示的内容
                var res = "";
                var name = params.name;
                var value = params.value;
                var numStyle='color:#02C202; font-size: 16px; font-family: display-free;line-height:25px;font-weight:bold;';
                res = "<div style='padding:5px;height:16px;line-height:16px;background:rgba(43, 140, 209, 0.96)'>" + name + "</div>" ;
                res +="<div style='padding:5px;height:25px;background:rgba(6, 75, 140, 0.9);'>"+"泊位总数："+"<span style='"+numStyle+"'>"+ value[2] +"</span></div>";
                return res;
              }
            }
          },
          dataRange: {
            calculable: false,
            color: ['#FFAB00'],
            textStyle: {color: '#fff' },
            show: false,
          },
          geo: {
            map: 'china',
            label: {
              normal: {show: false },
              emphasis: {show: false}
            },
            center: [104.94296,37.433088],
            roam: true,zoom:1.3,
            scaleLimit:{ min:1.1,max:5 },
            itemStyle: {
              normal: {
                areaColor: '#020e33',borderColor: '#404a59'
              },
              emphasis: { areaColor: '#04294A'}
            },

          },
          series: series
        }
        mapChart.setOption(option);
        return mapChart;
      },
      //设置 series
      _getSeries(){
        const geoCoordMap = {
          '无锡': [120.318915, 31.494359],
          '北京': [116.372555, 39.918295],//北京西城
          '赤峰': [118.892761, 42.263681],
          '丹阳': [119.612594, 32.016089],
          '双流': [103.912493, 30.586969] //成都双流区
        };
        const dataFrom = '无锡';
        const data = [
          {name: '赤峰',value: 95},
          {name: '双流',value: 70},
          {name: '北京',value: 70},
          {name: '丹阳', value: 30}
        ];
        let tmpSeries=[{
          //name: '无锡',
          type: 'lines',
          zlevel: 1,
          effect: {
            show: true,
            period: 6,
            trailLength: 0.2, //0-1
            color: '#fff',
            //shadowBlur: 3,
            symbolSize: 2
          },
          lineStyle: {
            normal: {
              color: '#a6c84c',
              width: 0,
              curveness: 0.2
            }
          },
          data: data.map(function(dataItem) {
            return {
              fromName: dataFrom,
              toName: dataItem.name,
              coords: [
                geoCoordMap[dataFrom],
                geoCoordMap[dataItem.name]
              ]
            }
          })
        },
          {
            //name: '无锡',
            type: 'lines',
            //zlevel: 2,
            symbol: 'none',//['none', 'pin'],
            symbolSize: 8,
            effect: {
              show: true,
              period: 6,
              trailLength: 0,
              color: '#fff',
            },
            lineStyle: {
              normal: {
                color: '#FFAB00', //线颜色
                width: 1,
                opacity: 0.6,
                curveness: 0.2
              }
            },
            data: data.map(function(dataItem) {
              return {
                fromName: dataFrom,
                toName: dataItem.name,
                coords: [
                  geoCoordMap[dataFrom],
                  geoCoordMap[dataItem.name]
                ]
              }
            })
          },
          {
            name: '城市',
            type: 'effectScatter',
            coordinateSystem: 'geo',
            //zlevel: 2,
            rippleEffect: {
              scale: 5,
              brushType: 'stroke'
            },
            label: {
              normal: {
                show: true,
                position: 'right',
                color: '#FFFFFF',
                formatter: '{b}'
              }
            },
            //光圈大小
            symbolSize: function(val) {
              return 10;
            },
            itemStyle: {
              normal: {
                color: '#a6c84c'
              }
            },
            data: data.map(function(dataItem) {
              return {
                name: dataItem.name,
                value: geoCoordMap[dataItem.name].concat([dataItem.value])
              };
            })
          },
          {
            name: '无锡',
            type: 'scatter',
            coordinateSystem: 'geo',
            label: {
              normal: {
                show: true,
                position: 'bottom',
                formatter: '{b}',
                textStyle: {
                  color: "#ED3D06"
                }
              },
              emphasis: {
                show: true
              }
            },
            symbol: 'circle',
            symbolSize: 5,
            data: [{
              name: dataFrom,
              value: geoCoordMap[dataFrom].concat([100]),
            }],
          }
        ];
        return tmpSeries;
      },

      //测试被父组件调用
      setParkTotal(){
        this.parkParams.startVal=this.parkParams.endVal;
        this.parkParams.endVal=105;
        console.log("停车场总数:root");
      }
    }
  }
</script>

<style scoped  lang="scss">
  .app-chinaMapBox{
    position: relative;
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
  .mapChart{
    position: relative;
    width: 100%;
    height: 100%;
    /*margin-top: 5%;*/
    /*margin-bottom: 5px;*/
    /*height: -webkit-calc(100% - (5% + 5px));*/
    /*height: -moz-calc(100% - (5% + 5px));*/
    /*height: calc(100% - (5% + 5px));*/
    /*top:0;left: 0;*/
    /*bottom: 0;*/
    /*right:0;*/
    /*z-index: -1;*/
  }
  .cellBox{
    width: 33.333%;text-align: center;
  }
  .mapTitle{
    position: absolute;
    top: 0;
    width: 100%;
    height: 70px;
    background-color:RGBA(0, 45, 140, .7);
    z-index: 5;
  }
  .parkTotalImg{
    background: url(../../images/map/parkTotal.svg) no-repeat;
    background-size: 100% 100%;
    width: 45px;height: 45px;
  }
  .memberTotalImg{
    background: url(../../images/map/memberTotal.svg) no-repeat;
    background-size: 100% 100%;
    width: 45px;height: 45px;
  }
  .dayTotalImg{
    background: url(../../images/map/dayTotal.svg) no-repeat;
    background-size: 100% 100%;
    width: 45px;height: 45px;
  }
  .parkTotalTb{
    display: inline-block;
    margin-top:2px;
  }
  .infoBox{
    margin-left: 5px;
    text-align: left;
  }
  /*数字:738*/
  .infoBox>div:first-child{
    font-size: 24px;
  }
  /*文字：会员总数*/
  .infoBox>div:last-child{
    color: #00CFFE;font-size: 14px;
  }

  }
</style>
