<template>
  <div class="control">
    <router-link to="/" class="control_box" active-class="active">
      <img
        v-if="currentPath === 'school'"
        class="icon"
        src="@/assets/images/school-icon-active.png"
      />
      <img v-else class="icon" src="@/assets/images/school-icon.png" />
      <div class="text">校园概览</div>
      <div class="subText">campus overview</div>
    </router-link>

    <router-link to="energy" class="control_box" active-class="active">
      <img
        v-if="currentPath === 'energy'"
        class="icon"
        src="@/assets/images/energy-icon-active.png"
      />
      <img v-else class="icon" src="@/assets/images/energy-icon.png" />
      <div class="text">能耗管理</div>
      <div class="subText">energy management</div>
    </router-link>

    <router-link to="user" class="control_box" active-class="active">
      <img
        v-if="currentPath === 'user'"
        class="icon"
        src="@/assets/images/user-icon-active.png"
      />
      <img v-else class="icon" src="@/assets/images/user-icon.png" />
      <div class="text">用户画像</div>
      <div class="subText">user portrait</div>
    </router-link>
  </div>
</template>

<script lang="ts" setup>
import { watch, ref } from "vue";
import { RouterLink, useRoute } from "vue-router";

// 当前路由信息
const route = useRoute();
// 当前路由路径
const currentPath = ref("");

// 监听路由路径变化
watch(
  route,
  (value) => {
    currentPath.value = value.name as string;
  },
  { immediate: true }
);
</script>

<style lang="scss" scoped>
.control {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translate(-50%);
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 780px;
  height: 200px;
  font-family: "庞门正道标题体";

  .control_box {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    height: 162px;
    background-image: linear-gradient(#ffffff, #007aa3);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    .icon {
      width: 91px;
      height: 97px;
    }

    .text {
      font-size: 28px;
    }

    .subText {
      font-size: 16px;
    }
  }

  .active {
    background-image: linear-gradient(#ffe9a8, #de7b02);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}
</style>
