<template>
    <view class="order-dealer-filter">
        <view
            :class="{ active: current === item.id }"
            :key="item.id"
            class="item"
            v-for="item in groupList"
            v-text="item.name"
            @click="onClick(item.id)"
        ></view>
    </view>
</template>

<script>
export default {
    name: 'order-dealer-filter',
    data() {
        return {
            current: 0,
            groupList: [{ id: 0, name: '全部订单' }, { id: 1, name: '用户订单' }, { id: 2, name: '自身订单' }]
        }
    },
    methods: {
        onClick(id){
            this.current = id
            this.$emit('change', id)
        }
    }
}
</script>

<style lang="scss" scoped>
.order-dealer-filter {
    height: 40px;
    @extend .cm-flex-around;
    background: #fff;

    .item {
        height: 48rpx;
        border-radius: 24rpx;
        background: #f7f7f7;
        line-height: 48rpx;
        font-size: 26rpx;
        color: #333333;
        text-align: center;
        padding: 0 24rpx;

        &.active {
            color: #ff457b;
            background-color: #fff3f7;
        }
    }
}
</style>
