<template>
  <div class="h-full">
    <div class="flex align-middle">
      <el-date-picker v-model="year" type="year" placeholder="选择年">
      </el-date-picker>
      <el-button type="primary" style="margin-left: 4px">导出</el-button>
      <el-button @click="back" type="text">返回></el-button>
    </div>
    <div style="display: flex; justify-content: space-between; height: 100%">
      <div id="hy-map" style="width: 65%; height: 97%"></div>
      <div class="item-container">
        <div class="item" v-for="(ite, i) in itemData" :key="i">
          <div class="val">121</div>
          <div class="lab">数据</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
const mapEnum = {
  衡阳市: require("./衡阳市.json"),
  常宁市: require("./常宁市.json"),
  衡东县: require("./衡东县.json"),
  衡南县: require("./衡南县.json"),
  衡山县: require("./衡山县.json"),
  衡阳县: require("./衡阳县.json"),
  耒阳市: require("./耒阳市.json"),
  南岳区: require("./南岳区.json"),
  祁东县: require("./祁东县.json"),
  石鼓区: require("./石鼓区.json"),
  雁峰区: require("./雁峰区.json"),
  蒸湘区: require("./蒸湘区.json"),
  珠晖区: require("./珠晖区.json"),
};
export default {
  name: "map",
  data() {
    return {
      year: "2024",
      loading: true,
      itemData: [{}, {}, {}, {}],
    };
  },
  mounted() {
    this.initCharts();
  },
  methods: {
    back() {
      this.initCharts();
    },
    initCharts(json = require("./衡阳市.json")) {
      const chartDom = document.querySelector("#hy-map");
      const myChart = echarts.init(chartDom);
      echarts.registerMap("js", json);
      var option = {
        tooltip: {
          trigger: "item",
          formatter: function (params) {
            if (
              params.name != "台湾" &&
              params.name != "香港" &&
              params.name != "澳门" &&
              params.name.length > 0
            ) {
              return params.name + "<br/>数值：" + params.value;
            }
          },
        },
        visualMap: {
          show: false,
          min: 0,
          max: 100,
          text: ["低", "高"],
          left: 10,
          y: "center",
          calculable: true,
          inRange: {
            color: ["#3a92fe", "#173881"],
          },
          itemWidth: 10,
          itemHeight: 100,
          textStyle: {
            color: "#fff",
          },
        },
        geo: [
          // {
          //   show: true,
          //   map: "js",
          //   // center: [114, 32.9],
          //   z: 4,
          //   roam: false,
          //   zoom: 1.2,
          //   itemStyle: {
          //     shadowColor: "#0c1c4e",
          //     shadowOffsetX: 7,
          //     shadowOffsetY: 7,
          //   },
          // },
          // {
          //   show: true,
          //   map: "js",
          //   // center: [114, 32.9],
          //   z: 3,
          //   roam: false,
          //   zoom: 1.2,
          //   itemStyle: {
          //     shadowColor: "#3584EC",
          //     shadowOffsetX: 8,
          //     shadowOffsetY: 8,
          //   },
          // },
        ],
        series: [
          {
            type: "map",
            mapType: "js", //自定义扩展图表类型
            // center: [104, 32.9],
            roam: false,
            zoom: 1.2,
            z: 10,
            label: {
              normal: {
                show: true,
                formatter: "{t|}\n\n{b}",
                textStyle: {
                  color: "#fff",
                },
                rich: {
                  t: {
                    width: 13,
                    height: 13,
                    borderRadius: 10,
                    backgroundColor: "#fff",
                  },
                },
              },
              emphasis: {
                show: true,
                textStyle: {
                  color: "#000",
                },
              },
            },
            //单选
            selectedMode: "single",
            itemStyle: {
              normal: {
                areaColor: "#5a6fc0",
                // areaColor: "rgba(11,42,96,0.8)",
                borderColor: "rgba(11,42,96,0.4)",
                // borderColor: "#2c71d7",
                borderWidth: 2,
              },
              emphasis: {
                areaColor: "rgba(11,42,96,0.8)",
              },
            },
            select: {
              label: {
                // 选中区域的label(文字)样式
                color: "#fff",
              },
              itemStyle: {
                areaColor: "rgba(11,42,96,0.8)",
              },
            },
            data: [],
          },
        ],
      };
      myChart.setOption(option);
      myChart.on("click", (params) => {
        console.log(params, "params");
        this.initCharts(mapEnum[params.name]);
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.item-container {
  // height: 20%;
  height: 97%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  // flex-direction: column;
  // align-content: space-between;
  // justify-content: space-between;
  .item {
    flex: 0 0 50%;
    text-align: center;
    display: flex;
    flex-direction: column;
    color: #fff;
    align-items: center;
    .val {
      width: 65px;
      height: 65px;
      text-align: center;
      line-height: 65px;
      color: #fff;
      border-radius: 50%;
      background-image: linear-gradient(to bottom, #a3c1ee, #2c71d7);
      margin-bottom: 8px;
    }
  }
}
</style>
