<template>
    <ul class="order-navs clearfix">
        <template v-for="item in config">
            <simple v-if="(item.type || 'simple') === 'simple'" :txt="item.txt" :val="item.val">
            </simple>
            <updown v-if="item.type === 'updown'" :txt="item.txt" :vals="item.val">
            </updown>
        </template>
    </ul>
</template>
<script>
const $ = require('jquery');
const bus = require('common/vue-bus');
const simple = require('./order/simple.vue');
const updown = require('./order/updown.vue');

module.exports = {
    props: {
        /**
         * order 配置
         * @type {Array}  [{type, txt, val}]
         *  type: 类型   simple, updown
         *  txt: 文字,
         *  val: 值
         */
        config: Array,

        // 初始值 可以进行双向绑定
        val: String
    },
    components: {
        simple,
        updown
    },
    methods: {},
    watch: {
        val: function(newVal, oldVal) {
            bus.$emit('order.change', {
                val: newVal,
                ref: this._uid
            });
        }
    }
};
</script>
<style>
@import "../../../scss/common/color";

.order-navs {
    list-style: none;
    margin: 0;
    padding: 25px 0;
    color: $grey;
    background-color: #fff;
}

.order-item {
    position: relative;
    display: block;
    width: 25%;
    float: left;
    text-align: center;

    &:after {
        content: "|";
        position: absolute;
        right: 0;
        color: $grey;
        font-size: 28px;
    }

    &:last-of-type:after {
        display: none;
    }

    .order-name {
        font-size: 28px;
    }

    .order-icon {
        position: relative;
        margin-left: 10px;
        .icon-sort-asc,
        .icon-sort-desc {
            position: absolute;
            left: 0;
            top: 0;
        }
    }

    &.active {
        color: $black;
    }
}
</style>