<script>
export default {
  name: "Aside",
  props:{
    isCollapse: Boolean,
    logoTextShow: Boolean
  },
  data(){
    return{
      personnelChoose:true
    }
  },
  methods:{
    showSample1(){
      const sentences = [
        "这是第1句话。",
        "这是第2句话。",
        "这是第3句话。",
        "这是第4句话。",
        "这是第5句话。",
        "这是第6句话。",
        "这是第7句话。",
        "这是第8句话。",
        "这是第9句话。",
        "这是第10句话。"
      ];
      alert(sentences.join('\n'));
    },
    isSelectedPersonnelRecognition() {
      return this.personnelChoose;
    },
    handlePersonnelSelect(){
      this.personnelChoose = !this.personnelChoose;
    }
  }
}
</script>

<template>
    <el-menu :default-openeds="['1', '3']" style="min-height: 100%; overflow-x: hidden"
             background-color="rgb(48, 65, 86)"
             text-color="#fff"
             active-text-color="#ffd04b"
             :collapse-transition="false"
             :collapse="isCollapse"
             router
    >
      <div style="height: 60px; line-height: 60px; text-align: center">
        <!--      <img src="../assets/logo.png" alt="" style="width: 20px; position: relative; top: 5px; right: 5px">-->
        <b style="color: white" v-show="logoTextShow">脑电数据管理系统</b>
      </div>

      <el-submenu index="/">
        <template slot="title">
          <i class="el-icon-s-home"></i>
          <span slot="title">主页</span>
        </template>
        <el-menu-item index="/">
          <template slot="title">
            <i class="el-icon-house"></i>
            <span slot="title">主页</span>
          </template>
        </el-menu-item>
      </el-submenu>

      <el-submenu index="2">
        <template slot="title">
          <i class="el-icon-menu"></i>
          <span slot="title">脑电采集</span>
        </template>
        <el-menu-item index="/sample1" @mouseover="showSample1">
          <template slot="title">
            <i class="el-icon-s-grid"></i>
            <span slot="title">第1组</span>
          </template>
        </el-menu-item>
        <el-menu-item index="/sample2">
          <template slot="title">
            <i class="el-icon-s-grid"></i>
            <span slot="title">第2组</span>
          </template>
        </el-menu-item>
        <el-menu-item index="/sample3">
          <template slot="title">
            <i class="el-icon-s-grid"></i>
            <span slot="title">第3组</span>
          </template>
        </el-menu-item>
        <el-menu-item index="/sample4">
          <template slot="title">
            <i class="el-icon-s-grid"></i>
            <span slot="title">第4组</span>
          </template>
        </el-menu-item>
        <el-menu-item index="/sample5">
          <template slot="title">
            <i class="el-icon-s-grid"></i>
            <span slot="title">第5组</span>
          </template>
        </el-menu-item>
      </el-submenu>

      <el-submenu index="3" :class="{'hide-scrollbar':isSelectedPersonnelRecognition}" style="max-height: 200px; overflow-y: auto; overflow-x: hidden">
        <template slot="title" @click="handlePersonnelSelect">
          <i class="el-icon-user-solid"></i>
          <span slot="title">人员识别</span>
        </template>
        <el-menu-item index="/id1">
          <template slot="title">
            <i class="el-icon-user"></i>
            <span slot="title">被试1号</span>
          </template>
        </el-menu-item>
        <el-menu-item index="/id2">
          <template slot="title">
            <i class="el-icon-user"></i>
            <span slot="title">被试2号</span>
          </template>
        </el-menu-item>
        <el-menu-item index="/id3">
          <template slot="title">
            <i class="el-icon-user"></i>
            <span slot="title">被试3号</span>
          </template>
        </el-menu-item>
        <el-menu-item index="/id4">
          <template slot="title">
            <i class="el-icon-user"></i>
            <span slot="title">被试4号</span>
          </template>
        </el-menu-item>
        <el-menu-item index="/id5">
          <template slot="title">
            <i class="el-icon-user"></i>
            <span slot="title">被试5号</span>
          </template>
        </el-menu-item>
        <el-menu-item index="/id6">
          <template slot="title">
            <i class="el-icon-user"></i>
            <span slot="title">被试6号</span>
          </template>
        </el-menu-item>
        <el-menu-item index="/id7">
          <template slot="title">
            <i class="el-icon-user"></i>
            <span slot="title">被试7号</span>
          </template>
        </el-menu-item>
        <el-menu-item index="/id8">
          <template slot="title">
            <i class="el-icon-user"></i>
            <span slot="title">被试8号</span>
          </template>
        </el-menu-item>
        <el-menu-item index="/id9">
          <template slot="title">
            <i class="el-icon-user"></i>
            <span slot="title">被试9号</span>
          </template>
        </el-menu-item>
        <el-menu-item index="/id10">
          <template slot="title">
            <i class="el-icon-user"></i>
            <span slot="title">被试10号</span>
          </template>
        </el-menu-item>
        <el-menu-item index="/id11">
          <template slot="title">
            <i class="el-icon-user"></i>
            <span slot="title">被试11号</span>
          </template>
        </el-menu-item>
        <el-menu-item index="/id12">
          <template slot="title">
            <i class="el-icon-user"></i>
            <span slot="title">被试12号</span>
          </template>
        </el-menu-item>
        <el-menu-item index="/id13">
          <template slot="title">
            <i class="el-icon-user"></i>
            <span slot="title">被试13号</span>
          </template>
        </el-menu-item>
        <el-menu-item index="/id14">
          <template slot="title">
            <i class="el-icon-user"></i>
            <span slot="title">被试14号</span>
          </template>
        </el-menu-item>
        <el-menu-item index="/id15">
          <template slot="title">
            <i class="el-icon-user"></i>
            <span slot="title">被试15号</span>
          </template>
        </el-menu-item>
        <el-menu-item index="/id16">
          <template slot="title">
            <i class="el-icon-user"></i>
            <span slot="title">被试16号</span>
          </template>
        </el-menu-item>
        <el-menu-item index="/id17">
          <template slot="title">
            <i class="el-icon-user"></i>
            <span slot="title">被试17号</span>
          </template>
        </el-menu-item>
        <el-menu-item index="/id18">
          <template slot="title">
            <i class="el-icon-user"></i>
            <span slot="title">被试18号</span>
          </template>
        </el-menu-item>
        <el-menu-item index="/id19">
          <template slot="title">
            <i class="el-icon-user"></i>
            <span slot="title">被试19号</span>
          </template>
        </el-menu-item>
        <el-menu-item index="/id20">
          <template slot="title">
            <i class="el-icon-user"></i>
            <span slot="title">被试20号</span>
          </template>
        </el-menu-item>
        <el-menu-item index="/id21">
          <template slot="title">
            <i class="el-icon-user"></i>
            <span slot="title">被试21号</span>
          </template>
        </el-menu-item>
        <el-menu-item index="/id22">
          <template slot="title">
            <i class="el-icon-user"></i>
            <span slot="title">被试22号</span>
          </template>
        </el-menu-item>
        <el-menu-item index="/id23">
          <template slot="title">
            <i class="el-icon-user"></i>
            <span slot="title">被试23号</span>
          </template>
        </el-menu-item>
        <el-menu-item index="/id24">
          <template slot="title">
            <i class="el-icon-user"></i>
            <span slot="title">被试24号</span>
          </template>
        </el-menu-item>
        <el-menu-item index="/id25">
          <template slot="title">
            <i class="el-icon-user"></i>
            <span slot="title">被试25号</span>
          </template>
        </el-menu-item>
        <el-menu-item index="/id26">
          <template slot="title">
            <i class="el-icon-user"></i>
            <span slot="title">被试26号</span>
          </template>
        </el-menu-item>
        <el-menu-item index="/id27">
          <template slot="title">
            <i class="el-icon-user"></i>
            <span slot="title">被试27号</span>
          </template>
        </el-menu-item>
        <el-menu-item index="/id28">
          <template slot="title">
            <i class="el-icon-user"></i>
            <span slot="title">被试28号</span>
          </template>
        </el-menu-item>
        <el-menu-item index="/id29">
          <template slot="title">
            <i class="el-icon-user"></i>
            <span slot="title">被试29号</span>
          </template>
        </el-menu-item>
        <el-menu-item index="/id30">
          <template slot="title">
            <i class="el-icon-user"></i>
            <span slot="title">被试30号</span>
          </template>
        </el-menu-item>
      </el-submenu>

      <el-submenu index="4">
        <template slot="title">
          <i class="el-icon-s-data"></i>
          <span slot="title">内容识别</span>
        </template>
        <el-menu-item index="/data1">
          <template slot="title">
            <i class="el-icon-s-opportunity"></i>
            <span slot="title">数据1/句子1</span>
          </template>
        </el-menu-item>
        <el-menu-item index="/data2">
          <template slot="title">
            <i class="el-icon-s-opportunity"></i>
            <span slot="title">数据2/句子2</span>
          </template>
        </el-menu-item>
        <el-menu-item index="/data3">
          <template slot="title">
            <i class="el-icon-s-opportunity"></i>
            <span slot="title">数据3/句子3</span>
          </template>
        </el-menu-item>
        <el-menu-item index="/data4">
          <template slot="title">
            <i class="el-icon-s-opportunity"></i>
            <span slot="title">数据4/句子4</span>
          </template>
        </el-menu-item>
        <el-menu-item index="/data5">
          <template slot="title">
            <i class="el-icon-s-opportunity"></i>
            <span slot="title">数据5/句子5</span>
          </template>
        </el-menu-item>
        <el-menu-item index="/data6">
          <template slot="title">
            <i class="el-icon-s-opportunity"></i>
            <span slot="title">数据6/句子6</span>
          </template>
        </el-menu-item>
        <el-menu-item index="/data7">
          <template slot="title">
            <i class="el-icon-s-opportunity"></i>
            <span slot="title">数据7/句子7</span>
          </template>
        </el-menu-item>
        <el-menu-item index="/data8">
          <template slot="title">
            <i class="el-icon-s-opportunity"></i>
            <span slot="title">数据8/句子8</span>
          </template>
        </el-menu-item>
        <el-menu-item index="/data9">
          <template slot="title">
            <i class="el-icon-s-opportunity"></i>
            <span slot="title">数据9/句子9</span>
          </template>
        </el-menu-item>
        <el-menu-item index="/data10">
          <template slot="title">
            <i class="el-icon-s-opportunity"></i>
            <span slot="title">数据10/句子10</span>
          </template>
        </el-menu-item>
        <el-menu-item index="/data11">
          <template slot="title">
            <i class="el-icon-s-opportunity"></i>
            <span slot="title">数据11/句子11</span>
          </template>
        </el-menu-item>
        <el-menu-item index="/data12">
          <template slot="title">
            <i class="el-icon-s-opportunity"></i>
            <span slot="title">数据12/句子12</span>
          </template>
        </el-menu-item>
        <el-menu-item index="/data13">
          <template slot="title">
            <i class="el-icon-s-opportunity"></i>
            <span slot="title">数据13/句子13</span>
          </template>
        </el-menu-item>
        <el-menu-item index="/data14">
          <template slot="title">
            <i class="el-icon-s-opportunity"></i>
            <span slot="title">数据14/句子14</span>
          </template>
        </el-menu-item>
        <el-menu-item index="/data15">
          <template slot="title">
            <i class="el-icon-s-opportunity"></i>
            <span slot="title">数据15/句子15</span>
          </template>
        </el-menu-item>
        <el-menu-item index="/data16">
          <template slot="title">
            <i class="el-icon-s-opportunity"></i>
            <span slot="title">数据16/句子16</span>
          </template>
        </el-menu-item>
        <el-menu-item index="/data17">
          <template slot="title">
            <i class="el-icon-s-opportunity"></i>
            <span slot="title">数据17/句子17</span>
          </template>
        </el-menu-item>
        <el-menu-item index="/data18">
          <template slot="title">
            <i class="el-icon-s-opportunity"></i>
            <span slot="title">数据18/句子18</span>
          </template>
        </el-menu-item>
        <el-menu-item index="/data19">
          <template slot="title">
            <i class="el-icon-s-opportunity"></i>
            <span slot="title">数据19/句子19</span>
          </template>
        </el-menu-item>
        <el-menu-item index="/data20">
          <template slot="title">
            <i class="el-icon-s-opportunity"></i>
            <span slot="title">数据20/句子20</span>
          </template>
        </el-menu-item>
        <el-menu-item index="/data21">
          <template slot="title">
            <i class="el-icon-s-opportunity"></i>
            <span slot="title">数据21/句子21</span>
          </template>
        </el-menu-item>
        <el-menu-item index="/data22">
          <template slot="title">
            <i class="el-icon-s-opportunity"></i>
            <span slot="title">数据22/句子22</span>
          </template>
        </el-menu-item>
        <el-menu-item index="/data23">
          <template slot="title">
            <i class="el-icon-s-opportunity"></i>
            <span slot="title">数据23/句子23</span>
          </template>
        </el-menu-item>
        <el-menu-item index="/data24">
          <template slot="title">
            <i class="el-icon-s-opportunity"></i>
            <span slot="title">数据24/句子24</span>
          </template>
        </el-menu-item>
        <el-menu-item index="/data25">
          <template slot="title">
            <i class="el-icon-s-opportunity"></i>
            <span slot="title">数据25/句子25</span>
          </template>
        </el-menu-item>
        <el-menu-item index="/data26">
          <template slot="title">
            <i class="el-icon-s-opportunity"></i>
            <span slot="title">数据26/句子26</span>
          </template>
        </el-menu-item>
        <el-menu-item index="/data27">
          <template slot="title">
            <i class="el-icon-s-opportunity"></i>
            <span slot="title">数据27/句子27</span>
          </template>
        </el-menu-item>
        <el-menu-item index="/data28">
          <template slot="title">
            <i class="el-icon-s-opportunity"></i>
            <span slot="title">数据28/句子28</span>
          </template>
        </el-menu-item>
        <el-menu-item index="/data29">
          <template slot="title">
            <i class="el-icon-s-opportunity"></i>
            <span slot="title">数据29/句子29</span>
          </template>
        </el-menu-item>
        <el-menu-item index="/data30">
          <template slot="title">
            <i class="el-icon-s-opportunity"></i>
            <span slot="title">数据30/句子30</span>
          </template>
        </el-menu-item>
      </el-submenu>

      <el-submenu index="5">
        <template slot="title">
          <i class="el-icon-s-platform"></i>
          <span slot="title">脑电分析</span>
        </template>
        <el-menu-item index="/brain1">
          <template slot="title">
            <i class="el-icon-s-comment"></i>
            <span slot="title">信号示例1</span>
          </template>
        </el-menu-item>
        <el-menu-item index="/brain2">
          <template slot="title">
            <i class="el-icon-s-comment"></i>
            <span slot="title">信号示例2</span>
          </template>
        </el-menu-item>
      </el-submenu>

    </el-menu>

  </template>

<style>
.hide-scrollbar{
  overflow-y:hidden;
}
</style>

