<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" value="" >
            </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" value="0">请选择</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" value="0" selected>请选择</option>
                        </select>
                    </div>
                    <div class="col-md-3">
                        <select id="sort" class="form-control">
                            <option class="form-control" value="0" selected>请选择</option>
                        </select>
                    </div>
                </div>

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

        </div>
    </div>


</div>


<script>
$(function(){
    var $brand = $('.brand-list a');
    var $msort = $('#msort'), $misort = $('#misort'), $sort = $('#sort');
    var $submit = $('#submit');
    var $rootWord = $('input[name=rootWord]');
    var $filterWord = $('input[name=filterWord]');
    var $isKeyword = $('input[name=isKeyword]');
    var rootWord = '', brand = 0, msort = 0, misort = 0, sort = 0, filterWord = '', formData;

    // 选择品牌
    $brand.on('click', function(){
        // $brand.removeClass('active');

        if(!$(this).hasClass('active')) {
            $brand.removeClass('active');
            $(this).addClass('active');
            brand = $(this).data('id');
        } else {
            brand = 0;
            $brand.removeClass('active');
        }

    })

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

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

    // 提交
    $submit.on('click', function(){
        rootWord = $rootWord.val();
        filterWord = $filterWord.val();
        msort = $msort.val();
        misort = $misort.val();
        sort = $sort.val();

        if (rootWord == '') {
            alert('关键词必填');
            return;
        }

        formData = {
            keywords: rootWord,
            brand: brand,
            msort: msort,
            misort: misort,
            sort: sort,
        }

        $.ajax({
             url: '/keywords/add',
             dataType: 'json',
             type: 'POST',
             data: formData,
             success: function(res) {
                if (res.code == 200) {
                    location.href = '/keywords/expand';
                } else {
                    alert(res.message);
                }
             },
             error: function(err) {
                console.log(err);
             }

        });

    })



    // 获取子分类数据
    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>';
                 });
                 $('#'+id).append(option);
             },
             error: function(err) {
                console.log(err);
             }

        });
    }

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

})
</script>