<template>
  <div class="con-left">
    <el-menu
      :default-active="`${type}`"
      @select="handleSelect"
      class="el-menu-vertical-demo"
    >
      <el-submenu index="1">
        <template slot="title">
          <i class="el-icon-menu"></i>
          <span slot="title">{{title}}</span>
        </template>
        <el-menu-item
          v-for="(item, i) in menu"
          :key="i"
          :index="item.id"
          >{{ item.name }}</el-menu-item
        >
      </el-submenu>
    </el-menu>
    <!-- <div class="sousuo" @click="isCollapse = !isCollapse">
      <i :class="isCollapse ? 'el-icon-arrow-right' : 'el-icon-arrow-left'"></i>
    </div> -->
  </div>
</template>

<script>

export default {
  props:['menu','title','default'],
  data() {
    return {
      type: this.default
    };
  },
  methods:{
    handleSelect(data){
      this.$emit('select',data)
    }
  }
};
</script>

<style lang="less" scoped>
.con-left {
  border-right: solid 1px #e5e5e5;
  position: relative;
  margin-right: 20px;
  padding-top: 40px;
  .sousuo {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: -30px;
    cursor: pointer;
  }
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}
.el-menu {
  border-right: none !important;
}
</style>
