<script setup>
import { ref } from "vue";
import Icon3D from "../assets/menu_icon/Icon3D.vue";
import IconAlert from "../assets/menu_icon/IconAlert.vue";
import IconChart from "../assets/menu_icon/IconChart.vue";
import IconRealtime from "../assets/menu_icon/IconRealtime.vue";
import IconAnnounce from "../assets/menu_icon/IconAnnouncement.vue";
const props = defineProps(['value'])
const emit = defineEmits(["change"]);
const handleClick = (page) => {
  emit("change", page);
};
</script>

<template>
  <nav class="nav-menu">
    <ul class="flex-list">
      <li>
        <button type="button" @click="(e) => handleClick('3d')">
          <span :style="{ color: value == '3d' ? '#b1daff' : '#339dff' }">三维界面</span>
          <Icon3D class="nav-icon" :color="value == '3d' ? '#b1daff' : '#339dff'" />
        </button>
      </li>
      <li>
        <button type="button" @click="(e) => handleClick('data')">
          <span :style="{ color: value == 'data' ? '#b1daff' : '#339dff' }">数据界面</span>
          <IconChart class="nav-icon" :color="value == 'data' ? '#b1daff' : '#339dff'" />
        </button>
      </li>
      <li>
        <button type="button" @click="(e) => handleClick('realtime')">
          <span :style="{ color: value == 'realtime' ? '#b1daff' : '#339dff' }">实时数据</span>
          <IconRealtime class="nav-icon" :color="value == 'realtime' ? '#b1daff' : '#339dff'" />
        </button>
      </li>
      <li>
        <button type="button" @click="(e) => handleClick('alert')">
          <span :style="{ color: value == 'alert' ? '#b1daff' : '#339dff' }">报警列表</span>
          <IconAlert class="nav-icon" :color="value == 'alert' ? '#b1daff' : '#339dff'" />
        </button>
      </li>
      <li>
        <button type="button" @click="(e) => handleClick('announcement')">
          <span style="">公告页面</span>
          <IconAnnounce class="nav-icon" />
        </button>
      </li>
    </ul>
  </nav>
</template>

<style scoped>
.nav-menu {
  width: 279px;
  height: 710px;
  background: url(../assets/left-bg.png) 100% / cover no-repeat;
  display: grid;
  place-items: center;
  position: relative;
  top: 72px;
  left: 0;
  z-index: 10;
}

:fullscreen .nav-menu {
  top: 25%;
}

.flex-list {
  display: flex;
  flex-direction: column;
  gap: 26px;
}

button {
  appearance: none;
  border: none;
  outline: none;
  background: transparent;
  cursor: pointer;
  user-select: none;
}

ul,
li {
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav-menu button {
  display: flex;
  align-items: center;
  gap: 8px;
}

.nav-menu button>span {
  font-size: 32px;
  letter-spacing: 3px;
  line-height: 45px;
  color: #339dff;
  text-shadow: 0 5px 1px #001124;
  /* text-shadow: 0 5px 1px #004969; */
}

.nav-menu button:hover>span {
  color: #b1daff !important;
}
</style>

<style>
.nav-menu button:hover>.nav-icon #icon3d-g,
.nav-menu button:hover>.nav-icon #alert-rect,
.nav-menu button:hover>.nav-icon #alert-dot,
.nav-menu button:hover>.nav-icon #realtime-main,
.nav-menu button:hover>.nav-icon #announce-main,
.nav-menu button:hover>.nav-icon #chart-main {
  fill: #b1daff !important;
}
</style>
