<template>
  <div class="left-side">
    <div class="logo">
      <router-link to="/home">
        <h1>
          <img src="@/assets/img/nav/logo.svg" alt="云眼" />
        </h1>
      </router-link>
    </div>
    <div class="menu-container">
      <ul class="menu">
        <li v-for="link in cloudEyesRouteLinkList" :key="link.path">
          <router-link :to="link.path">
            <svg-icon :type="link.icon" :className="link.icon"></svg-icon>
            <span class="name">{{ link.name }}</span>
          </router-link>
        </li>
      </ul>
    </div>
    <div class="user-setting">
      <div class="full-screen">
        <img src="@/assets/img/nav/fullScreen.svg" alt="全屏" />
      </div>
      <div class="user-info">
        <img src="@/assets/img/nav/user.svg" alt="用户信息" />
      </div>
    </div>
  </div>
</template>

<script lang="ts">
  import { defineComponent } from "vue";

  const cloudEyesRouteLinkList = [
    {
      name: "首页",
      path: "/home",
      icon: "home",
    },
    {
      name: "监控",
      path: "/monitor",
      icon: "monitor",
    },
    {
      name: "统计",
      path: "/statistics",
      icon: "statistics",
    },
    {
      name: "设备",
      path: "/device",
      icon: "device",
    },
  ];

  export default defineComponent({
    setup() {
      return {
        cloudEyesRouteLinkList,
      };
    },
  });
</script>

<style lang="less" scoped>
  @import "~@/assets/style/scrollbar.less";

  .left-side {
    width: 0.6rem;
    height: 100%;
    padding: 0.2rem 0;
    box-sizing: border-box;
    background: #272d43;
    color: #fff;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;

    .logo {
      width: 0.32rem;
      height: 0.32rem;
      margin-bottom: 0.48rem;
      flex: none;
      img {
        width: 100%;
        height: 100%;
      }
    }

    .menu-container {
      overflow-y: scroll;
      width: 100%;
      flex: auto;
      padding: 0 0 0 0.05rem;
      box-sizing: border-box;
      .scrollbar();

      .menu {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        font-size: 0.24rem;
        flex: auto;
        li {
          display: flex;
          align-items: center;
          justify-content: center;
          margin-bottom: 0.5rem;
          a {
            display: flex;
            flex-direction: column;
            align-items: center;
            color: #fff;
            opacity: 0.6;

            &.router-link-active {
              opacity: 1;
            }

            .name {
              font-size: 0.14rem;
              margin-top: 0.08rem;
            }
          }
        }
      }
    }

    .user-setting {
      padding-top: 0.2rem;
      display: flex;
      flex-direction: column;
      align-items: center;
      flex: none;

      & > div {
        opacity: 0.6;
        cursor: pointer;
        &:hover {
          opacity: 1;
        }
      }

      .full-screen {
        img {
          width: 0.24rem;
          height: 0.24rem;
        }
      }
      .user-info {
        margin-top: 0.2rem;
        img {
          width: 0.32rem;
          height: 0.32rem;
        }
      }
    }
  }
</style>
