<template>
  <!-- 左侧菜单 -->
  <div :class="{ 'has-logo': sidebarLogo }">
    <logo v-if="sidebarLogo" :collapse="!appStore.sidebar.opened" />
    <div class="myRouter">
      <div class="myRouter-item" @click="routerTo('/createVideo')">
        <div class="icon">
          <el-icon><i-ep-edit /></el-icon>
        </div>
        {{ $t("createVideo.title") }}
      </div>
      <div class="myRouter-item" @click="routerTo('/myCreating')">
        <div class="icon">
          <el-icon><i-ep-menu /></el-icon>
        </div>
        {{ $t("myCreating.title") }}
      </div>
      <div class="myRouter-item pricing" @click="routerTo('/myStore')">
        <div class="icon">
          <el-icon><i-ep-Goods /></el-icon>
        </div>
        {{ $t("shop.title") }}
      </div>
      <div class="myRouter-item API" @click="routerTo('/APIAccess')">
        <div class="icon">
          <el-icon><i-ep-DocumentAdd /></el-icon>
        </div>
        {{ $t("API.title") }}
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { RouteLocationRaw, useRoute, useRouter } from "vue-router";

import SidebarItem from "./SidebarItem.vue";
import Logo from "./Logo.vue";

import { useSettingsStore } from "@/store/modules/settings";
import { usePermissionStore } from "@/store/modules/permission";
import { useAppStore } from "@/store/modules/app";
import { storeToRefs } from "pinia";
import variables from "@/styles/variables.module.scss";

// 静态路由
import { constantRoutes } from "@/router";
const settingsStore = useSettingsStore();
const permissionStore = usePermissionStore();
const appStore = useAppStore();

const { sidebarLogo } = storeToRefs(settingsStore);
const route = useRoute();
const router = useRouter();

function routerTo(url: RouteLocationRaw) {
  router.push(url);
}
</script>

<style lang="scss" scoped>
.myRouter {
  position: relative;
  height: calc(100% - 80px);
  padding: 200px 20px 0;
  color: #fff;

  &-item {
    display: flex;
    width: 100%;
    height: 50px;
    padding-left: 10px;
    font-size: 20px;
    font-weight: 500;
    line-height: 50px;
    text-align: center;
    cursor: pointer;
    border-bottom: 2px solid #fff;
    transition: all 0.3s;
    border-radius: 5px;
    margin-bottom: 20px;
    margin-right: 20px;

    .icon {
      width: 40px;
      height: 40px;
      color: #fff;
      border-radius: 50%;

      .el-icon {
        width: 25px;
        height: 25px;
        font-size: 25px;
        color: #fff;
        text-align: center;
        vertical-align: sub;
      }
    }

    &:hover {
      color: #000;
      background-color: #ffffff;

      .el-icon {
        color: #000;
      }
    }
  }

  .pricing {
    position: absolute;
    bottom: 60px;
    width: calc(100% - 40px);
    text-align: center;
  }
  .API {
    position: absolute;
    bottom: 0px;
    width: calc(100% - 40px);
    text-align: center;
  }
}

:deep(.el-sub-menu__title) {
  background-color: #000 !important;
}

:deep(.el-menu-item) {
  div {
    background-color: #000 !important;
  }

  background-color: #000 !important;
}

:deep(.el-menu-item.is-active) {
  color: #fff;
}
</style>
