<template>
  <a-layout-sider
    :theme="sideTheme"
    :class="['side-menu', 'beauty-scroll', isMobile ? null : 'shadow']"
    width="256px"
    :collapsible="collapsible"
    v-model="collapsed"
    :trigger="null">
    <div :class="['logo', theme]">
      <router-link :to="homePage">
        <a-row type="flex" align="middle" style="height: 64px;word-wrap: break-word;word-break:break-all;">
          <a-col :span="4">
            <img :src="logoSrc" alt="logo">
          </a-col>
          <a-col :span="20" style="line-height: 18px;" v-show="!collapsed">
            <span style="vertical-align: middle" :style="{ fontWeight: 'bold', fontSize: systemNameFontSizeMain, color: 'white' }">{{ systemName }}</span>
          </a-col>
        </a-row>
      </router-link>
    </div>
    <i-menu :theme="theme" :collapsed="collapsed" :options="menuData" @select="onSelect" class="menu"/>
  </a-layout-sider>
</template>

<script>
import IMenu from './menu'
import { mapState } 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'
    },
    systemNameFontSizeMain () {
      let systemNameFontSize = this.systemNameFontSize
      if (this.systemName.length > 15) {
        systemNameFontSize = '18px'
      }
      return systemNameFontSize
    },
    ...mapState('setting', ['isMobile', 'systemName', 'logoSrc', 'systemNameFontSize', 'homePage'])
  },
  methods: {
    onSelect (obj) {
      this.$emit('menuSelect', obj)
    }
  }
}
</script>

<style lang="less" scoped>
@import "index";
</style>
