<script setup>
import { ref } from "vue";

import {
  Document,
  UserFilled,
  House,
  Message,
  Tickets,
  Lock,
  List,
  Menu as IconMenu,
  Location,
  Setting,
  Box,
} from "@element-plus/icons-vue";

import router from "../../router";

import logoImg from "@/assets/images/logo.png";

const props = defineProps({
  collapse: {
    type: Boolean,
    default: false,
  },
});

const menuData = ([
  {
    title: "首頁",
    icon: House,
    path: "/index",
    children: [
      {
        title: "首頁輪播",
        path: "/index/banner",
      },
      // {
      //   title: "供應商",
      //   path: "/index/supplier",
      // }
    ],
  },
  {
    title: "關於我們",
    icon: Tickets,
    path: "/about",
    children: [
      {
        title: "公司簡介",
        path: "/about/company",
      },
      // {
      //   title: "經營理念",
      //   path: "/about/concept",
      // }
    ],
  },
  {
    title: "產品管理",
    icon: Box,
    path: "/product",
    children: [
      {
        title: "產品列表",
        path: "/product/list",
      },
      {
        title: "產品類別",
        path: "/product/group",
      }
    ],
  },
  {
    title: "最新消息",
    icon: List,
    path: "/news",
    children: [
      {
        title: "產業動態",
        path: "/news/list",
      },
      // {
      //   title: "公司活動",
      //   path: "/news/activity",
      // },
      // {
      //   title: "ESG",
      //   path: "/news/esg",
      // }
    ],
  },  
  {
    title: "聯絡我們",
    icon: Message,
    path: "/contact",
    children: [
      {
        title: "表單信件",
        path: "/contact/email",
      },
      {
        title: "公司據點",
        path: "/contact/map",
      }
    ],
  },
  {
    title: "權限管理",
    icon: Lock,
    path: "/priv",
    children: [
      {
        title: "管理員列表",
        path: "/priv/admin",
      },
      {
        title: "管理員紀錄",
        path: "/priv/adminlog",
      },
    ],
  },
  {
    title: "站台設定",
    icon: Lock,
    path: "/site/config",
  },
]);

const handleSelect = (key, keyPath) => {
  router.push(key);
}

</script>

<template>
  <el-menu
    active-text-color="#fefefe"
    background-color="#032121"
    text-color="#ccc"
    unique-opened
    class="el-menu-vertical"    
    :collapse=collapse
    :default-active="$route.path"
    @select="handleSelect"  
  >
    <div class="logo">WEISEN</div>

    <template v-for="(menu, index) in menuData" :key="index">
      <el-sub-menu
        :index="menu.path"
        v-if="menu.children && menu.children.length > 0"
      >
        <template #title>
          <el-icon>
            <component :is="menu.icon" />
          </el-icon>
          <span>{{ menu.title }}</span>
        </template>
        <el-menu-item
          v-for="(item, i) in menu.children" 
          :index="item.path" 
        >
        {{ item.title }}
        </el-menu-item>
      </el-sub-menu>
      <el-menu-item :index="menu.path" v-else>
        <el-icon>
          <component :is="menu.icon" />
        </el-icon>
        <span>{{ menu.title }}</span>
      </el-menu-item>
    </template>
  </el-menu>
</template>

<style lang="less" scoped>
.logo {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 50px;
}

.el-menu-vertical:not(.el-menu--collapse) {
  width: 220px;
}

.el-menu{
  min-height: 100vh;
  border: none;
  .el-menu-item {
  &.is-active {
    background-color: #13c2c2;
  }
}

}
</style>
