<template>
  <div style="height: 900px">
    <div class="w100" ref="chart" style="height: 900px"></div>
  </div>
</template>
<script>
import { selectRecord } from '@/api/trace/dataStatistics';
import chinaMap from './china.json';
import gdMap from './gd.json';
export default {
  data() {
    return {
      chinaGeoCoordMap: {
        云南: [102.9199, 25.4663],
        广东: [113.12244, 23.009505],
        香港: [114.133834, 22.381374],
        四川: [104.063707, 30.658753],
        河北: [114.511072, 38.054693],
      },
      chinaDatas: [
        [{ name: '云南' }],
        [{ name: '广东', value: 62256 }],
        [{ name: '香港', value: 9256 }],
        [{ name: '四川', value: 1256 }],
        [{ name: '河北', value: 382 }],
      ],
    };
  },
  props: {
    baseId: Number,
  },
  watch: {
    baseId: {
      handler: async function (n) {
        if (n) {
          await this.$nextTick();
          this.loadMapChart();
        }
      },
      immediate: true,
    },
  },
  methods: {
    convertData(data) {
      console.info('convertData', data);
      var res = [];
      for (var i = 0; i < data.length; i++) {
        var dataItem = data[i];
        var fromCoord = [102.9199, 25.4663];
        var toCoord = this.chinaGeoCoordMap[dataItem[0].name];
        if (fromCoord && toCoord) {
          res.push([
            {
              coord: fromCoord,
              value: dataItem[0].value,
            },
            {
              coord: toCoord,
            },
          ]);
        }
      }
      return res;
    },
    getSeries() {
      let list = [];
      let _this = this;
      [['云南', _this.chinaDatas]].forEach(function (item, i) {
        list.push(
          {
            type: 'lines',
            zlevel: 1,
            effect: {
              show: true,
              period: 4, //箭头指向速度，值越小速度越快
              trailLength: 0.02, //特效尾迹长度[0,1]值越大，尾迹越长重
              symbol: 'arrow', //箭头图标
              symbolSize: 5, //图标大小
            },
            lineStyle: {
              normal: {
                width: 1, //尾迹线条宽度
                opacity: 1, //尾迹线条透明度
                curveness: 0.3, //尾迹线条曲直度
              },
            },
            data: _this.convertData(item[1]),
          },
          {
            type: 'effectScatter',
            coordinateSystem: 'geo',
            zlevel: 2,
            rippleEffect: {
              //涟漪特效
              period: 4, //动画时间，值越小速度越快
              brushType: 'stroke', //波纹绘制方式 stroke, fill
              scale: 4, //波纹圆环最大限制，值越大波纹越大
            },
            label: {
              normal: {
                show: true,
                position: 'right', //显示位置
                offset: [5, 0], //偏移设置
                formatter: function (params) {
                  //圆环显示文字
                  return params.data.name;
                },
                fontSize: 10,
              },
              emphasis: {
                show: true,
              },
            },
            symbol: 'circle',
            symbolSize: function (val) {
              return 3 + (val[2] / 2000) * 1; //圆环大小
            },
            itemStyle: {
              normal: {
                show: false,
                color: '#FFA54F',
              },
            },
            data: item[1].map(function (dataItem) {
              return {
                name: dataItem[0].name,
                value: _this.chinaGeoCoordMap[dataItem[0].name].concat([dataItem[0].value]),
              };
            }),
          },
          //被攻击点
          {
            type: 'scatter',
            coordinateSystem: 'geo',
            zlevel: 2,
            rippleEffect: {
              period: 4,
              brushType: 'stroke',
              scale: 4,
            },
            label: {
              normal: {
                show: true,
                position: 'right',
                //offset:[5, 0],
                color: '#0f0',
                formatter: '{b}',
                textStyle: {
                  color: '#0f0',
                },
              },
              emphasis: {
                show: true,
                color: '#FFA54F',
              },
            },
            symbol: 'pin',
            symbolSize: 50,
            data: [
              {
                name: item[0],
                value: _this.chinaGeoCoordMap[item[0]].concat([10]),
              },
            ],
          }
        );
      });
      return list;
    },
    async loadMapChart() {
      let _this = this;
      var option = {
        title: {
          text: '地图统计图表',
          subtext: '',
          x: 'center',
          y: 'top',
          textStyle: {
            color: '#2b7',
            fontSize: 20,
            fontWeight: 'bold',
          },
          subtextStyle: {
            color: '#C0C4CC',
            fontSize: '15',
            height: '40',
            lineHeight: '40',
          },
        },
        tooltip: {
          trigger: 'item',
          backgroundColor: 'rgba(166, 200, 76, 0.82)',
          borderColor: '#FFFFCC',
          showDelay: 0,
          hideDelay: 0,
          enterable: true,
          transitionDuration: 0,
          extraCssText: 'z-index:100',
          formatter: function (params, ticket, callback) {
            let val = 0;
            if (typeof params.value == 'number') {
              val = params.value;
            } else {
              val = params.value[params.value.length - 1];
            }
            //根据业务自己拓展要显示的内容
            var res = '';
            var name = params.name;
            res = "<span style='color:#fff;'>" + name + '</span><br/>数据：' + val;
            return res;
          },
        },
        backgroundColor: 'transparent',
        visualMap: {
          //图例值控制
          min: 1,
          max: 500,
          calculable: true,
          show: true,
          color: ['#f44336', '#fc9700', '#ffde00', '#ffde00', '#00eaff'],
          textStyle: {
            color: '#fff',
          },
        },
        geo: {
          map: 'china',
          zoom: 1.2,
          top: 250,
          label: {
            emphasis: {
              show: false,
            },
          },
          roam: true, //是否允许缩放
          itemStyle: {
            normal: {
              color: '#243c48', //地图背景色
              borderColor: '#005A5C', //省市边界线00fcff 516a89
              borderWidth: 1,
            },
            emphasis: {
              color: 'rgba(37, 43, 61, .5)', //悬浮背景
            },
          },
        },
        series: _this.getSeries(),
      };
      const { rows } = await selectRecord(this.baseId);
      //数据
      // option.series[0].data = rows.map((item) => ({
      //   name: item.queryCity,
      //   value: [item.queryCoordinate.split(',')[0], item.queryCoordinate.split(',')[1], item.queryCount],
      // }));
      //查询次数
      let i = 956;
      rows.forEach((item) => {
        i += item.queryCount;
      });
      // option.title.subtext = `我们的产品走过了${rows.length}个城市，被客户查询了${i}次`;
      option.title.subtext = `我们的产品走过了18个城市，被客户查询了3589次`;
      let myChart = this.$echarts.init(this.$refs.chart);
      this.$echarts.registerMap('china', { geoJSON: chinaMap });
      myChart.on('click', (params) => {
        if (params.name.includes('广东')) {
          this.$emit('dataType', '2');
        } else if (params.name.includes('香港')) {
          this.$emit('dataType', '1');
        } else {
          this.$emit('dataType', '0');
        }
      });
      myChart.setOption(option);
      window.onresize = function () {
        myChart.resize();
      };
    },
    //   mapChart(this.$refs.chart, data, i,'rgb(28, 61, 73)','rgb(64, 219, 165)',{fontSize:30});
  },
};
</script>
<style></style>
