<template>
  <div class="home">
    <div class="map">
      <maps ref="mapsRef" />
    </div>
    <vaside ref="asideRef" class="vaside" @changeMap="changeMap" />
  </div>
</template>

<script setup>
import vaside from "./maside.vue";
import maps from "@/components/maps";
import emitter from "@/mitt/index";
import { ref, defineEmits, onMounted, watch, nextTick } from "vue";

import { Loading } from "@/components/UI";
import { useRouter, useRoute } from "vue-router";

let listType = "museum";

// 得到子组件的切换列表信息

const mapsRef = ref(null);
const changeMap = (id) => {
  listType = id;
  // 把id传给子组件地图
  mapsRef.value.changeMap(id);


  currentCity.value = "";
  // console.log('------------',id);
};

const router = useRouter();

const currentCity = ref("");

emitter.on("handleHover", (data) => {
  currentCity.value = data;
});

const asideRef = ref(null);

emitter.on("handleClick", (data) => {
  if (data.num == "&nbsp;0") {
    return;
  }


  if (data.name === currentCity.value.name) {
    currentCity.value = "";
    // 在次点击取消高亮 返回所有数据
    asideRef.value.getList("");

    return;
  }
  // 点击筛选当前选中的数据
  currentCity.value = data;
  asideRef.value.getList(data.rowid);
      // 打开主页列表
    asideRef.value.openIsShow();


  // router.push({
  //   name: 'homelist',
  //   params: {
  //     id:data.rowid
  //   },
  //   query: {
  //     type: listType,
  //   }
  // })
});

onMounted(() => {
  Loading.hide();
});
</script>

<style lang="scss" scoped>
.home {
  width: 100%;
  background-image: url("~@/assets/images/resource/home_bg.jpg");
  background-size: cover;
  background-position: center;
  position: relative;
  z-index: 10;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;

  .map {
    width: 100%;
    height: 100%;

    > div {
      width: 100%;
      height: 100%;
    }
  }

  .cityname {
    position: absolute;
    right: calc(6% + 340px);
    bottom: 10%;
    font-size: 20px;
    text-align: right;

    > p {
      &:first-of-type {
        font-size: 64px;
        font-weight: bold;
        color: transparent;
        line-height: 94px;
        -webkit-text-stroke: 2px var(--main-color);
        text-stroke: 2px var(--main-color);
      }

      &:last-of-type {
        font-size: 92px;
        font-weight: bold;
        color: var(--main-color);
      }
    }
  }

  .vaside {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    right: 0;
  }
}


@media screen and (max-width: 1000px) {
}
</style>

<style>
#svg-pan-zoom-controls {
  display: none;
}
</style>