<template>
    <view class="goods-filter">
        <view class="filter-item" @click="handleClick(0)" :class="{ active: current === 0 }">综合</view>
        <view class="filter-item" @click="handleClick(1)" :class="{ active: current === 1 }">
            <text>价格</text> <view class="filter-icon" :class="sortType"> </view>
        </view>
        <view class="filter-item" @click="handleClick(2)" :class="{ active: current === 2 }">最新</view>
    </view>
</template>

<script>
export default {
    name: 'goods-filter',
    data() {
        return {
            current: 0,
            sortType: '',
            sortCount: -1
        }
    },
    methods: {
        handleClick(index) {
            this.current = index
            if (index !== 1) {
                this.sortType = ''
            } else {
                this.sortType = this.sortType === 'asc' ? 'desc' : 'asc'
            }
            this.$emit('filter', {
                current: index,
                sort: this.sortType
            })
        }
    }
}
</script>

<style lang="scss" scoped>
.goods-filter {
    @extend .cm-flex-around;
    height: 90rpx;
    padding: 0 24rpx;
    background-color: #fff;
    .filter-item {
        @extend .cm-flex-center;
        width: 20%;
        line-height: 90rpx;
        font-size: 28rpx;
        color: #666666;

        &.active {
            font-weight: bold;
            color: #f83c6c;
        }

        .filter-icon {
            @extend .cm-flex-center;
            flex-direction: column;
            align-items: flex-start;
            margin-left: 8rpx;

            &::before,
            &::after {
                content: '';
                display: block;
                width: 0;
                height: 0;
                border-style: solid;
            }

            &::before {
                border-width: 0 8rpx 12rpx 8rpx;
                border-color: transparent transparent #cecece transparent;
            }
            &::after {
                margin-top: 4rpx;
                border-width: 12rpx 8rpx 0 8rpx;
                border-color: #cecece transparent transparent transparent;
            }

            // 从小到大
            &.asc {
                &::before {
                    border-color: transparent transparent #f83c6c transparent;
                }
            }

            // 从大到小
            &.desc {
                &::after {
                    border-color: #f83c6c transparent transparent transparent;
                }
            }
        }
    }
}
</style>
