<template>
<div class="m-subNav"  @click="clickHandle" v-if="text">
  <div class="inner" @click.stop>
    <ul>
      <li class="" v-for="(item, index) in text" :key="index">
        <div class="mi-name" @click="clickItem(item)">
          <span>{{item.name}}</span>
          <div class="icon-fold" v-if="item.sub.length>0">
            <span class="black-line"></span>
            <span class="black-line rotate_link " :class="{'vertical_link':activeIdx!==item.id}"></span>
          </div>
        </div>
        <div class="mi-child" :class="{'open':activeIdx===item.id}">
          <div @click="clickSub(sub)" v-for="(sub,idx) in item.sub" :key="idx">
            <span>{{sub.name}}</span>
          </div>
        </div>
      </li>
    </ul>
    <div class="m-language">
      <span @click="urlrep(item.url)" :class="{'ml-active':idx===0}" v-for="(item,idx) in text[text.length-1].sub" :key="idx">
        {{item.name}}
      </span>
    </div>
  </div>
</div>
</template>

<script>
export default {
  props: ['text'],
  data () {
    return {
      activeIdx: ''
    }
  },
  methods: {
    clickHandle () {
      this.$emit('closeNav')
    },
    clickItem (item) {
      this.activeIdx = this.activeIdx === item.id ? '' : item.id
      if (item.url) {
        this.$router.push({
          path: item.url,
          query: {
            id: item.id
          }
        })
      }
    },
    clickSub (item) {
      if (item.parentName) {
        this.$router.push({
          name: item.parentName,
          query: {
            id: item.id
          }
        })
        this.$emit('closeNav')
      }
    },
    urlrep (lg) {
      location.pathname = lg
    }
  }
}
</script>

<style scoped>
.m-subNav {
  width: 100%;
  position: fixed;
  height: 100%;
  left: 0px;
  top: 0px;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}

.inner {
  width: 70vw;
  height: auto;
  background: #eee;
  min-height: 100vh;
  font-size: 15px;
}

.inner li {
  width: 100%;
  border-bottom: 1px solid #fff;
}
.inner li:last-child{
  display: none;
}

.inner li .icon-fold .black-line {
  width: 15px;
  height: 2px;
  background: #333;
  position: absolute;
  transition: transform ease 0.5s;
}

.inner li .icon-fold .vertical_link {
  transform: rotate(90deg);
  transition: transform ease 0.5s;
}

.inner .mi-name {
  color: #505050;
  width: 88%;
  height: 44px;
  display: flex;
  display: -webkit-flex;
  justify-content: space-between;
  align-items: center;
  padding-left: 16px;
  font-weight: bold;
}
.inner .mi-child{
  max-height:0;
  transition: max-height 0.3s ease;
  overflow: hidden;
}

.inner .open{
  max-height: 200px;
  transition: max-height 0.3s ease;
}

.inner .mi-child>div{
    width: 100%;
    height: 44px;
    line-height: 44px;
    border-bottom: 1px solid #eee;
    background-color: #fff;
    padding-left: 15px;
}
.inner .mi-child>div:last-child{
  border: none;
}

.inner .m-language{
  width: 100%;
  margin-top: 30px;
  display: flex;
  justify-content: space-around;
}
.inner .m-language span{
  flex: 1;
  text-align: center;
  display: inline-block;
}
.inner .m-language .ml-active{
  color: #E6373C;
}
.inner .m-language span:not(:last-child) {
    border-right: 1px solid #fff;
}
</style>
