<template>
  <div
    :class="['city_base', `city_base_${city.id}`, `city_level_${city.level}`]"
    :style="{
      left: `${city.x - 20}px`,
      top: `${city.y - 15}px`,
    }"
    @mouseenter="silent"
    @mouseleave="silent"
  >
    <div
      v-if="city.color"
      class="city_bg"
      :style="{
        backgroundImage: `url(${imagePath}/b${city.color.substring(1).toUpperCase()}.png)`,
      }"
    ></div>

    <a
      class="city_link"
      :data-text="city.text"
      :data-nation="city.nation"
      :data-id="city.id"
      :href="props.href"
      :style="{
        cursor: city.clickable?'pointer':'default',
      }"
      @click="clicked"
      @mouseenter="mouseenter"
      @mouseleave="mouseleave"
    >
      <div class="city_img">
        <img :src="`${imagePath}/cast_${city.level}.gif`" />
        <div :class="['city_filler', props.isMyCity ? 'my_city' : '']"></div>

        <div v-if="city.nationID && city.nationID > 0" class="city_flag">
          <img :src="`${imagePath}/${city.supply ? 'f' : 'd'}${city.color.substring(1).toUpperCase()}.gif`" />
          <div v-if="city.isCapital" class="city_capital">
            <img :src="`${imagePath}/event51.gif`" />
          </div>
        </div>
        <span class="city_detail_name">{{ city.name }}</span>
      </div>
      <div v-if="city.state > 0" class="city_state">
        <img :src="`${imagePath}/event${city.state}.gif`" />
      </div>
    </a>
  </div>
</template>

<script lang="ts" setup>
import type { MapCityParsed } from "@/map";
import { toRef, type PropType } from "vue";
const emit = defineEmits<{
  (event: "click", e: MouseEvent): void;
  (event: "mouseenter", e: MouseEvent): void;
  (event: "mouseleave", e: MouseEvent): void;
}>();
const props = defineProps({
  city: {
    type: Object as PropType<MapCityParsed>,
    required: true,
  },
  href: {
    type: String,
    default: undefined,
    required: false,
  },
  isMyCity: {
    type: Boolean,
    required: false,
    defeault: false,
  },
  imagePath: {
    type: String,
    required: true,
  },
});
const city = toRef(props, "city");
const imagePath = toRef(props, "imagePath");

function clicked(event: MouseEvent) {
  emit("click", event);
}

function mouseenter(event: MouseEvent) {
  event.stopPropagation();
  emit("mouseenter", event);
  console.log('enter');
}

function mouseleave(event: MouseEvent) {
  event.stopPropagation();
  emit("mouseleave", event);
  console.log('out');
}

function silent(event: MouseEvent){
  event.stopPropagation();
  console.log(city.value.name);
}
</script>

<style lang="scss" scoped>
a,
div,
img,
span {
  line-height: 1.3;
  font-size: 14px;
}
</style>
