<template>
  <el-container>
    <el-aside width="250px">
      <el-menu
        :default-active="index" v-loading="menuLoading">
        <el-submenu v-for="data in leftList" :key="data.id" :index="data.name">
          <template slot="title">
            <span>{{data.name}}({{data.children | lengthNum}})
            </span>
          </template>
          <el-submenu class="list2" :index="item.name" v-for="item in data.children" :key="item.id">
            <span slot="title">
              {{item.name}}
                <div class="btn-block list2-btn">
                  <i class="iconfont icon-shangyi"></i>
                  <i class="iconfont icon-xiayi"></i>
                  <i class="iconfont icon-bianji"></i>
                  <i class="iconfont icon-shanchu"></i>
                </div>
            </span>
            <div @click="chooseId(i)" v-for="i in item.children" :key="i.name">
              <el-menu-item class="list3" :index="i.name">
                {{i.name}}
                <div class="btn-block list3-btn">
                  <i class="iconfont icon-shangyi" @click="upIndex(i,item.children)"></i>
                  <i class="iconfont icon-xiayi" @click="downIndex(i,item.children)"></i>
                  <i class="iconfont icon-bianji" @click="editIndex(i,item.children)"></i>
                  <i class="iconfont icon-shanchu" @click="delIndex(i,item.children)"></i>
                </div>
              </el-menu-item>
            </div>
          </el-submenu>
        </el-submenu>
      </el-menu>
    </el-aside>
    <el-main>
      <that-list :id="id"></that-list>
    </el-main>
  </el-container>
</template>

<script>
  import {getCategoryApi,sortCategoryApi} from "../../service/api";
  import thatList from './list'
  export default {
    data(){
      return {
        leftList:[],
        index:'',
        menuLoading:false,
        id:''
      }
    },
    components:{
      thatList
    },
    filters:{
      lengthNum:function (value) {
        if(value){
          return value.length
        }else{
          return '0'
        }

      }
    },
    methods:{
      getList(){
        getCategoryApi('').then(res=>{
          this.leftList = res;
          if(this.id === ''){
            this.id = res[0].children[0].children[0].id;
            this.index = res[0].children[0].children[0].name
          }
          this.$store.commit('mainCanShow');
          this.menuLoading = false;
        })
      },
      upIndex(data,item){
        let i =  item.indexOf(data);
        if(i>0){
          this.menuLoading = true;
          let json = {
            category_up_id : data.id ,
            category_down_id : item[i-1].id
          };
          sortCategoryApi(json).then(res=>{
            this.getList()
          })
        }
      },
      downIndex(data,item){
        let i =  item.indexOf(data);
        let lth=item.length - 1;
        if(i < lth){
          this.menuLoading = true;
          let json = {
            category_up_id :item[i+1].id,
            category_down_id:data.id
          };
          sortCategoryApi(json).then(res=>{
            this.getList()
          })
        }
      },
      editIndex(data){
        alert(21)
      },
      delIndex(data){
        alert(21)
      },
      chooseId(data){
        this.id = data.id
        console.log(this.id)
      }
    },
    mounted(){
      this.getList()
    }
  }
</script>

<style scoped lang="less">
  @import "../../util/public";
  .el-container{
    height: 100%;
    .el-menu{
      height: 100%;
      .el-submenu{
        .btn-block{
          margin-left: 10px;
          transition: all 1s;
          display: none;
          i{
            color: #aaaaaa;
            font-size: 14px;
            &:hover{
              color: #3a8ee6;
            }
          }
        }
        .list2:hover .list2-btn{
          display: inline-block;
        }
        .list3:hover .list3-btn{
          display: inline-block;
        }
      }
    }
  }
</style>