<style>
  .multilevel{position: relative; font-family: 'microsoft yahei'; font-size:14px; color: #585858}
  .multilevel a,.multilevel span{cursor: pointer; text-decoration: none; color:#585858; display: inline-block;}

  .picker-data{display: inline-block; height: 34px; border: 1px solid #ccd0d4; padding:6px 12px; position: relative; border-radius: 3px}
  .placeholder,.data{display: inline-block; width: 200px; text-overflow:ellipsis; white-space:nowrap; overflow:hidden;}
  .placeholder{font-size: 14px; color: #9d9d9d}
  .data a{font-size: 12px}
  .select-item a{padding: 0 2px}
  .select-item a:hover{background: #CCCCCC}
  .clearData{display: inline-block; width: 30px; margin-left: 10px; text-overflow:ellipsis; white-space:nowrap; overflow:hidden;}
  .clearData em{color: #999999; font-size: 12px; }

  .picker-dropdown{position: absolute; top: 34px; left: 1px;}
  .select-wrap{box-shadow: 0 1px 5px rgba(0, 0, 0, 0.5); border-radius: 4px; width: 350px}

  .select-tab{background: #f0f0f0; border-bottom: 1px solid #ccc;}
  .select-tab a{display: inline-block; font-size: 12px; padding: 8px 15px; border-left: 1px solid #ccc; border-bottom: 1px solid transparent; margin-bottom: -1px}
  .select-tab a:first-child {border-left: none}
  .select-tab a:last-child {border-right: 1px solid #ccc}
  .select-tab a.active{background: #FFFFFF; border-bottom: 1px solid #FFFFFF;}

  .select-content{background: #FFFFFF;}
  .levelContent,.noSort{clear: both; list-style: none; margin: 0; padding: 10px;}
  .levelContent li,.noSort li{display: inline-block; padding: 5px 10px;}
  .levelContent li.active{background: #5bc0de; border-radius: 4px}
  .levelContent li.active a{color:#FFFFFF}
  .noSort li span{color: #ff0000}
</style>

<template>
  <div class="multilevel">
    <span class="picker-data">
      <span v-show="dataList.length==0" class="placeholder" @click="showDropdown">请选择类目</span>

      <span v-show="dataList.length>0" class="data" @click="showDropdown">
        <span class="select-item" v-for="data in dataList">
          <i v-if="$index>0">-</i>
          <a href="javascript:" @click="selectTab($index)">{{data.sortName}}</a>
        </span>
      </span>

      <span class="clearData" @click="destroy">
        <em v-show="dataList.length>0">清空</em>
      </span>
    </span>

    <div class="picker-dropdown" v-show="isShowDropdown">
      <div class="select-wrap">
        <div class="select-tab">
          <a v-for="tab in tabList" class="level {{$index==activeTab?'active':''}}" @click="selectTab($index)">{{tab}}</a>
        </div>

        <div class="select-content">
          <ul v-for="(index,content) in levelContent" class="levelContent" v-show="activeTab==index">
            <li v-for="(key,item) in content" class="{{item.id==dataList[index].id?'active':''}}">
              <a href="javascript:" @click="selectItem(item)">{{item.sortName}}</a>
            </li>
          </ul>

          <ul v-show="activeTab>=levelContent.length" class="noSort">
            <li><span>请选择上级类目！</span></li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    props:{
      dataList: {type: Array, default: []}
    },
    data() {
      return {
        tabList:["一级目录","二级目录","三级目录","四级目录"],
        levelContent:[],
        isShowDropdown:false,
        activeTab:0,
        maxTab:3
      }
    },
    ready() {
      this.fetchAllSortList();
    },
    methods: {
      showDropdown(){
        this.isShowDropdown = true;
      },

      closeDropdown(){
        this.activeTab = 0;
        this.isShowDropdown = false;
      },

      selectTab(index){
        this.showDropdown();
        this.activeTab = index;
      },

      selectItem(item){
        this.dataList.$set(this.activeTab,item);
        this.dataList.splice(this.activeTab+1, this.dataList.length-this.activeTab-1);

        if(this.activeTab < this.maxTab){
          this.activeTab ++;
          this.fetchSubSortList(item.id);
        }else{
          this.closeDropdown();
        }
      },

      destroy(){
        this.dataList.splice(0,this.dataList.length);
        this.activeTab = 0;
        this.levelContent.splice(1, this.levelContent.length-1);
      },

      fetchAllSortList(){
        this.$http.post("/product/class/queryAllProductSortList").then(function (response) {
          var rs = response.data;
          this.levelContent.$set(0,rs.data);
        }, function (response) {
          var rs = response.data;
          console.log(rs.message);
        });
      },

      fetchSubSortList(sortId){
        this.$http.post("/product/class/queryProductSortList",{
          param:sortId
        }).then(function (response) {
          var rs = response.data;
          if(rs.data.length>0){
            this.levelContent.$set(this.activeTab,rs.data);
          }else{
            this.closeDropdown();
          }
        }, function (response) {
          var rs = response.data;
          console.log(rs.message);
        });
      }
    }
  }
</script>