<template>
  <div>
    <el-container>
      <el-aside width="380px">
        <el-menu
          :default-active="index" v-loading="menuLoading">
          <div style="padding: 5px">
            <el-button type="success" plain round size="mini" style="width: 100%" @click="addFist()" v-if="!$store.state.readonly">
              +添加分类
            </el-button>
          </div>
          <el-submenu v-for="data in leftList" :key="data.id" :index="data.name">
            <template slot="title">
            <span>
              {{data.name}}({{data.children | lengthNum}})
              <i class="iconfont icon-bianji" @click="editIndex(data)" v-if="!$store.state.readonly"></i>
              <i class="iconfont icon-shanchu" @click="delIndex(data)" v-if="$store.state.deletePermission && !$store.state.readonly"></i>
            </span>
            </template>
            <el-submenu v-if="data.children" 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" @click="upIndex(item,data.children)" v-if="!$store.state.readonly"></i>
                    <i class="iconfont icon-xiayi" @click="downIndex(item,data.children)" v-if="!$store.state.readonly"></i>
                  <i class="iconfont icon-bianji" @click="editIndex(item)" v-if="!$store.state.readonly"></i>
                  <i class="iconfont icon-shanchu" @click="delIndex(item)" v-if="$store.state.deletePermission && !$store.state.readonly"></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)" v-if="!$store.state.readonly"></i>
                    <i class="iconfont icon-xiayi" @click="downIndex(i,item.children)" v-if="!$store.state.readonly"></i>
                    <i class="iconfont icon-bianji" @click="editIndex(i)" v-if="!$store.state.readonly"></i>
                    <i class="iconfont icon-shanchu" @click="delIndex(i)" v-if="$store.state.deletePermission && !$store.state.readonly"></i>
                  </div>
                </el-menu-item>
              </div>
              <el-menu-item class="list3" index="new">
                <el-button type="success" round size="mini" plain style="width: 100%" @click="addItem(item.id)" v-if="!$store.state.readonly">+添加三级分类</el-button>
              </el-menu-item>
            </el-submenu>
            <el-menu-item class="list3" index="new">
              <el-button type="success" round size="mini" plain style="width: 100%" @click="addSec(data.id)" v-if="!$store.state.readonly">+添加二级分类</el-button>
            </el-menu-item>
          </el-submenu>
        </el-menu>
      </el-aside>
      <el-main>
        <that-list :id="id"></that-list>
      </el-main>
    </el-container>
    <menu-dialog :dialogObj="dialogObj" @reflash="getList"/>
  </div>

</template>

<script>
  import {getCategoryApi,sortCategoryApi,delCategoryApi} from "../../service/api";
  import thatList from './list'
  import menuDialog from './menuDialog'
  export default {
    data(){
      return {
        leftList:[],
        index:'',
        dialogObj:{
          show:false,
          type:0,
          pid:0,
          title:'新增一级分类',
          category_id:''
        },
        menuLoading:false,
        id:''
      }
    },
    components:{
      thatList,
      menuDialog
    },
    filters:{
      lengthNum:function (value) {
        if(value){
          return value.length
        }else{
          return '0'
        }

      }
    },
    methods:{
      getList(){
        getCategoryApi('').then(res=>{
          res.forEach(i=>{
            i.children = i.children || [];
            i.children.forEach(j=>{
              if(!j.children){
                j.children = []
              }
            })
          });
          this.leftList = res;

          this.$store.commit('mainCanShow');
          this.menuLoading = false;
        })
      },
      addItem(id){
        this.dialogObj={
          show:true,
          type:0,
          pid:id,
          title:'新增三级分类',
          category_id:''
        }
      },
      addFist(){
        this.dialogObj={
          show:true,
          type:0,
          pid:0,
          title:'新增一级分类',
          category_id:''
        }
      },
      addSec(id){
        this.dialogObj={
          show:true,
          type:0,
          pid:id,
          title:'新增二级分类',
          category_id:''
        }
      },
      onEdit(data){

      },
      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){
        this.dialogObj={
          show:true,
          type:1,
          title:'编辑分类',
          category_id:data.id,
          that:data
        }
      },
      delIndex(data){
        this.$confirm('此操作将删除该分类?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          delCategoryApi(data.id).then(res=>{
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
          });
          this.getList()
        });

      },
      chooseId(data){
        this.id = data.id
      }
    },
    mounted(){
      this.getList();
    }
  }
</script>

<style scoped lang="less">
  @import "../../util/public";
  ::-webkit-scrollbar-track-piece { //滚动条凹槽的颜色，还可以设置边框属性
    border-radius: 10px;
  }
  ::-webkit-scrollbar {//滚动条的宽度
    width:15px;
    height:15px;
  }
  ::-webkit-scrollbar-thumb {//滚动条的设置
    background-color:@secondary-font-color;
    border-radius: 10px;
    height: 20px;
    min-height:10px;
  }
  .el-container{
    height: 100%;
    .el-aside{
      overflow: auto;
      //滚动条样式

    }
    .el-menu{
      height: 100%;
      .el-submenu{
        .btn-block{
          margin-left: 10px;
          transition: all 1s;
          display: inline-block;
          i{
            color: #aaaaaa;
            font-size: 14px;
            &:hover{
              color: #3a8ee6;
            }
          }
        }
        .list2:hover .list2-btn{
        }
        .list3:hover .list3-btn{
          display: inline-block;
        }
      }
    }
  }
</style>