<template>
  <div
    :class="['city_base', `city_base_${city.id}`, `city_level_${city.level}`]"
    :style="{
      left: `${city.x - 20}px`,
      top: `${city.y - 15}px`,
    }"
  >
    <a
      class="city_link"
      :data-text="city.text"
      :data-nation="city.nation"
      :data-id="city.id"
      :href="props.href"
      @click="clicked"
    >
      <div
        class="city_img"
        :style="{
          backgroundColor: city.color,
        }"
      >
        <div :class="['city_filler', props.isMyCity ? 'my_city' : '']"></div>
        <div v-if="city.state > 0" :class="['city_state', `city_state_${getCityState()}`]"></div>
        <div v-if="city.nationID && city.nationID > 0" class="city_flag">
          <div v-if="city.isCapital" class="city_capital"></div>
        </div>
        <span class="city_detail_name">{{ city.name }}</span>
      </div>
    </a>
  </div>
</template>

<script lang="ts" setup>
import type { MapCityParsed } from "@/map";
import { toRef, type PropType } from "vue";
const emit = defineEmits<{
  (event: "click", evnet: 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,
  },
});
const city = toRef(props, "city");

function getCityState(): string {
  const state = city.value.state;
  if (state < 10) {
    return "good";
  }
  if (state < 40) {
    return "bad";
  }
  if (state < 50) {
    return "war";
  }
  return "wrong";
}

function clicked(event: MouseEvent) {
  emit("click", event);
}
</script>

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