<template>
  <a-layout-sider
    :theme="sideTheme"
    :class="['side-menu', isMobile ? null : 'shadow']"
    width="256px"
    :collapsible="collapsible"
    v-model="collapsed"
    :trigger="null"
  >
    <div :class="['logo', theme]">
      <router-link to="/agreement/agreement">
        <img src="@/assets/img/title.png" />
        <h1>晋掌柜控制台</h1>
      </router-link>
    </div>
    <a-menu
      style="width: 256px"
      :default-selected-keys="['1']"
      mode="inline"
      @click="handleClick"
    >
      <a-sub-menu v-for="item in menuData" :key="item.id">
        <span slot="title"
          ><a-icon :type="item.icon" /><span>{{ item.name }}</span></span
        >

        <a-menu-item
          v-for="val in item.children"
          :key="val.id"
          v-show="val.type == 1"
        >
          <div @click="routerChange(val, item)">{{ val.name }}</div>
        </a-menu-item>
        <a-sub-menu
          v-for="(val, index) in item.children"
          :key="index"
          v-show="val.type == 0"
        >
          <span slot="title"
            ><span>{{ val.name }}</span></span
          >
          <a-menu-item
            v-for="three in val.children"
            :key="three.id"
            v-show="three.name != '团队管理'"
          >
            <div @click="routerChange(three, val)">
              {{ three.name }}
            </div>
          </a-menu-item>
        </a-sub-menu>
      </a-sub-menu>
    </a-menu>
  </a-layout-sider>
</template>

<script>
// import IMenu from "./menu";
import { mapState, mapGetters } from "vuex";
export default {
  name: "SideMenu",
  // components: { IMenu },
  props: {
    collapsible: {
      type: Boolean,
      required: false,
      default: false,
    },
    collapsed: {
      type: Boolean,
      required: false,
      default: false,
    },
    menuData: {
      type: Array,
      required: true,
    },
    theme: {
      type: String,
      required: false,
      default: "dark",
    },
  },
  computed: {
    sideTheme() {
      return this.theme == "light" ? this.theme : "dark";
    },
    ...mapState("setting", ["isMobile", "systemName"]),
    ...mapGetters("setting", ["firstMenu", "subMenu", "menuData"]),
  },
  created() {
    // console.log(this.menuData);
  },
  methods: {
    handleClick(e) {
      console.log("click", e);
    },

    onSelect(obj) {
      this.$emit("menuSelect", obj);
    },
    routerChange(val, parent) {
      // console.log(val, parent);
      // console.log(this.$router);
      this.$router.replace({
        path: "/" + parent.url + "/" + val.url,
      });
    },
  },
};
</script>

<style lang="less" scoped>
@import "index";
.ant-layout .ant-layout-sider {
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-color: #000 !important;
  scrollbar-width: thin;
  -ms-overflow-style: none;
  position: relative;

  /* 滚动条轨道样式 */
  // &::-webkit-scrollbar {
  //   width: 8px; /* 设置滚动条宽度 */
  // }

  /* 滚动条滑块样式 */
  &::-webkit-scrollbar-thumb {
    background-color: blue !important; /* 设置滑块背景颜色 */
    border-radius: 4px; /* 设置滑块圆角 */
  }

  /* 滚动条轨道hover状态样式 */
  &::-webkit-scrollbar-track:hover {
    background-color: #f1f1f1; /* 设置轨道hover状态时的背景颜色 */
  }

  /* 滚动条滑块hover状态样式 */
  &::-webkit-scrollbar-thumb:hover {
    background-color: #555; /* 设置滑块hover状态时的背景颜色 */
  }
}
.ant-layout .ant-layout-sider::-webkit-scrollbar-button {
  display: none;
}

.ant-layout .ant-layout-sider::-webkit-scrollbar-thumb {
  border-radius: 8px;
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  background: #666666;
}
</style>
