<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.8625rem',
            height: '0.8625rem',
            borderRadius: '200px',
            border: `solid 3px ${currentIndex === index ? '#ace0f7': '#DBDBDB'}`,
          }"
        >
          <img
            style="width: 0.4rem; height: 0.4rem"
            :src="currentIndex === index ? item.aIcon : item.nIcon"
            alt=""
          />
        </div>
        <div
          class="menu-name d-flex jc-center"
          :class="[currentIndex === index ? 'textS-common' : '']"
        >
          {{ item.name }}
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      currentIndex: 0,
      menuList: [
        {
          name: "首页",
          aIcon:
            "http://111.172.230.93:9000/elevator/2024/11/21/9a5bf77566ba4026a08d24ad35d5d6a5.png",
          nIcon:
            "http://111.172.230.93:9000/elevator/2024/11/21/90e40c6a3577455da3c712e1a58a3481.png",
          url: "/",
        },
        {
          name: "电梯",
          aIcon:
            "http://111.172.230.93:9000/elevator/2024/11/21/6d7c38705d2c4142969cf12541a77568.png",
          nIcon:
            "http://111.172.230.93:9000/elevator/2024/11/21/c0b1ad5818214240aa6ec8acde522757.png",
          url: "/elevator",
        },
        {
          name: "保养",
          aIcon:
            "http://111.172.230.93:9000/elevator/2024/11/21/638256d43ad94866890766d8c3367322.png",
          nIcon:
            "http://111.172.230.93:9000/elevator/2024/11/21/64193eb9f3364734addb49e976d9b6e0.png",
          url: "maintenance",
        },
        {
          name: "维修",
          aIcon:
            "http://111.172.230.93:9000/elevator/2024/11/21/480285073dd349ada14dffde15bf0e96.png",
          nIcon:
            "http://111.172.230.93:9000/elevator/2024/11/21/44c9bc56f1ba4defbf5bdf8e2975887c.png",
          url: "require",
        },
        {
          name: "救援",
          aIcon:
            "http://111.172.230.93:9000/elevator/2024/11/21/fab85545289c44bcb4ff8ec16348ff2b.png",
          nIcon:
            "http://111.172.230.93:9000/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);
    // if (this.$route.name) {
    //   switch (this.$route.name) {
    //     case "index":
    //       this.currentIndex = 0;
    //       break;
    //     case "elevator":
    //       this.currentIndex = 1;
    //       break;
    //     case "maintenance":
    //       this.currentIndex = 2;
    //       break;
    //     case "rescue":
    //       this.currentIndex = 3;
    //       break;

    //     default:
    //       break;
    //   }
    // }
  },
  methods: {
    handleClickMenuItem(item, index) {
      this.currentIndex = index;
      this.$emit("menuClick", index);
      this.$router.push(item.url);
    },
  },
};
</script>
<style lang="scss" scoped>
.menu-container {
  color: red;
  z-index: 9;
  position: fixed;
  top: 92%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: rgba(34, 22, 123, 0.8);
  padding: 0.15rem 0.3rem;
  border-radius: 0.1rem;
  // backdrop-filter: blur(5px);
  .menu-item {
    margin-left: 0.6875rem;
    cursor: pointer;
    &:first-child {
      margin-left: 0rem;
    }
    .menu-name {
      color: #d8d8d8;
      font-size: 0.225rem;
      margin-top: 0.15rem;
    }
  }
}
</style>
