<style>
.brand-list {
    max-height: 400px;
    overflow: auto;
}
.brand-list a{
    display:inline-block;
    color: #000;
    padding: 5px 10px;
    margin: 3px 0;
}
.brand-list a.active{
    color: #fff;
    background: #428bca;
    padding: 5px 10px;
}
</style>

<div class="pageheader">
    <div class="media">
        <div class="pageicon pull-left">
            <i class="fa fa-th-list"></i>
        </div>
        <div class="media-body">
            <ul class="breadcrumb">
                <li><a href=""><i class="glyphicon glyphicon-home"></i></a></li>
                <li><a href="/seo/tdk">{{title}}</a></li>
                <li>{{typeName}}</li>
            </ul>
            <h4>{{title}}</h4>
        </div>
    </div>
    <!-- media -->
</div>
<!-- pageheader -->

<div class="contentpanel seo-root-page" style="padding-bottom:0;">
    <div class="panel panel-default">
        <div class="panel-body">
            <div class="form-group">
                <label for="exampleInputEmail1">词根</label>
                <input type="text" name="rootWord" class="form-control" >
            </div>
            <div class="form-group">
                <label >品牌</label>
                <ul id="brandTab" class="nav nav-tabs brand-category">
                {{#each brand}}
                    <li {{#if @first}}class="active"{{/if}}><a href="#{{@key}}" data-toggle="tab">{{@key}}</a></li>
                {{/each}}
                </ul>
                <div id="brandTabContent" class="tab-content brand-list">
                {{#each brand}}
                    <div class="tab-pane fade {{#if @first}}in active{{/if}}" id="{{@key}}">
                        {{# .}}<a data-id="{{id}}"> {{brandName}} </a>{{/ .}}
                    </div>
                {{/each}}
                </div>
            </div>
            <div class="form-group">
                <label for="exampleInputEmail1">品类</label>
                <div class="row">
                    <div class="col-md-3">
                        <select id="msort" class="form-control">
                            <option class="form-control">请选择</option>
                            {{#each sort}}
                                <option data="{{id}}" value="{{id}}" class="form-control">{{sortName}}</option>
                            {{/each}}
                        </select>
                    </div>
                    <div class="col-md-3">
                        <select id="misort" class="form-control">
                            <option class="form-control">请选择</option>
                        </select>
                    </div>
                    <div class="col-md-3">
                        <select id="sort" class="form-control">
                            <option class="form-control">请选择</option>
                        </select>
                    </div>
                </div>

            </div>
            <div class="form-group">
                <label for="exampleInputEmail1">过滤词</label>
                <input type="text" name="filter" class="form-control" >
            </div>

            <button type="submit" id="submit" class="btn btn-default">提交</button>

        </div>
    </div>


</div>


<script>
$(function(){
    var brand = $('.brand-list a'), selectBrand = 0;
    var msort = $('#msort'), misort = $('#misort'), sort = $('#sort');

    // 选择品牌
    brand.on('click', function(){
        brand.removeClass('active');
        $(this).toggleClass('active');
        selectBrand = $(this).data('id');
    })

    // 切换大分类
    msort.on('change',function() {
        selectInit('misort');
        selectInit('sort');
        getSubSorts($(this).val(), 'misort');
    })

    // 切换中分类
    misort.on('change',function() {
        selectInit('sort');
        getSubSorts($(this).val(), 'sort');
    })

    // 提交TODO： 前端校验，数据提交，后端数据保存；删除功能；


    // 获取子分类数据
    function getSubSorts(sortId, id) {
        $.ajax({
             url: '/seo/rootwords/getsubsorts',
             dataType: 'json',
             type: 'POST',
             data: {
                 sortId: sortId
             },
             success: function(data) {
                 var option = '';
                 $.each(data, function(key, val) {
                    option +='<option value="' + val.sort_id + '">' + val.sort_name + '</option>';
                    console.log(val);
                 });
                 $('#'+id).append(option);
             },
             error: function(err) {
                console.log(err);
             }

        });
    }

    // 清空子分类
    function selectInit(id) {
        $('#'+id).html('<option class="form-control">请选择</option>');
    }

})
</script>