<template>
  <div class="home">
    <div class="map">
      <maps />
    </div>
    <div class="cityname" v-if="currentCity">
      <p>{{currentCity.name}}</p>
      <p>{{currentCity.pingyin}}</p>
    </div>
    <vaside class="vaside" />
  </div>
</template>

<script setup>
import vaside from "./aside.vue";
import maps from "@/components/maps";
import emitter from "@/mitt/index";
import { ref, defineEmits, onMounted, watch, computed, nextTick } from "vue";
import { Loading } from "@/components/UI";
import { useRouter, useRoute } from "vue-router";

const router = useRouter();
const route = useRoute();


const currentCity = ref('')

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

emitter.on("handleClick", (data) => {
  if (data.num == "&nbsp;0") {
    return
  }
  router.push({name:'homelist',params:{id:data.rowid}})
});

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: 80%;
    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;
    right: 6%;
    transform: translateY(-50%);
    top: 50%;
  }

}

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