<template>
  <div class="nav">
    <div class="nav-btn" @click="tabList">
      <i v-if="!listShow" class="nav-btn-up el-icon-arrow-up"></i>
      <i v-else class="nav-btn-down el-icon-arrow-down"></i>
      导航
    </div>
    <div class="nav-tabs" :class="listShow?'nav-show':''">
      <el-tabs v-model="activeName" v-if="navList.length">
        <el-tab-pane
          v-for="(item, index) in navList"
          :key="index"
          :label="item.title"
          :name="item.name"
        >
          <ul class="list-item">
            <li style="cursor: pointer" v-for="(citem, cindex) in item.children" :key="cindex" @click="navJump(citem.pc_url)">
              {{ citem.title }}
            </li>
          </ul>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      navList: [],
      activeName: null,
      listShow: false,
    };
  },
  methods: {
    tabList() {
      this.listShow = !this.listShow;
    },
    navJump(pc_url){
      window.location.href=pc_url
    }
  },
  created(){
    if(sessionStorage.navList){
      this.navList = this.navList.concat(JSON.parse(sessionStorage.navList))
    }
  }
};
</script>

<style lang="scss" scoped>
.nav {
  position: fixed;
  width: 100%;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 999;
  .nav-btn {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    font-size: 20px;
    color: #fff;
    background-color: #1492ff;
    line-height: 60px;
    text-align: center;
    margin: 0 auto;
    position: relative;
    cursor: pointer;
    .nav-btn-up,
    .nav-btn-down {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
    }
    .nav-btn-down {
      bottom: 0;
    }
  }
  .nav-tabs {
    background: url(../assets/images/navbgi.png) no-repeat 50%;
    background-size: 100%;
    height: 0px;
    position: relative;
    transition: all .4s;
    >>>.el-tabs{
      position: absolute;
      top: 0;
      left: 50%;
      transform: translateX(-50%);
      font-size: 16px;
      .el-tabs__item{
        font-size: 16px;
        color: #333;
      }
      .is-active{
        color: #1492ff;
      }
    }
    .list-item{
      display: flex;
      li{
        margin-right: 20px;
      }
    }
  }
  .nav-show{
    height: 90px;
  }
}
</style>