<script>
import { defineComponent, ref, unref, onMounted, getCurrentInstance } from 'vue'; 
import * as echarts from 'echarts';
import 'echarts-gl';
import cq from '@/assets/json/cq.json';
import bg from '@/assets/images/bg1.jpg';
import { formatCityData } from '@/utils'

export default defineComponent({
  name: 'MapChart1',
  setup() {
    const mapChart = ref()
    const area = ref()

    const { proxy } = getCurrentInstance()


    onMounted(() => {
      mapChart.value = echarts.init(proxy.$refs.mapDom)
      echarts.registerMap('chongqing', cq)
      const option = {
          tooltip: {
            trigger: "item",
            position: "top",
            backgroundColor: "rgba(0, 0, 0, 0.82)",
            textStyle: {
              color: "#33F0FF",
            },
            extraCssText: `z-index: 1000;margin:0px;padding:0px;
    border: 1px solid rgba(61, 115, 255, 0.72);`,
            borderWidth: 0,
          },
        geo3D: [
          {
            show: true,
            map: 'chongqing',
            regions: [
            ],
            regionHeight: 5,
            shading: 'realistic',
            realisticMaterial: {
              detailTexture: ((bg) => {
                const img = document.createElement('img')
                img.src = bg
                return img
              })(bg),
              textureTiling: 1,
            },
            light: {
              //光照阴影
              main: {
                color: "#fff", //光照颜色
                intensity: .7, //光照强度
                shadow: true, //是否显示阴影
                alpha: 60,
                beta: 10
              },
              ambient: {
                intensity: 0.6
              }
            },
            viewControl: {
              distance: 150,
              maxDistance: 150,
              alpha: 50
            },
            emphasis: {
              label: {
                formatter: function (params) {
                  area.value=params.name;
                  return "";
                },
                show: true
              }
            },
          },
        ],
        series: [
        {
            type: 'map3D',
            show: true,
            map: 'chongqing',
            regionHeight: 5,
            itemStyle: {
              color: '#00000020',
              opacity: 1,
              borderWidth: 2,
              borderColor: "#aaa"
            },
            label: {
              show: true,
              textStyle: {
                color: '#fff',
                fontSize: 14,
                fontWeight: 'bold'
              },
            },
            viewControl: {
              distance: 150,
              maxDistance: 150,
              alpha: 50
            },
            data: formatCityData([]).map((item, index) => ({
                ...item,
              itemStyle: {
                color: ['#ff000076', '#ffff0076', '#ffaa0076', '#00ff0076', '#0000ff76'][index % 5]
              },
            }))
          }
        ]
      }
      // bg
      unref(mapChart).setOption(option)
      unref(mapChart).off('click');
      // 点击事件
      unref(mapChart).getZr().on("click",  (params) => {
        mapChart.value.setOption({
          tooltip: {
            trigger: "item",
            position: "top",
            backgroundColor: "rgba(0, 0, 0, 0.82)",
            textStyle: {
              color: "#33F0FF",
            },
            extraCssText: `z-index: 1000;margin:0px;padding:0px;
    border: 1px solid rgba(61, 115, 255, 0.72);`,
            borderWidth: 0,
          },
          geo3D: [
          {
            show: true,
            map: 'chongqing',
            regions: [
            ],
            regionHeight: 5,
            shading: 'realistic',
            realisticMaterial: {
              detailTexture: ((bg) => {
                const img = document.createElement('img')
                img.src = bg
                return img
              })(bg),
              textureTiling: 1,
            },
            light: {
              //光照阴影
              main: {
                color: "#fff", //光照颜色
                intensity: .7, //光照强度
                shadow: true, //是否显示阴影
                alpha: 60,
                beta: 10
              },
              ambient: {
                intensity: 0.6
              }
            },
            viewControl: {
              distance: 150,
              maxDistance: 150,
              alpha: 50
            },
            emphasis: {
              label: {
                formatter: function (params) {
                  area.value=params.name;
                  return '';
                },
                show: true
              }
            },
          },
        ],
          series: [
            {
            type: 'map3D',
            show: true,
            map: 'chongqing',
            regionHeight: 5,
            itemStyle: {
              color: '#00000020',
              opacity: 1,
              borderWidth: 2,
              borderColor: "#aaa"
            },
            label: {
              show: true,
              textStyle: {
                color: '#fff',
                fontSize: 14,
                fontWeight: 'bold'
              },
            },
            viewControl: {
              distance: 150,
              maxDistance: 150,
              alpha: 50
            },
              data: formatCityData([]).map((item, index) => ({
                ...item,
              itemStyle: {
                color: ['#ff000076', '#ffff0076', '#ffaa0076', '#00ff0076', '#0000ff76'][index % 5]
              },
              })).map((item, index) => item.name === area.value ? ({
          ...item,
          itemStyle: {
            color:  ['#ff0000', '#ffff00', '#ffaa00', '#00ff00', '#0000ff'][index % 5]
          }
        }) : item)
            }
          ]
        })
      }, {
        notMerge: true
      })
    })

    return {

    }
  }
})
</script>

<template >
  <div class="map-charts" ref="mapDom"></div>
</template>

<style lang='less'>
body,html {
  // background-color: aliceblue;
}
.map-charts {
  width: 100vw;
  height: 100vh;
}
</style>
