<template>
  <a-layout-sider
    :class="['sider', isDesktop() ? null : 'shadow', theme, fixSiderbar ? 'ant-fixed-sidemenu' : null, layoutMode === 'iotmenu' ? 'iot-menu-set' : '' ]"
    width="315px"
    :collapsible="collapsible"
    v-model="collapsed"
    :trigger="null">
    <!-- IoT TPM相关 修改框架 -->
    <!-- width="208px" -->
    <!-- IoT Edge相关 修改框架 -->
    <logo v-if="layoutMode !== 'iotmenu'" />
    <!-- <logo /> -->
    <s-menu
      :collapsed="collapsed"
      :menu="menus"
      :theme="theme"
      @select="onSelect"
      @updateMenuTitle="onUpdateMenuTitle"
      :mode="mode"
      :style="smenuStyle">
    </s-menu>
  </a-layout-sider>

</template>

<script>
  import ALayoutSider from 'ant-design-vue/es/layout/Sider'
  import Logo from '../tools/Logo'
  import SMenu from './index'
  import { mixin, mixinDevice } from '@/utils/mixin.js'

  export default {
    name: "SideMenu",
    components: { ALayoutSider, Logo, SMenu },
    mixins: [mixin, mixinDevice],
    props: {
      mode: {
        type: String,
        required: false,
        default: 'inline'
      },
      theme: {
        type: String,
        required: false,
        default: 'dark'
      },
      collapsible: {
        type: Boolean,
        required: false,
        default: false
      },
      collapsed: {
        type: Boolean,
        required: false,
        default: false
      },
      menus: {
        type: Array,
        required: true
      }
    },
    computed:{
      smenuStyle() {
        let style = { 'padding': '0' }
        if (this.fixSiderbar) {
          style['height'] = 'calc(100% - 59px)'
          style['overflow'] = 'auto'
          style['overflow-x'] = 'hidden'
        }
        return style
      }
    },
    methods: {
      onSelect (obj) {
        this.$emit('menuSelect', obj)
      },
      onUpdateMenuTitle (obj) {
        this.$emit('updateMenuTitle', obj)
      }
    }
  }
</script>
<style lang="less">
  // IoT Edge相关 修改框架
  // .iot-menu-set{
  //   padding-top: 12px;
  //   background: linear-gradient(0deg,#e6edf3,#fff) !important;
  //   box-shadow: 0 0 14px 0 rgba(2,72,109,.2)!important;
  //   ul.ant-menu {
  //     background-color: transparent;
  //     .ant-menu-item{
  //       margin: 0;
  //     }
  //   }
  //   // 选种样式
  //   .ant-menu-submenu-selected{
  //     // 父级菜单
  //     .ant-menu-submenu-title{
  //       background-color: #1890ff !important;
  //       color: #fff;
  //       margin: 0;
  //     }
  //     // 子级
  //     .ant-menu-item-selected{
  //       background: linear-gradient(90deg,hsla(0,0%,100%,0),rgba(1,159,243,.5));
  //     }
  //   }
  //   .ant-menu-submenu-open{
  //     .ant-menu-submenu-title{
  //       background: linear-gradient(90deg,hsla(0,0%,100%,0),rgba(1,159,243,.5));
  //     }
  //   }
  // }
  // IoT TPM相关 修改框架
  .iot-menu-set{
    background-color: #E1E1E1 !important;
    box-shadow: 1px 0 4px #c8c8c8 !important;
    border-right: 1px solid #c8c8c8;
    // 根菜单（最外层菜单）
    // .ant-menu-root{

    // }
    // 每一层menu
    ul.ant-menu {
      background-color: transparent;
      // 每一个有子级的菜单区域
      .ant-menu-submenu{
        // 标题
        .ant-menu-submenu-title{
          font-size: 16px;
          color: #323233;
          // line-height: 24px;
          font-weight: 700;
          // margin: 0; // 一模一样
        }
        // 子级每一个
        .ant-menu-item{
          // margin: 0;
          font-size: 16px;
          font-weight: 400;
          font-style: normal;
          a{
            color: #323233;
          }
        }
      }
      // 有子级的菜单选中状态
      .ant-menu-submenu-selected{
        background: #fafafa;
      }
      // 有子级的菜单打开状态
      .ant-menu-submenu-open{

      }
      // 打开状态下当前菜单的子级区域 
      ul.ant-menu-sub{
        position: relative;
        &::before{
          content: "";
          display: table;
          position: absolute;
          // left: 38px; // 一模一样
          left: 54px;
          background-color: #c8c8c8;
          width: 1px;
          height: 100%;
          z-index: 8;
        }
        // 每一个子级页面菜单（无子级）
        .ant-menu-item{
          // margin: 0; // 一模一样
          margin-top: 0;
          padding-left: 64px !important;
        }
        // 选中的子级页面菜单（无子级）
        .ant-menu-item-selected{
          background: linear-gradient(315deg,rgba(11,76,217,.1) 0%,rgba(0,140,214,.1) 100%),#ffffff;
          position: relative;
          &::after{
            display: table;
            content: "";
            position: absolute;
            // left: 38px; // 一模一样
            left: 54px;
            background-color: #008cd6;
            width: 4px;
            height: 24px;
            top: 8px;
            z-index: 8;
          }
          a{
            color: #008cd6;
            font-weight: 700;
          }
        }
      }
      
    }
    // 滚动条样式
    &::-webkit-scrollbar{
      width: 6px !important;
    }
    &::-webkit-scrollbar-track{
      background: #E1E1E1 !important;
    }
    &::-webkit-scrollbar-thumb{
      background-color: #E9E9E2 !important;
    }
  }
</style>
<style lang="less" scoped>

  /* update_begin author:sunjianlei date:20190509 for: 修改侧边导航栏滚动条的样式 */
  .sider {
    @scrollBarSize: 10px;

    ul.ant-menu {

      /* 定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
      &::-webkit-scrollbar {
        width: @scrollBarSize;
        height: @scrollBarSize;
        background-color: transparent;
        display: none;
      }

      & .-o-scrollbar {
        display: none;
      }

      /* 兼容IE */
      -ms-overflow-style: none;
      -ms-scroll-chaining: chained;
      -ms-content-zooming: zoom;
      -ms-scroll-rails: none;
      -ms-content-zoom-limit-min: 100%;
      -ms-content-zoom-limit-max: 500%;
      -ms-scroll-snap-type: proximity;
      -ms-scroll-snap-points-x: snapList(100%, 200%, 300%, 400%, 500%);

      /* 定义滚动条轨道 */
      &::-webkit-scrollbar-track {
        background-color: transparent;
      }

      /* 定义滑块 */
      &::-webkit-scrollbar-thumb {
        border-radius: @scrollBarSize;
        background-color: #eee;
        box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);

        &:hover {
          background-color: #dddddd;
        }

        &:active {
          background-color: #bbbbbb;
        }
      }
    }

    /** 暗色系滚动条样式 */
    &.dark ul.ant-menu {
      &::-webkit-scrollbar-thumb {
        background-color: #666666;

        &:hover {
          background-color: #808080;
        }

        &:active {
          background-color: #999999;
        }
      }
    }

  }

  /* update_end author:sunjianlei date:20190509 for: 修改侧边导航栏滚动条的样式 */
</style>

<!-- update_begin author:sunjianlei date:20190530 for: 选中首页的时候不显示背景颜色 -->
<style lang="less">
   // 选中首页的时候不显示背景颜色，只应用于左侧菜单
  .sider .ant-menu.ant-menu-root {
    & > .ant-menu-item:first-child {
      background-color: transparent;

      & > a, & > a:hover {
        color: rgba(0, 0, 0, 0.65);
      }

      &.ant-menu-item-selected {
        & > a, & > a:hover {
          color: @primary-color;
        }
      }
    }

    &.ant-menu-dark > .ant-menu-item:first-child {
      & > a, & > a:hover {
        color: rgba(255, 255, 255, 0.65);
      }

      &.ant-menu-item-selected {
        & > a, & > a:hover {
          color: rgba(255, 255, 255, 1);
        }
      }
    }
  }
</style>
<!-- update_end author:sunjianlei date:20190530 for: 选中首页的时候不显示背景颜色 -->
