<template>
  <div id="map" class="map-item"></div>
</template>
<script lang="ts">
import { defineComponent } from "vue";
import * as echarts from "echarts";
// import { getMapGeoData, getMapPointList } from "../service";
import getMapGeoData from "./mapGeoData.js";
import mapPointList from "./mapPointList";
import mapFiveData from "../Performance/mock";
import { mapState } from "vuex";

const xAxisValue = [
  "杭州市",
  "宁波市",
  "温州市",
  "湖州市",
  "嘉兴市",
  "绍兴市",
  "金华市",
  "衢州市",
  "舟山市",
  "台州市",
  "丽水市",
];
export default defineComponent({
  data() {
    return {
      pointList: [],
      mapEcharts: null,
      fiveItems: {},
      cityScore: [],
    };
  },
  watch: {
    // 更新地图数据
    curDataType(val) {
      if (this.mapEcharts) {
        this.mapEcharts.setOption(this.options());
      }
    }
  },
  computed: {
    ...mapState({
      curDataType: (state) => state.curDataType,
    }),
    activeMapData() {
      return mapFiveData[this.curDataType];
    },
  },
  mounted() {
    // if(this.curDataType == '2022Two'){
    //   this.fiveItems = mapFiveData;
    // }
    this.initEcharts();
  },
  methods: {
    async initEcharts() {
      // const { data: getMapData } = await getMapGeoData();
      // const { data: pointList } = await getMapPointList();
      const { data: getMapData } = getMapGeoData;
      const { data: pointList } = mapPointList;

      echarts.registerMap("ZJ", getMapData);
      const mapEcharts = echarts.init(document.getElementById("map"));

      mapEcharts.showLoading({ color: "#fff" });
      mapEcharts.on("click", (params) => { this.mapClickHandle(params) });

      this.pointList = pointList || [];
      setTimeout(() => {
        mapEcharts.setOption(this.options());
        mapEcharts.hideLoading();
        this.mapEcharts = mapEcharts;
      }, 400);
    },

    // 点击事件
    mapClickHandle(data) {
      // console.log('点击', data);
      if (data.name == '杭州市' && this.curDataType == '2022Two') {
        // this.$emit('mapClick',)
      }
    },
    // 数据处理
    dataFormat() {
      let mapData = xAxisValue.map(name => { return { name: name } });
      const fiveItemBgColor = {
        level_1: "#23bcf9",
        level_2: "#67bbf9",
        level_3: "#0ecedd",
        level_4: "#eca933",
        level_5: "#4198ff",
      }
      mapData.map((item, i) => {
        let score = 0;
        let fiveItems = Object.keys(this.activeMapData).map(key => {
          score += this.activeMapData[key].value[i];
          return {
            name: this.activeMapData[key].name,
            type: this.activeMapData[key].type,
            fraction: this.activeMapData[key].value[i],
            bgColor: fiveItemBgColor[this.activeMapData[key].type]
          }
        })
        item.fiveItems = fiveItems;
        item.score = score.toFixed(1);
      })
      this.cityScore = mapData;
      return mapData;
    },
    // options
    options() {
      const cityScore = this.dataFormat();
      function liHTml(fiveItems) {
        let fiveScoreHtml = '';
        fiveItems.map(data => {
          fiveScoreHtml += `<div class="dataLi"><span class="circular" style="background-color:${data.bgColor}" ></span><span class="name">${data.name}</span> <span class="branchNum">${data.fraction}</span><span class="branch">分</span></div>`
        })
        //   `<div class="dataLi">
        //   <span class="circular" ></span>
        //    <span class="name">${cityData.fiveItems[i].name}</span> 
        //    <span class="branchNum">${cityData.fiveItems[i].fraction}</span>
        //   <span class="branch">分</span>
        // </div>`
        //  console.log(JSON.stringify(fiveScoreHtml),'555');
        return fiveScoreHtml
      }

      function mapText(data) {
        const cityData = cityScore.filter(item => data.name == item.name)[0];
        let titHtml = `<div class="tit">
        <span class="titIcon"></span>
        <span class="cityName">${cityData.name}</span>
        <span class="titBranchNum"> ${cityData.score}</span>
        <span class="branch">分</span></div>`
        let fiveScoreHtml = liHTml(cityData.fiveItems);
        let html = `<div class="mapTooltip">` + titHtml + fiveScoreHtml + `</div>`
        return html;
      }
      return {
        // tooltip 作用在series 中的数据
        tooltip: {
          backgroundColor: '#054593',
          // opacity: '85%',
          // borderRadius: '3px',
          // boxShadow:'0px 2.28px 6.83px rgba(19, 65, 132, 0.15)',
          textStyle: {
            color: "#fff",
            fontSize: 16,
            align: "left"
          },
          trigger: "item",
          formatter: function (params) {
            return mapText(params.data);
          },
        },
        // geo 设置 tooltip 无用
        geo: {
          map: "ZJ",
          roam: false,
          label: {
            normal: {
              show: false,
            },
            emphasis: {
              show: false,
            },
          },
          // <----选中效果
          select: {
            label: {
              show: false,
            },
            itemStyle: {
              color: '#2581c3'
            }
          },
          // --->
          itemStyle: {
            normal: {
              areaColor: "#0f4c8f",
              borderColor: "#00daf6",
              shadowColor: "#122f48",
              borderWidth: 1,
              shadowOffsetX: 3, // 阴影偏移
              shadowOffsetY: 2, // 阴影偏移
              shadowBlur: 2, // 外边框阴影
            },
            emphasis: {
              color: "#116eb1", // 悬浮背景
            },
          },
        },
        grid: {
          top: "0",
          left: "0%",
          right: "0%",
          bottom: "3%",
          containLabel: true,
        },
        series: [
          // 散点
          {
            type: "effectScatter",
            coordinateSystem: "geo",
            symbol: "circle",
            showEffectOn: "render",

            // zlevel: 2,
            symbolOffset: [0, 0],
            label: {
              normal: {
                show: true,
                position: "right",
                color: "#ffffff",
                formatter: "{b}",
                fontWeight: "bold",
              },
              emphasis: {
                show: true,
                color: "#00daf6",
              },
            },
            rippleEffect: {
              scale: 4,
              number: 3
            },
            itemStyle: {
              color: "#00daf6",
              // color: "red"
            },
            symbolKeepAspect: true,
            // symbol: imgDatUrl,

            symbolSize: 7,
            data: this.pointList,
          },
          {
            type: 'map',
            map: "ZJ",
            geoIndex: 0,
            aspectScale: 0.75, //长宽比
            showLegendSymbol: false, // 存在legend时显示
            label: {
              normal: {
                show: false,
              },
              emphasis: {
                show: false,
                textStyle: {
                  color: '#fff',
                },
              },
            },
            roam: true,
            itemStyle: {
              normal: {
                show: false,
                areaColor: '#031525',
                borderColor: '#3B5077',
              },
              emphasis: {
                show: false,
                areaColor: '#2B91B7',
              },
            },
            animation: false,
            data: this.pointList,
          },
          //   type: 'effectScatter', // 类型
          //   coordinateSystem: 'geo', // 该系列使用的坐标系 可选: 'cartesian2d','polar','geo'
          //   // 标记的图形, 标记类型包括 'circle', 'rect', 'roundRect', 'triangle', 'diamond',
          //   // 'pin', 'arrow', 'none'
          //   symbol: 'circle',
        ],
      };
    },
  },
  unmounted() {
    if (!this.mapEcharts) {
      return;
    }
    this.mapEcharts.dispose();
    this.mapEcharts = null;
  },
});
</script>

<style >
/* // 地图 tooltip format */
.mapTooltip .titIcon {
  display: inline-block;
  width: 3px;
  height: 13px;
  background-color: #10f9ff;
  margin-right: 3px;
}

.mapTooltip .cityName {
  width: 47.16px;
  height: 22.34px;
  font-family: AlibabaPuHuiTi-Medium;
  color: #10f9ff;
  font-size: 16px;
  line-height: 19.2px;
}

.mapTooltip .circular {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 4px;
  margin-right: 3px;
}

.mapTooltip .name {
  width: 84.14px;
  height: 19.61px;
  font-family: AlibabaPuHuiTiR-GBpc-EUC-H;
  color: #ffffff;
  font-size: 14px;
  line-height: 16.8px;
}

.mapTooltip .titBranchNum {
  width: 28.16px;
  height: 22.2px;
  font-family: AlibabaPuHuiTi-Medium;
  color: #10f9ff;
  font-size: 16px;
  line-height: 19.2px;
}

.mapTooltip .branchNum {
  width: 16.14px;
  height: 20.12px;
  font-family: AlibabaPuHuiTi-Medium;
  color: #19ecff;
  font-size: 14px;
  line-height: 16.8px;
}

.mapTooltip .branch {
  width: 11.11px;
  height: 15.08px;
  font-family: AlibabaPuHuiTiR-GBpc-EUC-H;
  color: #ffffff;
  font-size: 11px;
  line-height: 13.2px;
  margin-left: 5px;
}

/*  */
.map-item canvas:first-of-type {
  transform: scaleY(1.1) scaleX(1.3);
}
</style>
<style lang="scss" scoped>
.map-item {
  flex: 1;
  box-sizing: border-box;
  height: 100%;
}
</style>
