<template>
  <el-aside class="aside">
    <div class="head">
      <div>
        <!-- <img src="https://s.weituibao.com/1582958061265/mlogo.png" alt="logo" /> -->
        <span>智能监测</span>
      </div>
    </div>
    <div class="line" />
    <el-menu
      :default-openeds="state.defaultOpen"
      background-color="#222832"
      text-color="#fff"
      :router="true"
      :default-active="currentPath"
    >
      <el-menu-item :index="list.index" v-for="(list, i) of state.menuList"
            ><i class="el-icon-data-line" />{{list.name}}</el-menu-item
          >
    </el-menu>
  </el-aside>
</template>
<script>
import { onMounted, reactive } from "vue";
import { useStore } from 'vuex'
export default {
  name: "Sidebar",
  props: {
    currentPath: String,
  },
  setup() {
    const store = useStore()
    const state = reactive({
      defaultOpen: ["1",],
      menuList: [
          {
              id: 1,
              name: '首页',
              index: '/home'
          },
          {
              id: 2,
              name: '液位',
              index: '/level'
          },
          {
              id: 3,
              name: '流量',
              index: '/flow'
          },
           {
              id: 4,
              name: '水质',
              index: '/quality'
          },
          {
              id: 5,
              name: '联动',
              index: '/link'
          }
      ]
    });
    return {
      state,
    };
  },
};
</script>
<style lang="scss" scoped>
.aside {
  width: 200px !important;
  background-color: #222832;
  overflow: hidden;
  overflow-y: auto;
  -ms-overflow-style: none;
  overflow: -moz-scrollbars-none;
}
.aside::-webkit-scrollbar {
  display: none;
}

.head {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  div {
    display: flex;
    align-items: center;
  }
  img {
    width: 50px;
    height: 50px;
    margin-right: 10px;
  }
  span {
    font-size: 20px;
    color: #ffffff;
  }
}
.line {
  border-top: 1px solid hsla(0, 0%, 100%, 0.05);
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}
</style>