<template>
  <div class="w-240px h-auto bg-white px-39px pt-76px">
    <div
      v-for="(menu, index) in menus"
      :key="index"
      class="flex items-center mb-57px cursor-pointer"
      @click="$router.push(menu.route)"
    >
      <img
        :src="currentMenuIndex === index ? menu.activeIcon : menu.icon"
        class="w-30px h-30px object-contain mr-13px"
      />
      <div
        :class="`text-size-20px ${
          currentMenuIndex === index ? 'text-primary' : 'text-black'
        } ${currentMenuIndex === index ? 'font-normal' : 'font-normal'}`"
      >
        {{ $t(menu.name) }}
      </div>
      <div class="flex flex-1 items-center justify-end">
        <img
          :src="
            currentMenuIndex === index ? '/imgs/menu-arrow-1.png' : '/imgs/menu-arrow.png'
          "
          class="w-6px"
        />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  watch: {
    $route: function (next) {
      console.log(next.path);
      this.currentPath = next.path;
    },
  },
  computed: {
    currentMenuIndex: (vm) => vm.menus.findIndex((menu) => menu.route === vm.currentPath),
  },
  mounted() {
    console.log("currentMenuIndex", this.currentMenuIndex);
  },

  data() {
    return {
      currentPath: this.$route.path,
      menus: [
        {
          icon: "/imgs/user-personal.png",
          activeIcon: "/imgs/user-personal-1.png",
          name: "个人中心",
          route: "/user/personal-center",
        },
        {
          icon: "/imgs/user-setting.png",
          activeIcon: "/imgs/user-setting-1.png",
          name: "账号设置",
          route: "/user/account-setting",
        },
        {
          icon: "/imgs/user-order.png",
          activeIcon: "/imgs/user-setting-1.png",
          name: "我的订单",
          route: "/user/order",
        },
        {
          icon: "/imgs/user-collection.png",
          activeIcon: "/imgs/user-collection-1.png",

          name: "我的收藏",
          route: "/user/collection",
        },
        {
          icon: "/imgs/user-subscription.png",
          activeIcon: "/imgs/user-subscription-1.png",

          name: "我的订阅",
          route: "/user/subscription",
        },
        {
          icon: "/imgs/user-like.png",
          activeIcon: "/imgs/user-like-1.png",

          name: "我的点赞",
          route: "/user/like",
        },
        {
          icon: "/imgs/user-comment.png",
          activeIcon: "/imgs/user-comment-1.png",

          name: "我的评论",
          route: "/user/comment",
        },
        {
          icon: "/imgs/user-history.png",
          activeIcon: "/imgs/user-history-1.png",

          name: "浏览记录",
          route: "/user/history",
        },
      ],
    };
  },
};
</script>
