<template>
  <div class="home-museum-map">
    <div class="title wow animate__animated animate__fadeInUp">
      <div class="ch">文博地图</div>
      <div class="en">Museum Map</div>
    </div>
    <div class="wrapper">
      <div class="content wow animate__animated animate__fadeIn">
        <div class="name">{{ curMuseum.name }}</div>
        <div class="intro">
          {{ curMuseum.intro }}
        </div>
        <!-- <div
          class="entrance"
          @click="handleClick(curMuseum)"
          v-show="curMuseum.name"
        >
          <span class="entrance-text">点击进入</span>
          <img src="@/assets/imgs/home/entrance-black.png" alt="" />
        </div> -->
        <EntranceIcon color="#000" @click.native="handleClick(curMuseum)"/>
      </div>

      <div class="map wow animate__animated animate__fadeInRight">
        <div id="map"></div>

        <transition enter-active-class="animate__animated animate__fadeInLeftBig" leave-active-class="animate__animated animate__fadeOutLeftBig">
          <div class="chart-refresh" v-if="regionName !== 'guizhou'">
            <i class="el-icon-refresh-left" @click="initChart()"></i>
          </div>
        </transition>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import guizhou from "../../../../public/geoData/guizhou.json";
import gzInfo from "../../../../public/geoData/gzInfo.json";
import { getMuseumListPage } from "@/api/org";
import EntranceIcon from "@/components/EntranceIcon";
export default {
  name: "MuseumMap",
  components: {
    EntranceIcon,
  },
  data() {
    return {
      myChart: null,
      museumList: [],
      curMuseum: {},
      regionName: "",
    };
  },
  mounted() {
    /* echarts.registerMap("guizhou", guizhou);
    this.changeOptions("guizhou");
    this.$nextTick(() => {
      this.init();
    }); */

    this.init();
    this.setRegisterMap();

    // this.initAnimate();
  },
  methods: {
    async getMuseumData() {
      const params = {
        page: 1,
        limit: 1000,
      };
      // 获取博物馆列表，并构造经纬度
      let res = await getMuseumListPage(params);
      let museumList = res.data.records;
      this.museumList = museumList;
      this.curMuseum = this.museumList[0];

      return museumList;
    },
    setRegisterMap() {
      let gz = guizhou.features;
      let gzDetail = gzInfo.features;

      let gzMap = Object.create(null);
      gz.forEach((r) => {
        const { id, name } = r.properties;
        let code = id.substring(0, 4);
        gzMap[code] = name;
      });

      let maps = Object.create(null);
      gzDetail.forEach((r) => {
        let adcd = r.properties.adcd;
        let code = adcd.substring(0, 4);
        r.properties.name = r.properties.adnm;
        let name = gzMap[code] || Date.now();
        maps[name] ? maps[name].push(r) : (maps[name] = [r]);
      });

      for (let name in maps) {
        echarts.registerMap(name, {
          type: "FeatureCollection",
          features: maps[name],
        });
      }
    },
    initChart(data = this.museumList, name = 'guizhou', hasClick = true) {
      let that = this;
      this.regionName = name;

      let seriesList = [{ data: [] }];
      data.forEach((item) => {
        let obj = {};
        if (item.longitude && item.latitude) {
          obj.value = [Number(item.longitude), Number(item.latitude)];
          obj = Object.assign(item, obj);
          // obj.name = item.name
          seriesList[0].data.push(obj);
        }
      });
      // 图标
      const series = seriesList.map((v) => {
        return {
          type: "custom", //配置显示方式为用户自定义
          coordinateSystem: "geo",
          data: v.data,
          renderItem(params, api) {
            //具体实现自定义图标的方法
            return {
              type: "image",
              style: {
                image: require("@/assets/imgs/home/locate.png"),
                x: api.coord([
                  v.data[params.dataIndex].value[0],
                  v.data[params.dataIndex].value[1],
                ])[0],
                y: api.coord([
                  v.data[params.dataIndex].value[0],
                  v.data[params.dataIndex].value[1],
                ])[1],
              },
            };
          },
        };
      });
      let distributionOptions = {
        tooltip: {
          // 提示框组件
          show: true, // 显示提示框组件
          trigger: "item", // 触发类型
          triggerOn: "mousemove", // 触发条件
          confine: true,
          showDelay: 200,
          enterable: true,
          formatter: function (a) {
            let faceImageUrl = "";
            that.museumList.forEach((item) => {
              if (
                item.longitude &&
                item.latitude &&
                item.longitude == a.value[0] &&
                item.latitude == a.value[1]
              ) {
                faceImageUrl = `<div>
                <div style="text-align:center;line-height:26px;color:#000;font-weight:bold">${item.name}
                <div/>
                <img width="400px" src="${item.faceImagePressUrl}" />
                </div>`;
                that.curMuseum = item;
                return;
              }
            });
            return faceImageUrl;
          },
        },
        // visualMap: {
        //   min: 0,
        //   max: 20000,
        //   left: "left",
        //   top: "bottom",
        //   text: ["20000", "0"], //取值范围的文字
        //   inRange: {
        //     color: ["#2759af", "#5c8dd8", "#9bb8df", "#3574d5", "#74a5d8"], //取值范围的颜色
        //   },
        //   show: true, //图注
        // },
        series, // 打的那些点数据
        geo: {
          map: name, // 引入地图 省份或者 国家
          layoutCenter: ["66%", "50%"], //设置后left/right/top/bottom等属性无效
          layoutSize: "45%",

          zoom: 2,
          // regions:[
          //   //对不同的区块进行着色
          // {
          //   name: "贵阳市",
          //   itemStyle: {
          //     normal: {
          //       areaColor: "#5CD89E",
          //     },
          //     emphasis: {
          //       areaColor: "#5CD89E",
          //     },
          //   },
          // },
          // ],
          // label: {
          //   normal: {
          //     show: true,
          //     textStyle: {
          //       color: "#fff",
          //     },
          //   },
          //   emphasis: {
          //     textStyle: {
          //       color: "#fff",
          //     },
          //   },
          // },

          // itemStyle: {
          //   normal: {
          //     areaColor: "#013C62",
          //     shadowColor: "#182f68",
          //     shadowOffsetX: 0,
          //     shadowOffsetY: 25,
          //     borderColor: "#2ab8ff",
          //     borderWidth: 1.5,
          //     areaColor: "#12235c",
          //   },
          //   emphasis: {
          //     areaColor: "#2069c4",
          //     borderWidth: 0,
          //     color: "green",
          //   },
          // },

          label: {
            normal: {
              //静态的时候展示样式
              show: true, //是否显示地图省份得名称
              textStyle: {
                color: "#ddd",
                fontSize: 10,
                fontFamily: "Arial",
              },
            },
            emphasis: {
              // 高亮状态下的样式
              //动态展示的样式
              color: "#fff",
              shadowOffsetX: 0,
              shadowOffsetY: 0,
              shadowBlur: 20,
              borderWidth: 0,
              shadowColor: "rgba(0, 0, 0, 0.5)",
            },
          },
          itemStyle: {
            // 地图区域的多边形 图形样式。
            normal: {
              borderColor: "#fff", // 边框颜色
              // areaColor: "#2759af", //  区域颜色
              areaColor: "rgba(32, 105, 196, .8)",
              color: "#ff5555",
              // shadowBlur: 10, // 图形阴影的模糊大小
              // shadowOffsetX: 10, // 阴影水平方向上的偏移距离。
            },
            emphasis: {
              // areaColor: "#7b39e2",
              areaColor: "#2759af",
              color: "#fff",
              shadowColor: "#182f68",
              shadowOffsetX: 0,
              shadowOffsetY: -6,
              shadowBlur: 3,
            },
          },
        },
      };

      let myChart =
        this.myChart || echarts.init(document.getElementById("map"));
      myChart.setOption(distributionOptions, true);
      hasClick && this.bindEvent2Chart(myChart);

      this.myChart = myChart;
    },
    bindEvent2Chart(chart = this.myChart) {
      let that = this;
      chart.on("click", (params) => {
        let type = params.componentType;
        if (type === "geo") {
          /* 加载下一级地图 */

          let regionName = params.name;
          if (!echarts.getMap(regionName)) {
            return;
          }
          let datas = this.museumList.filter(
            (n) => n.regionName === regionName
          );

          that.initChart(datas, regionName, false);
        } else if (type === "series") {
          // 有标注点的地方有data
          that.handleClick(params.data);
        }
      });
    },
    async init() {
      let data = await this.getMuseumData();

      echarts.registerMap("guizhou", guizhou);
      // echarts.registerMap("gzDetails", gzInfo);
      this.initChart(data, "guizhou");
    },
    handleClick(item) {
      const { id } = item;
      this.$router.push({
        path: "museum/" + id,
      });
    },
    /* init() {
      echarts.registerMap("guizhou", guizhou);
      this.changeOptions("guizhou");
      let that = this;
      setTimeout(() => {
        that.myChart = echarts.init(document.getElementById("map"));
        that.myChart.setOption(this.distributionOptions);
        that.myChart.on("click", (params, a, b, c, d) => {
          debugger;
          // console.log(params);
          // 有标注点的地方有data
          if (params.data && params.data.value) {
            that.museumList.forEach((item) => {
              if (
                item.longitude &&
                item.latitude &&
                item.longitude == params.data.value[0] &&
                item.latitude == params.data.value[1]
              ) {
                that.curMuseum = item;
                return;
              }
            });
          }
          that.handleClick(that.curMuseum);
        });
        window.onresize = () => {
          that.myChart.resize();
        };
      }, 500);
    }, */
  },
};
</script>

<style lang="scss" scoped>
.home-museum-map {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  padding: 70px 13% 114px 13%;
  overflow: hidden;
  .title {
    color: #333;
    // margin-bottom: 43px;
    display: flex;
    flex-direction: column;
    align-items: center;
    .ch {
      font-size: 30px;
      font-weight: bold;
      color: #333333;
      margin-bottom: 12px;
    }
    .en {
      font-size: 14px;
      color: #333333;
    }
  }
  .wrapper {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    .content {
      width: 500px;
      margin-top: 100px;
      color: #333333;
      font-family: "Alibaba PuHuiTi";
      .name {
        font-size: 20px;
        font-weight: 400;
        margin-bottom: 48px;
        font-weight: bold;
      }
      .intro {
        font-size: 14px;
        font-weight: 300;
        margin-bottom: 85px;
      }
      .entrance {
        font-size: 16px;
        cursor: pointer;
        display: flex;
        align-content: flex-end;
        .entrance-text {
          margin-right: 12px;
        }
        img {
          transform: rotateX(180deg);
        }
      }
    }

    .map {
      width: 900px;
      height: calc(100vh * 2 / 3);
      position: relative;

      > #map {
        width: 100%;
        height: 100%;
      }

      .chart-refresh {
        position: absolute;
        top: 20px;
        right: 0;
        font-size: 18px;
        color: #666;
        > i {
          transform: rotate(0deg);
          transform-origin: center;
          transition: transform 0.5s ease-in;
          &:hover {
            cursor: pointer;
            transform: rotate(-180deg);
          }
        }
      }
    }
  }
}
</style>
