<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>
      </div>
      <div class="map wow animate__animated animate__fadeInRight" id="map" ></div>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import guizhou from "../../../../public/geoData/guizhou.json";
import { getMuseumListPage } from "@/api/org";
export default {
  name: "MuseumMap",
  data() {
    return {
      myChart: "",
      distributionOptions: "",
      museumList: [],
      curMuseum: {},
    };
  },
  mounted() {
    echarts.registerMap("guizhou", guizhou);
    this.changeOptions("guizhou");
    this.$nextTick(() => {
      this.init();
    });
    
    // this.initAnimate();
  },
  methods: {
    async changeOptions(name) {
      const params = {
        page: 1,
        limit: 1000,
      };
      let that = this;
      // 获取博物馆列表，并构造经纬度
      let res = await getMuseumListPage(params);
      this.museumList = res.data.records;
      this.curMuseum = this.museumList[0]
      let seriesList = [{ data: [] }];
      this.museumList.forEach((item) => {
        // debugger;
        let obj = {};
        if (item.longitude && item.latitude) {
          obj.value = [Number(item.longitude), Number(item.latitude)];
          // 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],
              },
            };
          },
        };
      });
      this.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 || "china", // 引入地图 省份或者 国家
          layoutCenter: ["66%", "50%"], //设置后left/right/top/bottom等属性无效
          layoutSize: "45%",
          roam: false, //关闭鼠标缩放和漫
          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: "#fff",
                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", //  区域颜色
                      shadowColor: "#182f68",
              shadowOffsetX: 0,
              shadowOffsetY: 25,
              textStyle: {
                // 文字颜色
                color: "#fff",
              },
              // shadowBlur: 10, // 图形阴影的模糊大小
              // shadowOffsetX: 10, // 阴影水平方向上的偏移距离。
            },
            emphasis: {
              areaColor: "#7b39e2",
              color: "#fff",
            },
          },
        },
      };
    },

    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) => {
          // 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%;
  .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);
    }
  }
}
</style>