<template>
  <div>
    <div style="border-bottom: 1px solid #E8E8E8;display: flex;justify-content: space-between;margin:0 22px;height: 50px;">
      <span style="line-height: 4;">菜单</span>
      <span style="line-height: 4;">{{switchStatus ? "展示(开/关)" : ""}}</span>
    </div>
    <div style="overflow: auto;" :style="{'height': height+ 'px'}">

      <div v-if="loading" class="loading">加载中...</div>
      <el-menu
        v-else
        unique-opened
        mode="vertical"
        :show-timeout="200"
      >
        <sidebar-item
          :menu="menu"
          :switchStatus="switchStatus"
          :props="website.menu.props"
          first
        ></sidebar-item>
      </el-menu>
    </div>
  </div>
</template>

<script>
  import sidebarItem from "./menu";
export default {
  name: "menu",
  components: {sidebarItem},
  props: {
    menu: {
      type: Array
    },
    switchStatus: {
      type: Boolean,
      default: false
    },
    loading: {
      type: Boolean,
      default: false
    },
  },
  data () {
    return{
      height: 500,
    }
  },
  created() {
    this.tableHeight()
  },
  methods: {
    tableHeight () {
      let tableH = 280
      this.height = window.innerHeight - tableH
    }
  }

}
</script>

<style scoped>
  .menuName{
    display: flex;
    align-items: center;
  }
  .menuName .icon{
    width: 6px;
    height: 6px;
    background:  rgba(0, 0, 0, 0.1);;
    border-radius: 50%;
    margin-right: 7px;
  }
  .menuName .icon_blue{
    background: #1890FF;
  }
  .loading{
    margin: 20px;
    text-align: center;
  }
</style>
