<template>
  <div class="menu-container d-flex a-c jc-center" v-if="isShowMiddleMenu">
    <div class="menu-list d-flex">
      <div
        class="menu-item"
        v-for="(item, index) in menuList"
        :key="index"
        @click="handleClickMenuItem(item, index)"
      >
        <div
          class="d-flex a-c jc-center"
          :style="{
            width: '0.5625rem',
            height: '0.5625rem',
            borderRadius: '200px',
            border: `solid 3px ${currentIndex === index ? '#ace0f7': '#DBDBDB'}`,
            background: currentIndex === index ? 'rgba(172, 224, 247, 0.1)' : 'transparent',
            boxShadow: currentIndex === index ? '0 0 8px rgba(172, 224, 247, 0.3)' : 'none'
          }"
        >
          <img
            style="width: 0.3rem; height: 0.3rem"
            :src="currentIndex === index ? item.aIcon : item.nIcon"
            alt=""
          />
        </div>
        <div
          class="menu-name d-flex jc-center"
          :class="[currentIndex === index ? 'textS-common' : '']"
          :style="{
            color: currentIndex === index ? '#ace0f7' : '#d8d8d8',
            textShadow: currentIndex === index ? '0 0 4px rgba(172, 224, 247, 0.5)' : 'none'
          }"
        >
          {{ item.name }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentIndex: 0,
      menuList: [
        {
          name: "首页",
          aIcon: "https://minio.hbrja.com/elevator/2024/11/21/9a5bf77566ba4026a08d24ad35d5d6a5.png",
          nIcon: "https://minio.hbrja.com/elevator/2024/11/21/90e40c6a3577455da3c712e1a58a3481.png",
          url: "/",
        },
        {
          name: "电梯",
          aIcon: "https://minio.hbrja.com/elevator/2024/11/21/6d7c38705d2c4142969cf12541a77568.png",
          nIcon: "https://minio.hbrja.com/elevator/2024/11/21/c0b1ad5818214240aa6ec8acde522757.png",
          url: "/elevator",
        },
        {
          name: "保养",
          aIcon: "https://minio.hbrja.com/elevator/2024/11/21/638256d43ad94866890766d8c3367322.png",
          nIcon: "https://minio.hbrja.com/elevator/2024/11/21/64193eb9f3364734addb49e976d9b6e0.png",
          url: "maintenance",
        },
        {
          name: "维修",
          aIcon: "https://minio.hbrja.com/elevator/2024/11/21/480285073dd349ada14dffde15bf0e96.png",
          nIcon: "https://minio.hbrja.com/elevator/2024/11/21/44c9bc56f1ba4defbf5bdf8e2975887c.png",
          url: "require",
        },
        {
          name: "救援",
          aIcon: "https://minio.hbrja.com/elevator/2024/11/21/fab85545289c44bcb4ff8ec16348ff2b.png",
          nIcon: "https://minio.hbrja.com/elevator/2024/11/21/a15175af61bb4c6782d1aaa32911dfb3.png",
          url: "rescue",
        },
      ],
    };
  },
  computed: {
    isShowMiddleMenu() {
      return this.$store.state.isShowMiddleMenu;
    },
  },
  watch: {
    $route: {
      immediate: true,
      handler(to) {
        if (to.name) {
          switch (to.name) {
            case "index":
              this.currentIndex = 0;
              break;
            case "elevator":
              this.currentIndex = 1;
              break;
            case "maintenance":
              this.currentIndex = 2;
              break;
            case "require":
              this.currentIndex = 3;
              break;
            case "rescue":
              this.currentIndex = 4;
              break;
            default:
              break;
          }
        }
      },
    },
  },
  mounted() {
    console.log(this.$route);
  },
  methods: {
    handleClickMenuItem(item, index) {
      this.currentIndex = index;
      this.$emit("menuClick", index);
      this.$router.push(item.url);
    },
  },
};
</script>

<style lang="scss" scoped>
.menu-container {
  position: fixed;
  bottom: 0.8rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 999;
  
  .menu-list {
    display: flex;
    padding: 0.3rem 0.8rem;
    background: linear-gradient(
      135deg,
      rgba(20, 30, 150, 0.7) 0%,
      rgba(10, 20, 120, 0.8) 50%,
      rgba(5, 15, 100, 0.9) 100%
    );
    backdrop-filter: blur(10px) saturate(180%);
    border-radius: 2rem;
    border: 1px solid rgba(100, 180, 255, 0.2);
    box-shadow: 
      0 0 15px rgba(0, 150, 255, 0.3),
      0 5px 20px rgba(0, 0, 0, 0.2),
      inset 0 1px 3px rgba(255, 255, 255, 0.1),
      inset 0 0 10px rgba(100, 180, 255, 0.1);
    
    /* 添加科技感光带效果 */
    position: relative;
    overflow: hidden;
    
    &::before {
      content: "";
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(
        90deg,
        transparent,
        rgba(100, 200, 255, 0.2),
        transparent
      );
      animation: shine 4s infinite;
    }
    
    .menu-item {
      margin-left: 0.4575rem;
      cursor: pointer;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      position: relative;
      z-index: 1;
      
      &:first-child {
        margin-left: 0;
      }
      
      &:hover {
        transform: translateY(-3px);
        
        > div:first-child {
          border-color: rgba(172, 224, 247, 0.8) !important;
          box-shadow: 
            0 0 10px rgba(172, 224, 247, 0.5),
            0 0 20px rgba(172, 224, 247, 0.2) !important;
        }
        
        .menu-name {
          color: #ace0f7 !important;
          text-shadow: 
            0 0 8px rgba(172, 224, 247, 0.7),
            0 0 15px rgba(172, 224, 247, 0.3) !important;
        }
      }
      
      .menu-name {
        color: rgba(255, 255, 255, 0.9);
        font-size: 0.225rem;
        margin-top: 0.15rem;
        transition: all 0.3s ease;
        font-weight: 500;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
      }
    }
  }
}

/* 添加光带动画 */
@keyframes shine {
  0% {
    left: -100%;
  }
  20% {
    left: 100%;
  }
  100% {
    left: 100%;
  }
}

/* 保持原有全局样式不变 */
::v-deep .amap-info-content {
  padding: 0 !important;
}
body {
  margin: 0;
}
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .menu-container {
    bottom: 0.6rem;
    
    .menu-list {
      padding: 0.25rem 0.6rem;
      backdrop-filter: blur(8px);
      
      .menu-item {
        margin-left: 0.35rem;
        
        .menu-name {
          font-size: 0.2rem;
        }
      }
    }
  }
}
</style>