<template>
  <!-- 首页3D地图 -->
  <div id="distributionDiv"></div>
</template>

<script>
  export default {
    name: 'mapStore',
    data() {
      return {}
    },
    mounted() {
      // 注册贵州省地图
      this.getDistributionOptions()
    },
    methods: {
      lookVideoGo(value) {
        this.$emit('lookVideoGo', value)
      },
      getDistributionOptions() {
        const guizhouJson = require("@/assets/guizhou.json");
        this.$echarts.registerMap("guizhou", guizhouJson);
        var img2 = require("@/assets/frame.png");
        var geoCoordMap = {
          '贵阳市': [106.628201, 26.646694],
          '安顺市': [105.936125, 26.241928],
          '六盘水市': [104.830508, 26.592496],
          '毕节市': [105.284023, 27.301289],
          '遵义市': [106.944166, 27.690791],
          '黔东南': [107.976125, 26.583076],
          '铜仁市': [109.193506,27.717859],
          '黔西南': [104.914189,25.091848],
          '黔南': [107.516374,26.257243],
        }
        var customerBatteryCityData = [{
            name: "贵阳市",
            value: 1,
            fdl: 99,
            tds: 1,
            fds: 98
          },
          {
            name: "安顺市",
            value: 1,
            fdl: 99,
            tds: 1,
            fds: 98
          },
          {
            name: "六盘水市",
            value: 1,
            fdl: 99,
            tds: 1,
            fds: 98
          },
          {
            name: "毕节市",
            value: 1,
            fdl: 99,
            tds: 1,
            fds: 98
          },
          {
            name: "遵义市",
            value: 1,
            fdl: 99,
            tds: 1,
            fds: 98
          },
          {
            name: "黔东南",
            value: 1,
            fdl: 99,
            tds: 1,
            fds: 98
          },
          {
            name: "黔南",
            value: 1,
            fdl: 10,
            tds: 1,
            fds: 98
          },
          {
            name: "铜仁市",
            value: 1,
            fdl: 20,
            tds: 1,
            fds: 98
          },
          {
            name: "黔西南",
            value: 1,
            fdl: 54,
            tds: 1,
            fds: 98
          },
        ]
        // options
        const distributionOptions = {
          tooltip: {
            trigger: 'item',
            triggerOn: 'click',
            showDelay: 0, //浮层显示的延迟
            transitionDuration: 0.2, // 提示框浮层的移动动画过渡时间
            enterable: true,
            formatter: function(item) {
              if (item.componentSubType == 'map') {
                // 详情
                // console.log('详情')
                return;
              }
              if (item.data) {
                var tipHtml = '';
                tipHtml =
                  '<div style="padding: 10px;font-size: 16px;height: 150px;line-height: 30px;background:#3077ca;opacity: 0.75;border-radius: 3px;color:#fff">' +
                  item.data[2].name + '&nbsp;&nbsp;&nbsp;<br />' +
                  '门店数量&nbsp;&nbsp;' + item.data[2].fdl + '个' + '&nbsp;&nbsp;<br/>' +
                  '不合格数&nbsp;&nbsp;' + item.data[2].tds + '&nbsp;&nbsp;<br/>' +
                  '合格数&nbsp;&nbsp;' + item.data[2].fds + '&nbsp;&nbsp;<br/>' +
                  '</span><button onclick="lookVideoGo(' + item.data[2].fds + ')">查看门店</button></div>';
                return tipHtml;
              }
            },
            // position: [10, 10],
            backgroundColor: "#fff"
          },
          geo: [{
              map: "guizhou",
              aspectScale: 1,
              zoom: 0.65,
              layoutCenter: ["50%", "46%"],
              layoutSize: "170%",
              show: true,
              roam: false,
              label: {
                show: false,
                color: '#ffffff',
                emphasis: {
                  show: false,
                },
              },
              itemStyle: {
                normal: {
                  areaColor: {
                    type: "linear",
                    x: 1200,
                    y: 0,
                    x2: 0,
                    y2: 0,
                    colorStops: [{
                        offset: 0,
                        color: "rgba(3,27,78,0.75)", // 0% 处的颜色
                      },
                      {
                        offset: 1,
                        color: "rgba(58,149,253,0.75)", // 50% 处的颜色
                      },
                    ],
                    global: true, // 缺省为 false
                  },
                  borderColor: "#c0f3fb",
                  borderWidth: 0.8,
                },
                emphasis: {
                  show: false,
                  color: "#fff",
                  areaColor: "rgba(0,254,233,0.6)",
                },
              }
            },
            // 重影
            {
              type: "map",
              map: "guizhou",
              zlevel: -1,
              aspectScale: 1,
              zoom: 0.65,
              layoutCenter: ["50%", "47%"],
              layoutSize: "170%",
              roam: false,
              silent: true,
              itemStyle: {
                normal: {
                  borderWidth: 1,
                  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: "guizhou",
              zlevel: -2,
              aspectScale: 1,
              zoom: 0.65,
              layoutCenter: ["50%", "48%"],
              layoutSize: "170%",
              roam: false,
              silent: true,
              itemStyle: {
                normal: {
                  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: "guizhou",
              zlevel: -3,
              aspectScale: 1,
              zoom: 0.65,
              layoutCenter: ["50%", "49%"],
              layoutSize: "170%",
              roam: false,
              silent: true,
              itemStyle: {
                normal: {
                  borderWidth: 1,
                  borderColor: "rgba(58,149,253,0.4)",
                  shadowColor: "rgba(29, 111, 165,1)",
                  shadowOffsetY: 15,
                  shadowBlur: 10,
                  areaColor: "rgba(5,21,35,0.1)",
                },
              },
            },
            {
              type: "map",
              map: "guizhou",
              zlevel: -4,
              aspectScale: 1,
              zoom: 0.65,
              layoutCenter: ["50%", "50%"],
              layoutSize: "170%",
              roam: false,
              silent: true,
              itemStyle: {
                normal: {
                  borderWidth: 5,
                  borderColor: "rgba(5,9,57,0.8)",
                  shadowColor: "rgba(29, 111, 165,0.8)",
                  shadowOffsetY: 15,
                  shadowBlur: 10,
                  areaColor: "rgba(5,21,35,0.1)",
                },
              },
            },
          ],
          series: [
            // map
            {
              geoIndex: 0,
              showLegendSymbol: true,
              type: 'map',
              roam: true,
              label: {
                normal: {
                  show: false,
                  textStyle: {
                    color: '#fff'
                  }
                },
                emphasis: {
                  show: false,
                  textStyle: {
                    color: '#fff'
                  }
                }
              },
              itemStyle: {
                normal: {
                  borderColor: '#2ab8ff',
                  borderWidth: 1.5,
                  areaColor: '#12235c'
                },
                emphasis: {
                  areaColor: '#2AB8FF',
                  borderWidth: 0,
                  color: 'red'
                }
              },
              map: 'henan', // 使用
              // data: customerBatteryCityData
              // data: this.difficultData //热力图数据   不同区域 不同的底色
            },
            //柱状体的主干
            {
              type: 'lines',
              zlevel: 5,
              effect: {
                show: false,
                symbolSize: 5 // 图标大小
              },
              lineStyle: {
                width: 6, // 尾迹线条宽度
                color: 'rgb(22,255,255, .6)',
                opacity: 1, // 尾迹线条透明度
                curveness: 0 // 尾迹线条曲直度
              },
              label: {
                show: 0,
                position: 'end',
                formatter: '245'
              },
              silent: true,
              data: lineData()
            },
            // 柱状体的顶部
            {
              type: 'scatter',
              coordinateSystem: 'geo',
              geoIndex: 0,
              zlevel: 5,
              label: {
                normal: {
                  show: true,
                  formatter: function(params) {
                    var name = params.data[2].name
                    var value = params.data[2].fdl
                    var text = `{tline|门店数量}:{fline|${value}个}`
                    return text;
                  },
                  color: '#fff',
                  rich: {
                    fline: {
                      // padding: [0, 25],
                      color: '#fff',
                      fontSize: 14,
                      fontWeight: 400
                    },
                    tline: {
                      // padding: [0, 27],
                      color: '#ABF8FF',
                      fontSize: 12,
                    },
                  }
                },
                emphasis: {
                  show: true
                }
              },
              itemStyle: {
                color: '#00FFF6',
                opacity: 1
              },
              symbol: 'image://' + img2,
              symbolSize: [100, 50],
              symbolOffset: [0, -20],
              z: 999,
              data: scatterData()
            },
            // 柱状体的底部
            {
              geoIndex: 0,
              zlevel: 4,
              type: 'effectScatter',
              coordinateSystem: 'geo',
              rippleEffect: {
                scale: 10,
                brushType: 'stroke',
              },
              showEffectOn: 'render',
              itemStyle: {
                normal: {
                  color: '#00FFFF',
                }
              },
              label: {
                normal: {
                  formatter: '{b}',
                  position: 'bottom',
                  color: '#fff',
                  fontSize: 12,
                  distance: 10,
                  show: true,
                },
              },
              symbol: 'circle',
              symbolSize: [10, 5],
              itemStyle: {
                // color: '#F7AF21',
                color: 'rgb(22,255,255, 1)',
                opacity: 1
              },
              data: scatterData2()
            },
            // 底部外框
            {
              type: 'scatter',
              coordinateSystem: 'geo',
              geoIndex: 0,
              zlevel: 4,
              label: {
                show: false
              },
              symbol: 'circle',
              symbolSize: [1, 1],
              itemStyle: {
                color: {
                  type: 'radial',
                  x: 0.5,
                  y: 0.5,
                  r: 0.5,
                  colorStops: [{
                      offset: 0,
                      color: 'rgb(22,255,255, 0)' // 0% 处的颜色
                    },
                    {
                      offset: .75,
                      color: 'rgb(22,255,255, 0)' // 100% 处的颜色
                    },
                    {
                      offset: .751,
                      color: 'rgb(22,255,255, 1)' // 100% 处的颜色
                    },
                    {
                      offset: 1,
                      color: 'rgb(22,255,255, 1)' // 100% 处的颜色
                    }
                  ],
                  global: false // 缺省为 false
                },
                opacity: 1
              },
              silent: true,
              data: scatterData2()
            }
          ]
        };

        // 动态计算柱形图的高度（定一个max）
        function lineMaxHeight() {
          const maxValue = Math.max(...customerBatteryCityData.map(item => item.value))
          return 0.3
        }
        // 柱状体的主干
        function lineData() {
          return customerBatteryCityData.map((item) => {
            return {
              coords: [geoCoordMap[item.name],
                [geoCoordMap[item.name][0], geoCoordMap[item.name][1] + item.value * lineMaxHeight()]
              ]
            }
          })
        }
        // 柱状体的顶部
        function scatterData() {
          return customerBatteryCityData.map((item) => {
            return [geoCoordMap[item.name][0], geoCoordMap[item.name][1] + item.value * lineMaxHeight(), item]
          })
        }
        // 柱状体的底部
        function scatterData2() {
          return customerBatteryCityData.map((item) => {
            return {
              name: item.name,
              value: geoCoordMap[item.name]
            }
          })
        }

        var myChart = this.$echarts.init(document.getElementById('distributionDiv'));
        myChart.setOption(distributionOptions);
        window.onresize = function() {
          myChart.resize();
        }
        window.lookVideoGo = this.lookVideoGo;
      },
    }
  }
</script>

<style lang="scss" scoped>
  #distributionDiv {
    width: 100%;
    height: 100%;
  }
</style>
