<template>
  <div class="nav-left">
    <el-menu
      :default-active="active"
      class="el-menu-vertical-demo"
      :router="true"
      @select="navClick">
      <el-menu-item index="home">
        <span slot="title">首页</span>
      </el-menu-item>
      <el-submenu index="1">
        <template slot="title">网站监控</template>
        <el-menu-item :index="index+''" v-for="(item, index) in platInfo" :key="item.platform">{{item.platform}}</el-menu-item>
      </el-submenu>
      <el-submenu index="2">
        <template slot="title">币种监控</template>
        <el-menu-item index="BTY">BTY</el-menu-item>
        <el-menu-item index="YCC">YCC</el-menu-item>
      </el-submenu>
      <el-menu-item index="account">
        <span slot="title">银行账户</span>
      </el-menu-item>
    </el-menu>
  </div>
</template>

<script>
  import Bus from '../assets/js/bus'
  export default {
    data(){
      return{
        platInfo: JSON.parse(sessionStorage.getItem('platInfo')),
        active: ''
      }
    },
    created() {
      this.active = this.$route.params.name || 'account';
    },
    methods: {
      navClick(index) {
        Bus.$emit('refresh');
        if(this.active != 'account'){
          this.$router.push(`/monitor/${index}`);
        }else{
          this.$router.push('/monitor/account');
        }
      }
    },
    watch: {
      $route() {
        this.active = this.$route.params.name || 'account';
      }
    }
  }
</script>

<style scoped>
  .nav-left{
    margin-left: 20px;
  }
  .el-menu-item, .el-submenu__title{
    height: 40px;
    line-height: 40px;
    color:rgba(142,154,158,1);
    font-size:16px;
  }
  .el-menu {
    border-right: none;
  }
  .el-submenu.is-active .el-menu-item {
    background:rgba(195,211,223,1);
    color:rgba(255,255,255,1);
  }
  .el-submenu.is-active .el-submenu__title, .el-menu-item.is-active, .el-submenu.is-active .el-menu-item.is-active {
    background:rgba(119,146,167,1);
    color:rgba(255,255,255,1);
    /*border-radius:4px 4px 0px 0px;*/
  }
  ul.el-menu-vertical-demo>li{
    border-radius: 4px;
  }
</style>
<style>
  .el-submenu.is-active .el-submenu__title {
    background:rgba(119,146,167,1);
    color:rgba(255,255,255,1);
  }
  .el-submenu__title i {
    color: rgba(192,212,218,1);
  }
</style>
