<template>
  <el-menu
    :default-active="this.$store.state.currentMenuItem"
    style="width: 220px; height: 100%"
    background-color="#141B29"
    text-color="#fff"
    active-text-color="#ffd04b"
    :router="true"
  >
    <el-sub-menu v-for="(item, index) in menu" :key="item" :index="index">
      <template v-slot:title>
        <i :class="item.icon"></i>
        <span>{{ item.title }}</span>
      </template>
      <el-menu-item
        v-for="son in item.items"
        :index="son.path"
        :key="son"
        @click="changeIndex(son.path)"
      >
        {{ son.name }}
      </el-menu-item>
    </el-sub-menu>
  </el-menu>
</template>
<script>
import { ref } from "vue";
export default {
  setup() {
    let defaultActive = ref();
    function changeIndex(path) {
      defaultActive.value = path;
    }
    let menu = [
      {
        icon: "el-icon-s-unfold",
        title: "货主信息",
        items: [
          {
            path: "/cargoOwnerManage/cargoOwnerList",
            name: "货主列表",
          },
        ],
      },
      {
        icon: "el-icon-user",
        title: "船东信息",
        items: [
          {
            path: "/shipOwnerManage/shipOwnerList",
            name: "船东列表",
          },
        ],
      },
      {
        icon: "el-icon-ship",
        title: "船舶信息",
        items: [
          {
            path: "/shipInfo/shipList",
            name: "船舶列表",
          },
        ],
      },
      {
        icon: "el-icon-s-data",
        title: "航次",
        items: [
          {
            path: "/voyage/voyageList",
            name: "航次列表",
          },
        ],
      },
      {
        icon: "el-icon-picture-outline",
        title: "鉴图/视频",
        items: [
          {
            path: "/index/mediaCheck",
            name: "鉴图/视频",
          },
        ],
      },
    ];

    return {
      changeIndex,
      defaultActive,
      menu,
    };
  },
};
</script>
