<template>
  <div id="areaChart" class="map"></div>
</template>

<script>
import "echarts-gl";
// import { mapState } from 'vuex';
export default {
  name: "EchartsMap",
  components: {},
  props: {
    mapData: {
      type: Object,
      default: () => {
        return {};
      },
    },
    regionLevel: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      zoomed: false, // 地图是否下钻标识
      evenstList: [],
      eventValue: 0,
      mapQuarterData: [],
      inverse: false,
      textColor: "#ffffff",
      List: [],
      reverseBack: false,
      option: {},
      chart: null,
      oldGeoJson: {},
    };
  },
  computed: {
    // ...mapState({
    //   user: (state) => (Object.keys(state.userInfo).length > 0 ? state.userInfo : JSON.parse(sessionStorage.getItem('userInfo'))),
    // }),
  },
  mounted() {
    this.init();
  },
  beforeDestroy() {
    if (!this.chart) {
      return;
    }
    this.chart.dispose();
    this.chart = null;
  },
  methods: {
    init() {
      this.$echarts.registerMap("YICHUN", this.mapData);
      this.initChart();
    },
    initChart() {
      let that = this;
      that.chart = this.$echarts.init(document.getElementById("areaChart"));
      that.option = {
        series: [
          {
            type: "map3D",
            map: "YICHUN",
            roam: false,
            boxDepth: 150, //地图倾斜度
            regionHeight: 6, //地图高度
            viewControl: {
              distance: 160, //地图视角 控制初始大小
              rotateSensitivity: 0, //禁止旋转
              zoomSensitivity: 0, //禁止缩放
            },
            label: {
              show: true, // 是否显示市
              textStyle: {
                color: "#fff", //文字颜色
                fontSize: 16, //文字大小
                backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
                textShadowColor: "#0940E7",
                textShadowBlur: 5,
                textShadowOffsetX: 2,
                textShadowOffsetY: 2,
              },
            },
            //光照阴影
            light: {
              //光照阴影
              main: {
                color: "#47E8F4", //光照颜色
                intensity: 0.6, //光照强度
                //shadowQuality: 'high', //阴影亮度
                shadow: true, //是否显示阴影
              },
              ambient: {
                intensity: 0.6,
              },
            },
            itemStyle: {
              // color: '', //地图颜色
              borderWidth: 2, //分界线wdith
              borderColor: "#47E8F4", //分界线颜色,
              color: "#26BCF6",
            },
            emphasis: {
              label: {
                show: true, //是否显示高亮
                textStyle: {
                  color: "#fff", //高亮文字颜色
                  fontSize: 20, //文字大小
                },
              },
              itemStyle: {
                color: "#47E8F4", //地图高亮颜色
              },
            },
          },
        ],
      };
      // 渲染地图
      that.chart.setOption(that.option);
      // 单击区域下钻
      that.chart.on("click", (param) => {
        if (
          that.mapData.features[param.event.target.dataIndex].properties
            .level !== "4"
        ) {
          that.chart.dispose();
          that.option.series[0].label = false;
          that.$emit("mapClick", param.event);
        } else {
          that.$emit("mapClicker", param.event);
        }
      });
    },
  },
  watch: {
    mapData: {
      handler(newVal, oldVal) {
        if (newVal) {
          this.oldGeoJson = oldVal;
          this.init();
        }
      },
      deep: true,
    },
  },
};
</script>
<style lang="scss" scoped>
.map {
  width: 100%;
  height: 100%;
}
</style>
