<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"></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";

export default {
  name: "MuseumMap",
  data() {
    return {
      test: ["测试测试测试", "测试测试测试", "测试测试测试"],
    };
  },
  mounted() {
    // this.init();
    // this.initAnimate();
  },
  methods: {
    init() {
      echarts.registerMap("guizhou", guizhou);
      let myChart = echarts.init(this.$refs.map);
      let option = {
        visualMap: {
          show: false,
          left: "right",
          min: 500000,
          max: 38000000,
          inRange: {
            color: ["#E3F1FC", "#B4E3FA", "#62C5F6", "#2998E8"],
          },
          text: ["High", "Low"],
          calculable: true,
        },
        series: [
          {
            name: "guizhou",
            type: "map",
            roam: true,
            map: "guizhou", //这里是你导入echarts的json文件
            layoutCenter: ["50%", "70%"],
            layoutSize: "100%",
            label: {
              //地图默认的文本属性
              show: false,
              color: "#2998E8",
            },
            select: {
              //选中的区域文本属性
              label: {
                color: "#2998E8",
              },
              itemStyle: {
                color: "#3066ba",
              },
            },
            emphasis: {
              //高亮的区域文本属性
              itemStyle: {
                areaColor: "#3066ba",
              },
              label: {
                show: true,
                textStyle: {
                  color: "#2998E8",
                },
              },
            },

            zoom: 1.2,
            textFixed: {
              Alaska: [20, -20],
            },
            data: guizhou.features.map((e) => {
              let num = Math.round(Math.random() * Math.random() * 100000000);
              return { name: e.properties.name, value: num };
            }),
          },
        ],
      };
      myChart.setOption(option);

      myChart.on("click", function (params) {
        console.log("点击位置", params.data);
      });
    },

    initAnimate() {
      var anime = require("animejs/lib/anime");
      anime({
        targets: ".blue",
        translateX: 270,
        delay: anime.stagger(100), // 每个元素的延迟增加100毫秒。
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.home-museum-map {
  background-color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  padding: 164px 13% 114px 13%;
  .title {
    color: #333;
    margin-top: 70px;
    margin-bottom: 90px;
    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;
    .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;
      }
    }
  }
}
</style>