<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;
    }

    .multilevel span.placeholder {
        font-size: 12px;
        color: #999999;
        height: 20px;
        line-height: 20px
    }

    .picker-data {
        display: inline-block;
        width: auto;
        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;
    }

    .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;
        font-style: normal;
    }

    .picker-dropdown {
        position: absolute;
        top: 36px;
        left: 1px;
        z-index: 999;
    }

    .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.active {
        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: 2
            }
        },
        ready() {
            this.fetchAllSortList();
            this.blindEvent();
        },
        methods: {
            showDropdown(event){
                this.isShowDropdown = true;
                event.stopPropagation();//阻止事件向上冒泡
            },

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

            selectTab(index){
                this.isShowDropdown = true;
                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);
                })
            },

            //点击空白处弹层关闭
            blindEvent(){
                var self = this;
                $(document).on("click", function () {
                    self.closeDropdown();
                });

                $(".picker-dropdown").on("click", function (event) {
                    event.stopPropagation();//阻止事件向上冒泡
                });
            }
        }
    }
</script>