<template>
    <div class="filter">
        <div class="filter-actions">
            <a href="javascript:; filter-action">清空</a>
            <button class="button button-small filter-action">确定</button>
        </div>
        <div class="filter-params">
            <ul class="filter-cates">
                <li class="filter-cate" v-for="filter in filters">
                    <i class="icon icon-right"></i>
                    <span>{{filter.classfly}}</span>
                    <span class="filter-cate-val">{{val[filter.key]}}</span>
                </li>
            </ul>
        </div>
    </div>
</template>
<style>
@import "../../scss/common/color";

.filter {
    padding: 0 20px;
}

.filter-actions {
    text-align: right;
    padding: 10px 0;
}

.filter-action {
    margin-left: 20px;
}

.filter-actions,
.filter-cate {
    border-bottom: 1px solid $grey;
}

.filter-cates {
    list-style: none;
    margin: 0;
    padding: 0;
}

.filter-cate {
    .icon-right {
        float: right;
    }
}

.filter-cate-val {
    float: right;
}

.filter-cate-val,
.filter-cate .icon {
    color: $grey;
}
</style>
<script>
module.exports = {
    data: function() {
        return {
            val: {
                brand: 'Supreme',
                category: '夹克'
            },
            filters: [{
                classfly: 'Brand品牌',
                key: 'brand',
                itemArray: []
            }, {
                classfly: 'Category品类',
                key: 'category',
                itemArray: []
            }, {
                classfly: 'Color颜色',
                key: 'color',
                itemArray: []
            }, {
                classfly: 'Size尺寸',
                key: 'size',
                itemArray: []
            }]
        };
    }
};
</script>