<template>
  <div>
    <div ref="mapContainer" style="width: 80%;height: calc(100vh - 50px)"></div>
  </div>
</template>

<script>
import geoJson from '../../../assets/js/650000.json'
import geoJsonBoundary from '../../../assets/js/xinjiangbianjie.json'
import bg from '../../../assets/images/topRightBtuBg.png'

export default {
  name: 'echartsMap',
  data() {
    return {
      myChart: null,
      option: {},
      mapCenter:[87.6, 43.8]
    };
  },
  mounted() {
    this.myChart = this.$echarts.init(this.$refs.mapContainer);
    this.$echarts.registerMap('xinjiang', {geoJSON: geoJson});
    this.$echarts.registerMap('boundary', {geoJSON: geoJsonBoundary});
    this.init()


  },
  methods: {
    init() {
      // 调用后端查询场站列表
      this.$axios({url: '/electricfield/getLargeScreenStation', method: 'get'}).then(response => {
        let scatterData = response.data
        let lineData = this.filterLines(scatterData)
        this.initOption(lineData, scatterData);
      })

      // let scatterData = [
      //   {
      //     value: [87.6, 43.8],
      //     name: '新疆乌鲁木齐'
      //   },
      //   {
      //     name: '阿勒泰',
      //     value: [87.70, 47.81],
      //   },
      //   {
      //     name: '卡拉玛依',
      //     value: [84.88, 45.58],
      //   },
      //   {
      //     name: '喀什',
      //     value: [75.94, 39.45],
      //   },
      //   {
      //     name: '哈密',
      //     value: [93.52, 42.82],
      //   },
      //   {
      //     name: '吐鲁番',
      //     value: [89.26, 42.97],
      //   }
      // ]

    },
    filterLines(currentData) {
      let dataLines = []
      currentData.forEach((v) => {
        let lonLat = [v.value[0], v.value[1]]
        dataLines.push({
          coords: [lonLat, this.mapCenter], // 高版本的飞线数据组
        })
      })
      return dataLines
    },
    initOption(lineData, scatterData) {
      const _this = this
      this.option = {
        geo: [
          {
            map: 'xinjiang',
            aspectScale: 1,
            zoom: 0.9,
            layoutCenter: ['50%', '50%'],
            layoutSize: '100%',
            show: true,
            roam: false,
            label: {
              show: false, // 各个省市县的名字
              color: '#fff',
            },
            itemStyle: {
              // 每块的样式
              areaColor: {
                type: 'linear',
                x: 1200,
                y: 0,
                x2: 0,
                y2: 0,
                colorStops: [
                  {
                    offset: 0,
                    color: 'rgba(3,27,78,0.75)',
                  },
                  {
                    offset: 1,
                    color: 'rgba(58,149,253,0.75)',
                  },
                ],
                global: true, // 缺省为 false
              },
              borderColor: '#c0f3fb',
              borderWidth: 0.8,
            },
            emphasis: {
              itemStyle: {
                show: false,
                color: '#fff',
                areaColor: 'rgba(0,254,233,0.6)',
              },
              label: {
                show: true,
                color: '#fff',
              },
            },
          },
          // 重影

          // {
          //   type: 'map',
          //   map: 'xinjiang',
          //   zlevel: -1,
          //   aspectScale: 1,
          //   zoom: 0.9,
          //   layoutCenter: ['50%', '50.5%'],
          //   layoutSize: '100%',
          //   roam: false,
          //   silent: true,
          //   itemStyle: {
          //     borderWidth: .5,
          //     borderColor: 'rgba(58,149,253,0.8)',
          //     shadowColor: 'rgba(172, 122, 255,0.5)',
          //     shadowOffsetY: 5,
          //     shadowBlur: 15,
          //     areaColor: 'rgba(5,21,35,0.1)',
          //   },
          // },

          // {
          //   type: 'map',
          //   map: 'xinjiang',
          //   zlevel: -2,
          //   aspectScale: 1,
          //   zoom: 0.9,
          //   layoutCenter: ['50%', '52%'],
          //   layoutSize: '100%',
          //   roam: false,
          //   silent: true,
          //   itemStyle: {
          //     borderWidth: 1,
          //     borderColor: 'rgba(58,149,253,0.6)',
          //     shadowColor: 'rgba(65, 214, 255,0.6)',
          //     shadowOffsetY: 5,
          //     shadowBlur: 15,
          //     areaColor: 'rgba(5,21,35,0.1)',
          //   },
          // },

          {
            type: 'map',
            map: 'boundary',
            zlevel: -3,
            aspectScale: 1,
            zoom: 0.905,
            layoutCenter: ['50.17%', '50.7%'],
            layoutSize: '100%',
            roam: false,
            silent: true,
            itemStyle: {
              borderWidth: 5,
              borderColor: 'rgba(106,191,251,0.82)',
              shadowColor: 'rgba(29, 111, 165,1)',
              shadowOffsetY: 5,
              shadowBlur: 10,
              areaColor: 'rgba(5,21,35,0.1)',
            },
          },

          {
            type: 'map',
            map: 'boundary',
            zlevel: -4,
            aspectScale: 1,
            zoom: 0.915,
            layoutCenter: ['50.35%', '51.3%'],
            layoutSize: '100%',
            roam: false,
            silent: true,
            itemStyle: {
              borderWidth: 2,
              borderColor: 'rgba(108,221,255,0.8)',
              shadowColor: 'rgb(108,233,255)',
              shadowOffsetX: 4,
              shadowOffsetY: 10,
              shadowBlur: 15,
              areaColor: 'rgba(5,21,35,0.1)',
            },
          },
        ],
        // 地图相关配置
        series: [
          {
            type: 'lines',
            coordinateSystem: 'geo',
            effect: {
              show: true,
              period: 5, //箭头指向速度，值越小速度越快
              trailLength: 0.01, //特效尾迹长度[0,1]值越大，尾迹越长重
              symbol: 'arrow', //箭头图标
              symbolSize: 6, //图标大小
            },
            lineStyle: {
              color: '#00fde1',
              width: 1, //尾迹线条宽度
              opacity: 1, //尾迹线条透明度
              curveness: 0.3, //尾迹线条曲直度
            },
            symbol: ['none', 'circle'], //飞线起点终点点位样式
            symbolSize: 10, // 飞线起点终点点位大小
            data: lineData
          },
          {
            type: 'scatter', // 散点图
            coordinateSystem: 'geo', // 基于地理坐标系
            data: scatterData,
            label: {
              // formatter: '{b}',
              position: 'top',
              show: true,
              formatter: [
                '{a|{b}}'
              ].join('\n'),

              rich: {
                a: {
                  align: 'center',
                  color: 'white',
                  backgroundColor: {
                    image: bg,
                  },
                  // backgroundColor: '#01e9ff',
                  borderRadius: 5 ,
                  padding: [0, 5, 0, 5],
                  height: 30
                }
              }
            },
            // 你可以自定义标点样式
            symbol: 'pin',
            symbolSize: 30,
            zlevel: 4,
            itemStyle: {
              color: '#ff9100',
            },
            emphasis: {
              label: {
                show: true
              }
            },
            animation: false // 关闭动画
          },
          {
            type: 'effectScatter',
            zlevel: 1,
            coordinateSystem: 'geo',
            emphasis: {
              label: {
                show: true,
                position: 'top',
                color: '#fff',
                formatter: '{b|{b}}',
              },
            },
            data: scatterData.map(item=>item.value),
            symbol: 'circle',
            symbolSize: function (value){
              // 中心点的标记大
              if(JSON.stringify(value) === JSON.stringify(_this.mapCenter)){
                return [20,10]
              }
              return [10, 5]
            },
            itemStyle: {
              color: 'rgba(0,253,225,0.8)',
              // color: 'rgb(100,180,226)',
              shadowBlur: 10,
              shadowColor: 'rgba(66,148,219,0.83)',
            },
            effectType: 'ripple',
            showEffectOn: 'render', //emphasis移入显示动画，render一开始显示动画
            rippleEffect: {
              scale: 5,
              brushType: 'stroke',
            },
          }
        ]
      };
      this.myChart.setOption(this.option);
      this.myChart.on('click', function (params) {
        // 控制台打印点击的数据
        if(params.componentType === 'series' && params.componentSubType==='scatter'){
          localStorage.setItem('map-jump-staion',params.data.stationCode)
          // TODO 跳转页面
          _this.$router.push({path: "cloudDataQuery"})
        }
        // 你可以在这里添加你的逻辑代码
      });
    }
  }

}
</script>

<style scoped lang="scss">

</style>
