<template>
  <ul>
    <li
      v-for="(item, i) in menus"
      :class="activeI === i ? 'active-menu' : ''"
      :key="i"
      @click="(activeI = i), go(i)"
    >
      {{ item.name }}
    </li>
  </ul>
</template>

<script>
import { onMounted, reactive, toRefs } from "vue";
import { useRouter } from "vue-router";
export default {
  name: "Header",
  props: ["pactiveI", "menus"],
  setup(props, ctx) {
    const router = useRouter();
    const state = reactive({
      activeI: 0,
      menus: [],
    });
    onMounted(() => {
      if (props.pactiveI) {
        state.activeI = props.pactiveI;
        state.menus = props.menus;
      }
    });

    const go = (i) => {
      ctx.emit("changeIndex", i);
    };
    return {
      ...toRefs(state),
      go,
    };
  },
};
</script>

<style lang="scss" scoped>
ul {
  width: 100%;
  height: 100%;
  border-radius: 20px;
  // border: 1px solid #0f9b49;
  display: flex;
  padding: 0 5px;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;

  li {
    width: 100%;
    text-align: center;
    cursor: pointer;
    height: 24%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 8px #99acb0 inset;
    border-radius: 5px;
    font-size: 24px;
    &.active-menu {
      background: #a7dcf5;
    }
    &:hover {
      transform: scale(1.1);
    }
  }
}
</style>
