<script lang="ts" setup>
import { getImg } from "@/utils";
import { computed, ref } from "vue";
import { useRouter } from "vue-router";
import AppLink from "@/components/AppLink.vue";

interface Menu {
  name: string;
  routeName: string;
  images: string;
  imagesActive?: string;
}

const router = useRouter();

const menuList = ref<Menu[]>([
  {
    name: "源",
    routeName: "source",
    images: getImg("layout/footer/iteml.png"),
    imagesActive: getImg("layout/footer/iteml_.png"),
  },
  {
    name: "储",
    routeName: "storage",
    images: getImg("layout/footer/iteml.png"),
    imagesActive: getImg("layout/footer/iteml_.png"),
  },
  {
    name: "荷",
    routeName: "soc",
    images: getImg("layout/footer/iteml.png"),
    imagesActive: getImg("layout/footer/iteml_.png"),
  },
  {
    name: "首页",
    routeName: "home",
    images: getImg("layout/footer/item.png"),
  },
  {
    name: "网",
    routeName: "net",
    images: getImg("layout/footer/itemr.png"),
    imagesActive: getImg("layout/footer/itemr_.png"),
  },
  {
    name: "设备",
    routeName: "device",
    images: getImg("layout/footer/itemr.png"),
    imagesActive: getImg("layout/footer/itemr_.png"),
  },
]);

const activeRoute = computed(() => {
  return router.currentRoute.value.name;
});

const className = (item: Menu) => {
  switch (item.routeName) {
    case "source":
    case "storage":
    case "soc":
      return `w-[103px] h-[37px] bg-no-repeat`;
    case "home":
      return `w-[121px] h-[37px] bg-no-repeat mt-1`;

    case "net":
    case "device":
      return `w-[137px] h-[37px] bg-no-repeat`;

    default:
      break;
  }
};

const styleBg = (item: Menu) => {
  if (item.routeName === "home") {
    return {
      backgroundImage: `url(${item.images})`,
    };
  }
  return {
    backgroundImage: `url(${
      activeRoute.value !== item.routeName ? item.images : item.imagesActive
    })`,
  };
};
</script>

<template>
  <div class="w-2/5 h-[60px] flex items-center justify-center pt-2 px-10 pr-14 pointer-events-auto">
    <AppLink
      v-for="item in menuList"
      :to="{ name: item.routeName }"
      tag="div"
      class="relative flex justify-center items-center text-lg"
      :class="className(item)"
      :style="styleBg(item)"
    >
      <div
        v-if="item.routeName === 'home'"
        class="absolute w-[77px] h-[77px] animate-spin-slow -top-6"
        :style="{
          backgroundImage:
            activeRoute == item.routeName
              ? `url(${getImg('layout/footer/center_.png')})`
              : `url(${getImg('layout/footer/center.png')})`,
        }"
      ></div>
      <div class="relative z-10">
        {{ item.name }}
      </div>
    </AppLink>
  </div>
</template>
