<template>
  <div class="home-museum-map">
    <div class="title">
      <div class="ch">文博地图</div>
      <div class="en">Museum Map</div>
    </div>
    <div class="wrapper">
      <div class="content">
        <div class="name">黔西南州博物馆</div>
        <div class="intro">
          黔西南州博物馆位于兴义市桔山广场州民族文化中心二楼、三楼和四楼，隶属黔西南州文化广电旅游局，属正科级公益性文化事业单位。馆藏文物3949件（套），其中一级文物32件（套），二级文物15件（套），三级文物60件（套）。其中，抚琴俑、铜车马、摇钱树、连枝灯、提梁壶、一字格剑等已被列入国家精品文物名录。博物馆实际使用面积7240平方米，其中展厅面积2540平方米，文物库房面积858平方米，其他业务用房（临时展厅、文创展区、文物修复室、数据采集室、文物鉴定室、学术报告厅、观众休息区、文物技术保护室等）面积1930平方米，办公用房70平方米。馆内设有陈列展览部、社会教育部、文物保护部、考古发掘部、征集保管部、安全保卫部、文创研发部等部室。现有基本陈列《夜郎的疑问-黔西南州考古成果展》对公众免费开放，展览分道不相通、一州之主、汉之广大三部分。构思取材于司马迁《史记》记载的“夜郎自大”典故。展出文物涵盖前夜郎、夜郎、后夜郎三个时期，共计400余件（套），展览同步有二维、三维等文物数字化推送，日接待观众1000人次以内。
        </div>
      </div>
      <div class="map" id="map"></div>
    </div>
    <!-- <div class="list">
      <ul class="vertical-text">
        <li v-for="(item, index) in test" :key="index" class="blue">
          {{ item }}
        </li>
      </ul>
    </div>
    <div class="map" ref="map"></div> -->
  </div>
</template>

<script>
import * as echarts from "echarts";
import guizhou from "@/utils/common-data/guizhou.json";
import { getMuseumList } from "@/api/org";
export default {
  name: "MuseumMap",
  data() {
    return {
      geoCoordMap: {
        贵州省博物馆: [106.648151, 26.652269],
        贵州省地质博物馆: [106.613655, 26.629013],
        贵州省民族博物馆: [106.719404, 26.574244],
        贵州民族民俗博物馆: [106.644855, 26.67912],
      },
      myChart: "",
      distributionOptions: "",
    };
  },
  mounted() {
    // this.changeOptions();
    this.init();
    // this.initAnimate();
  },
  methods: {
    async changeOptions(name) {
      const params = {
        page: 1,
        limit: 1000,
      };
      // 获取博物馆列表，并构造经纬度
      // let res = await getMuseumList(params);
      // res.data(item=>{
      //   return item.latitude && item.longitude
      // })
      // debugger;
      // return;
      // 经纬度数据
      const seriesList = [
        {
          data: [
            { value: [106.648151, 26.652269] },
            { value: [106.613655, 26.629013] },
            { value: [106.719404, 26.574244] },
            { value: [106.644855, 26.67912] },
            ,
          ],
        },
        {
          data: [
            {
              value: [107.43, 28.56],
            },
          ],
        },
        // {
        //   data: [
        //     {
        //       value: [107.5, 27.76],
        //     },
        //   ],
        // },
      ];
      // 图标
      const series = seriesList.map((v) => {
        return {
          type: "scatter", //配置显示方式为用户自定义
          coordinateSystem: "geo",
          data: v.data,
        };
      });
      // options
      this.distributionOptions = {
        tooltip: {
          // 提示框组件
          show: true, // 显示提示框组件
          trigger: "item", // 触发类型
          triggerOn: "mousemove", // 出发条件
          formatter: function (a) {
            console.log(12, a);
          },
        },
        series, // 打的那些点数据
        geo: {
          map: name || "china", // 引入地图 省份或者 国家
          layoutCenter: ["50%", "50%"], //设置后left/right/top/bottom等属性无效
          layoutSize: "45%",
          roam: false, //关闭鼠标缩放和漫
          zoom: 2,
          label: {
            normal: {
              //静态的时候展示样式
              show: true, //是否显示地图省份得名称
              textStyle: {
                color: "#fff",
                fontSize: 10,
                fontFamily: "Arial",
              },
            },
            emphasis: {
              // 高亮状态下的样式
              //动态展示的样式
              color: "#fff",
            },
          },
          itemStyle: {
            // 地图区域的多边形 图形样式。
            normal: {
              borderColor: "#fff", // 边框颜色
              areaColor: "#2759af", //  区域颜色
              textStyle: {
                // 文字颜色
                color: "#fff",
              },
              // shadowBlur: 10, // 图形阴影的模糊大小
              // shadowOffsetX: 10, // 阴影水平方向上的偏移距离。
            },
            emphasis: {
              areaColor: "#7b39e2",
              color: "#fff",
            },
          },
        },
      };
    },
    init() {
      echarts.registerMap("guizhou", guizhou);
      this.changeOptions("guizhou");
      this.myChart = echarts.init(document.getElementById("map"));
      this.myChart.setOption(this.distributionOptions);
      // 上边应该都懂，下面就是创建了一个点击事件，目的是点击省份子区域的时候可以切换到省份地图，省份的json文件自己下载。
      // this.myChart.on("click", (chinaParam) => {
      //   let code = provinces[provincesText.indexOf(chinaParam.name)] || 100000;
      //   this.getProvinceMapOpt(
      //     code,
      //     provincesName[provincesText.indexOf(chinaParam.name)]
      //   );
      // });
      window.onresize = () => {
        this.myChart.resize();
      };
    },
  },
};
</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 {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    .content {
      width: 26%;
      .name {
        font-size: 20px;
        font-family: "Alibaba PuHuiTi";
        font-weight: 400;
        color: #333333;
        margin-bottom: 48px;
      }
      .intro {
        font-size: 14px;
        font-family: "Alibaba PuHuiTi";
        font-weight: 300;
        color: #333333;
      }
    }

    .map {
      width: 780px;
      height: 580px;
    }
  }
}
</style>