<script setup>
import { onMounted, reactive, ref, inject, nextTick } from "vue";
import * as echarts from "echarts";
import mitt from "@/utils/mitt";
import luxian from "@/assets/json/luxian.json";
import hejiang from "@/assets/json/hejiang.json";
import xuyong from "@/assets/json/xuyong.json";
import gulin from "@/assets/json/gulin.json";
import jiangyang from "@/assets/json/jiangyang.json";
import longma from "@/assets/json/longma.json";
import naxi from "@/assets/json/naxi.json";
import luxian_geo from "@/utils/luxian_geo.js";
import xuyong_geo from "@/utils/xuyong_geo.js";
import jiangyang_geo from "@/utils/jiangyang_geo.js";
import { useAppStore } from "@/store/app.js";
import { useUserStore } from "@/store/user.js";

const appStore = useAppStore();
const userStore = useUserStore();

const props = defineProps({
  list: {
    type: Object,
    default: () => [],
  },
});

const mapType = reactive({
  name: "",
  json: "",
});

const changeType = (name = "luxian") => {
  mapType.name = name;
  if (name == "luxian") mapType.json = luxian;
  if (name == "hejiang") mapType.json = hejiang;
  if (name == "xuyong") mapType.json = xuyong;
  if (name == "gulin") mapType.json = gulin;
  if (name == "jiangyang") mapType.json = jiangyang;
  if (name == "longma") mapType.json = longma;
  if (name == "naxi") mapType.json = naxi;
};

let dataValue = [];

const customFormatter = (params) => {
  // console.log(params.data);
  // return `{img|${params.data.street_name}}\n{t|店铺${params.data.mer_count}个, 团队${params.data.service_group_count}个}`
  return "";
};

const initDataValue = () => {
  dataValue.forEach((item) => {
    item.label = {
      show: true, // 显示标签
      formatter: customFormatter, // 标签内容，这里使用{name}表示数据项的name属性
      fontSize: 12, // 字体大小
      fontWeight: "bold", // 字体粗细
      color: "#fff", // 字体颜色
      offset: [-50, -40], // 标签偏移量，可根据需要调整
      rich: {
        img: {
          backgroundColor: {
            image:
              "https://lihai001.oss-cn-chengdu.aliyuncs.com/def/205f0202311291015185408.png",
          },
          height: 40,
          width: 140,
          color: "#fff",
          fontSize: 14,
          lineHeight: 14,
          fontFamily: "ifonts",
          align: "center",
          padding: [0, 0, 20, 0],
        },
        t: {
          fontSize: 10,
          align: "center",
        },
      },
    };
  });
};

const echartsRef = ref(null);
let chart = null;

const initMap = () => {
  // 基于DOM元素初始化echarts实例
  if (chart == null) {
    chart = echarts.init(echartsRef.value);
  }
  echarts.registerMap(mapType.name, mapType.json);

  let option = {
    animation: false,
    title: {
      text: mapType.name,
      textStyle: {
        color: "#fff",
        fontSize: 20,
      },
      top: "10%",
      left: "10%",
    },
    //geo方式地理坐标系组件。
    geo: [
      {
        map: mapType.name,
        zoom: 1.0,
        label: {
          show: false,
        },
        emphasis: {
          disabled: true,
        },
        select: {
          disabled: true,
        },
        // aspectScale:0.75, //长宽比
        //   roam: true, //是否允许缩放
        itemStyle: {
          normal: {
            // color: '#546686', //地图背景色
            borderColor: "#fff", //省市边界线00fcff 516a89
            borderWidth: 1,
            areaColor: "#3f5171",
            shadowColor: "#5bdbf6",
            shadowOffsetX: 5,
            shadowOffsetY: 10,
            // shadowBlur: 2
            shadowBlur: 20,
          },
        },
      },
      //第一层投影
      {
        map: mapType.name,
        zlevel: -1,
        zoom: 1.01, //当前视角的缩放比例
        roam: false, //是否开启平游或缩放
        show: true,
        tooltip: {
          show: false, // 取消鼠标移上去时的文字提示
        },
        label: {
          show: false,
        },
        emphasis: {
          disabled: true,
        },
        select: {
          disabled: true,
        },
        itemStyle: {
          normal: {
            borderJoin: "round",
            borderColor: "rgba(176,228,252,1)",
            borderWidth: 3,
            areaColor: "rgba(133,188,232,1)",
            shadowColor: "rgba(133,188,232,.7)",
            shadowOffsetX: 0,
            shadowOffsetY: 0,
            shadowBlur: 25,
          },
          emphasis: {
            show: false,
          },
        },
      },
    ],
    tooltip: {
      trigger: "item",
      formatter: function (params) {
        let obj = dataValue.find((item) => item.street_name == params.name);
        if (!obj) {
          obj = params.data;
        }
        if (obj) {
          return `<div 
                    style="background-image: url(\'/src/assets/img/item-box.png\');
                    background-size: 100% 100%;
                    display: flex;
                    justify-content: space-evenly;
                    align-items: center;
                    width: 180px;
                    height: 80px;">
                      <div style="font-size: 15px;font-family: 'ifonts';">${
                        obj?.street_name || ""
                      }</div>
                      <div style="font-size: 12px;">
                        <p style="padding: 0;margin: 0">店铺:${
                          obj?.mer_count || "0"
                        }个</p>  
                        <p style="padding: 0;margin: 0">团队:${
                          obj?.service_group_count || "0"
                        }个</p>  
                      </div>
                    </div>`;
        } else return "";
      },
      position: "top",
      // extraCssText: 'background-color: transparent; border: none;pdding: 0;', // 设置额外的 CSS 样式
      backgroundColor: "rgba(0, 156, 255, 0)", //设置背景颜色
      borderColor: "rgba(0, 156, 255, 0)",
      padding: 0,
      textStyle: {
        color: "#fff",
      },
    },
    series: [
      {
        type: "map",
        map: mapType.name,
        label: {
          emphasis: {
            show: false,
          },
          color: "rgba(0,0,0,0)",
        },
        emphasis: {
          disabled: false,
        },
        select: {
          disabled: true,
        },
        itemStyle: {
          normal: {
            areaColor: "#3f5171",
            borderColor: "#5bdbf6",
            borderWidth: 1,
          },
          emphasis: {
            areaColor: "#0680ca", // 鼠标经过时的背景色
          },
        },
      },
      {
        name: "",
        type: "scatter",
        coordinateSystem: "geo",
        data: dataValue,
        symbol:
          "image://https://lihai001.oss-cn-chengdu.aliyuncs.com/def/6eb37202311281655342626.png",
        symbolSize: [40, 30],
        hoverSymbolSize: [60, 45],
        label: {
          formatter: "",
          position: "center",
          show: false,
        },
        emphasis: {
          label: {
            show: false,
          },
        },
      },
    ],
  };
  option = {
    geo: [
      {
        type: "map",
        map: mapType.name,
        aspectScale: 1,
        zoom: 1,
        layoutCenter: ["50%", "51%"],
        layoutSize: "110%",
        roam: false,
        label: {
          emphasis: {
            show: false,
          },
        },
        show: true,
        map: mapType.name,
        zoom: 1,
        aspectScale: 1,
        roam: false,
        itemStyle: {
          normal: {
            areaColor: "transparent",
            borderColor: "#5AD0E0",
          },
          emphasis: {
            areaColor: {
              type: "radial", // linear 线性渐变  radial径向渐变
              x: 0.5, // 0.5为正中心，如果小于渐变中心靠左
              y: 0.5, // 0.5为正中心，如果小于渐变中心靠上
              r: 1,
              colorStops: [
                {
                  offset: 0,
                  color: "#A46759", // 0% 处的颜色
                },
                {
                  offset: 0.1,
                  color: "#A46759", // 0% 处的颜色
                },

                {
                  offset: 1,
                  color: "#FFB821", // 100% 处的颜色
                },
              ],
            },

            // borderWidth: 0
          },
        },
        tooltip: {
          trigger: "item",
          formatter: function (params) {
            let obj = dataValue.find((item) => item.street_name == params.name);
            if (!obj) {
              obj = params.data;
            }
            if (obj) {
              return `<div 
                        style="background-image: url(\'/src/assets/img/item-box.png\');
                        background-size: 100% 100%;
                        display: flex;
                        justify-content: space-evenly;
                        align-items: center;
                        width: 180px;
                        height: 80px;">
                          <div style="font-size: 15px;font-family: 'ifonts';">${
                            obj?.street_name || ""
                          }</div>
                          <div style="font-size: 12px;">
                            <p style="padding: 0;margin: 0">店铺:${
                              obj?.mer_count || "0"
                            }个</p>  
                            <p style="padding: 0;margin: 0">团队:${
                              obj?.service_group_count || "0"
                            }个</p>  
                          </div>
                        </div>`;
            } else return "";
          },
          position: "top",
          // extraCssText: 'background-color: transparent; border: none;pdding: 0;', // 设置额外的 CSS 样式
          backgroundColor: "rgba(0, 156, 255, 0)", //设置背景颜色
          borderColor: "rgba(0, 156, 255, 0)",
          padding: 0,
          textStyle: {
            color: "#fff",
          },
        },
      },

      {
        type: "map",
        map: mapType.name,
        zlevel: -1,
        aspectScale: 1,
        zoom: 1,
        layoutCenter: ["50%", "51%"],
        layoutSize: "110%",
        roam: false,
        silent: true,

        itemStyle: {
          normal: {
            borderWidth: 1,
            borderColor: "rgba(17, 149, 216,0.6)",
            borderColor: "#5AD0E0",
            shadowColor: "rgba(172, 122, 255,0.5)",
            shadowOffsetY: 5,
            shadowBlur: 15,
            areaColor: "rgba(5,21,35,0.1)",
          },
        },
      },

      {
        type: "map",
        map: mapType.name,
        zlevel: -1,
        aspectScale: 1,
        zoom: 1,
        layoutCenter: ["50%", "52%"],
        layoutSize: "110%",
        roam: false,
        silent: true,

        itemStyle: {
          normal: {
            borderWidth: 1,
            borderColor: "rgba(17, 149, 216,0.6)",
            borderColor: "#5AD0E0",
            shadowColor: "rgba(172, 122, 255,0.5)",
            shadowOffsetY: 5,
            shadowBlur: 15,
            areaColor: "rgba(5,21,35,0.1)",
          },
        },
      },

      // {
      //   type: "map",
      //   map: mapType.name,
      //   zlevel: -2,
      //   aspectScale: 1,
      //   zoom: 1,
      //   layoutCenter: ["50%", "53%"],
      //   layoutSize: "110%",
      //   roam: false,
      //   silent: true,

      //   itemStyle: {
      //     normal: {
      //       borderWidth: 1,
      //       borderColor: "rgba(17, 149, 216,0.4)",
      //       borderColor: "#5AD0E0",
      //       shadowColor: "rgba(172, 122, 255,0.5)",
      //       shadowOffsetY: 5,
      //       shadowBlur: 15,
      //       areaColor: "rgba(5,21,35,0.1)",
      //     },
      //   },
      // },

      {
        type: "map",
        map: mapType.name,
        zlevel: -4,
        aspectScale: 1,
        zoom: 1,
        layoutCenter: ["50%", "53%"],
        layoutSize: "110%",
        roam: false,
        silent: true,

        itemStyle: {
          normal: {
            borderWidth: 5,
            // borderColor: "rgba(11, 43, 97,0.8)",
            borderColor: "rgba(5,9,57,0.8)",
            shadowColor: "rgba(29, 111, 165,0.8)",
            shadowOffsetY: 10,
            shadowBlur: 10,
            areaColor: "rgba(5,21,35,0.1)",
          },
        },
      },
    ],
    tooltip: {
      show: true
    },
    color: '#1f7df5',
    series: [
      {
        name: "地点名称",
        type: "effectScatter",
        coordinateSystem: "geo",
        colorBy: 'series',
        rippleEffect: {
          period: 4, //动画时间，值越小速度越快
          brushType: "fill", //波纹绘制方式 stroke, fill
          scale: 12, //波纹圆环最大限制，值越大波纹越大
          number: 2,
        },
        // 发散点的大小
        symbolSize: function (val) {
          return 4;
          // return val[2] / 10;
        },
        data: dataValue,
      },
    ],
  };
  // 使用配置项显示图表
  chart.setOption(option);
};

const mapInfo = () => {
  let area = appStore.area.find(
    (item) => item.code == appStore.address.areaCode
  );
  let map;
  if (area.name == "泸县") map = luxian_geo;
  if (area.name == "江阳区") map = jiangyang_geo;
  if (area.name == "叙永县") map = xuyong_geo;
  map = JSON.parse(JSON.stringify(map));
  if (appStore.address.streetCode) {
    let street = appStore.street.find(
      (item) => item.code == appStore.address.streetCode
    );
    initStreetMap(street, map);
    dataValue = dataValue.filter(
      (item) => item.street_code == appStore.address.streetCode
    );
  } else {
    mapType.name = area.name;
    mapType.json = map;
  }
};

const initStreetMap = (street, map) => {
  map.features = map.features.filter(
    (item) => item.properties.name == street.name
  );
  mapType.name = street.name;
  mapType.json = map;
};

onMounted(() => {
  dataValue = props.list;
  changeType("xuyong");
  mapInfo();
  // initDataValue();
  setTimeout(() => {
    initMap();
  });
});
</script>

<template>
  <div class="map">
    <div class="echarts" ref="echartsRef"></div>
  </div>
</template>

<style scoped lang="scss">
.map {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  /* background-color: rgba($color: #fff, $alpha: 0.3); */
  .echarts {
    width: 100%;
    height: 100%;
  }
}
</style>
