<template>
  <div id="left-menu">
    <div class="logo">
      <div
        v-if="!isCollapse"
        class="logo-box01"
        :style="{ width: !isCollapse ? '220px' : 'auto' }"
      >
        <span :title="system_name">{{ system_name || '' }}</span>
      </div>
      <el-image
        class="el-img-box"
        v-else
        style="height: 72px; width: 100%; background-color: white"
        src="https://smart-1251449951.cos.ap-guangzhou.myqcloud.com/iot_breed/farm/2024/08/304274395c99e45476a1c783cc806e72b8.jpg"
        fit="cover"
      ></el-image>
    </div>
    <el-menu
      class="el-menu-vertical-demo"
      :collapse="isCollapse"
      :router="true"
      :default-active="activeIndex"
      :unique-opened="true"
    >
      <el-menu-item index="/index/index">
        <i class="icon iconfont icon-shouye"></i>
        <span slot="title">首页</span>
      </el-menu-item>
      <el-menu-item index="/quick-Search/quick-Search">
        <i class="icon iconfont icon-chaxuncaijia"></i>
        <span slot="title">快速查询</span>
      </el-menu-item>
      <el-submenu index="66">
        <template slot="title">
          <i class="icon iconfont icon-jiyinjianceke"></i>
          <span slot="title">基因管理</span>
        </template>
        <el-menu-item-group>
          <el-menu-item index="/geneMgmt/SPN">SNP位点管理</el-menu-item>
          <el-menu-item index="/geneMgmt/SPNPanel"
            >SNP Panel位点管理</el-menu-item
          >
          <el-menu-item index="/geneMgmt/sequence">原始测序数据</el-menu-item>
        </el-menu-item-group>
      </el-submenu>

      <el-submenu index="67">
        <template slot="title">
          <i class="icon iconfont icon-nannvbili"></i>
          <span slot="title">繁育管理</span>
        </template>
        <el-menu-item-group>
          <el-menu-item index="/breedMgmt/BLUP">BLUP</el-menu-item>
          <el-menu-item index="/breedMgmt/paternityTest">亲子鉴定</el-menu-item>
          <el-menu-item index="/breedMgmt/lineage">血统管理</el-menu-item>
        </el-menu-item-group>
      </el-submenu>
      <el-submenu index="68">
        <template slot="title">
          <i class="icon iconfont icon-fenxi-05"></i>
          <span slot="title">进化分析</span>
        </template>
        <el-menu-item-group>
          <el-menu-item index="/phylogeneticAnalysis/evolutionaryTree"
            >进化树</el-menu-item
          >
          <el-menu-item index="/phylogeneticAnalysis/pca"
            >PCA</el-menu-item
          >
          <el-menu-item index="/phylogeneticAnalysis/admixture"
            >ADMIXTURE</el-menu-item
          >
        </el-menu-item-group>
      </el-submenu>
      <el-menu-item index="/disease-resistance/disease-resistance">
        <i class="icon iconfont icon-icon_bingjia"></i>
        <span slot="title">遗传病风险</span>
      </el-menu-item>
      <el-menu-item index="/variety-resources/variety-resources">
        <i class="icon iconfont icon-pinzhong"></i>
        <span slot="title">品种资源</span>
      </el-menu-item>
      <el-menu-item index="/archive-information/archive-information">
        <i class="icon iconfont icon-dangan"></i>
        <span slot="title">档案信息</span>
      </el-menu-item>
    </el-menu>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeIndex: '/',
      isCollapse: false,
      system_name: '基芯农育种',
      logo: '',
      index: 0,
      menuList: [], // 菜单权限列表
      type: '', // 1 交流社区， 2线上问诊
      zhanghao: '',
      token_xs: '',
      othersData: {},
      activeStatus: ''
    }
  },
  watch: {
    // 监听路由
    '$route.path': {
      handler(routePath) {
        this.initMenuActive(routePath)
      },
      immediate: true
    }
  },
  created() {
    this.$bus.$on('show', (e) => {
      this.getShow(e)
    })
  },
  methods: {
    initMenuActive(routePath) {
      this.activeIndex = routePath
    },
    getShow(e) {
      this.isCollapse = e
    }
  },
  destroyed() {
    this.bus.$off('show')
  }
}
</script>

<style lang="less" scoped>
#left-menu {
  height: 100%;

  .logo {
    max-width: 220px;
    height: 72px;
    color: #fff;
    font-size: 25px;
    font-weight: bold;
    letter-spacing: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #5aad00;

    .logo-box01 {
      cursor: pointer;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      text-align: center;
    }

    .el-img-box {
      padding: 5px;
      box-sizing: border-box;
    }
  }
}

/deep/ .el-menu {
  border-right: 0;
}

/deep/.el-menu-item-group__title {
  padding: 0;
}

.icon {
  vertical-align: middle;
  font-size: 18px;
  margin-right: 5px;
}

.home-icons {
  margin-right: 5px;
}

.active {
  color: #409eff;
}
</style>
