<template>
    <view class="product-filter">
        <scroll-view scroll-y="true" class="scroll-view">
            <view class="center">
                <!-- 品牌选中数量提示 -->
                <view class="brand-tip">
                    <view class="name">品牌</view>
                    <view class="number">
                        <text>已选中</text>
                        <text class="enhance" v-text="checkedBrandSize"></text>
                        <text>个品牌</text>
                    </view>
                </view>
                <!-- 品牌列表 -->
                <view class="brand-list">
                    <view class="content">
                        <view class="brand-item" :class="{ active: isCheckedAllBrand }" @click="onChoiceAllBrand">
                            全部
                        </view>
                        <template v-for="brand in brandItemList">
                            <view
                                class="brand-item"
                                :class="{ active: brand.checked }"
                                :key="brand.id"
                                v-text="brand.name"
                                @click="onChoiceBrand(brand)"
                            ></view>
                        </template>
                    </view>
                    <view class="toggle-all" @click="showAllBrand = !showAllBrand" v-if="hasMoreBrand">
                        <text class="name">{{ showAllBrand ? '收起全部' : '查看全部' }}</text>
                        <text
                            class="iconfont"
                            :class="showAllBrand ? 'icon-xiangshangjiantou' : 'icon-xiangxiajiantou'"
                        ></text>
                    </view>
                </view>
                <!-- 选择新品 -->
                <view class="cell-radio" @click="newFlag = !newFlag">
                    <text class="cell-radio-name">选择新品</text>
                    <text class="iconfont" :class="newFlag ? 'icon-yixuanze' : 'icon-weixuanze'"></text>
                </view>
                <!-- 促销商品 -->
                <view class="cell-radio" @click="promotionFlag = !promotionFlag">
                    <text class="cell-radio-name">促销商品</text>
                    <text class="iconfont" :class="promotionFlag ? 'icon-yixuanze' : 'icon-weixuanze'"></text>
                </view>
            </view>
        </scroll-view>
        <view class="footer">
            <view class="btn btn-reset" @click="onReset">重置</view>
            <view class="btn btn-confirm" @click="onConfirm">确定</view>
        </view>
    </view>
</template>

<script>
export default {
    props: {
        brandList: {
            type: Array,
            default: () => []
        }
    },
    data() {
        return {
            showAllBrand: false,
            newFlag: false, // 选择新品
            promotionFlag: false // 促销商品
        }
    },
    computed: {
        isCheckedAllBrand() {
            return this.brandList.every(brand => !brand.checked)
        },
        checkedBrandSize() {
            return this.brandList.filter(brand => brand.checked).length
        },
        brandItemList() {
            return this.brandList.filter((brand, index) => this.showAllBrand || index < 8)
        },
        hasMoreBrand() {
            return this.brandList.length > this.showAllBrand
        }
    },
    methods: {
        // 提交/确定
        onConfirm() {
            const e = {
                newFlag: this.newFlag ? 1 : 0,
                promotionFlag: this.promotionFlag ? 1 : 0,
                brandList: this.brandList.filter(brand => brand.checked)
            }
            this.$emit('confirm', e)
        },
        // 重置
        onReset() {
            this.brandList.forEach(brand => (brand.checked = false))
            this.newFlag = false
            this.promotionFlag = false
            this.showAllBrand = false
            const e = { newFlag: 0, promotionFlag: 0, brandList: [] }
            this.$emit('reset', e)
        },
        // 选中全部品牌
        onChoiceAllBrand() {
            this.brandList.forEach(brand => (brand.checked = false))
        },
        // 选中品牌
        onChoiceBrand(brand) {
            brand.checked = !brand.checked
        }
    }
}
</script>

<style lang="scss" scoped>
.product-filter {
    width: 580rpx;
    height: 100vh;
    box-sizing: border-box;
    padding-bottom: 180rpx;
    position: relative;
    background: #f7f7f7;

    .scroll-view {
        height: calc(100vh - 180rpx);

        .brand-tip {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 24rpx 0 32rpx;
            line-height: 72rpx;
            background: #f7f7f7;
            .name {
                font-size: 26rpx;
                color: #F3B574;
            }
            .number {
                font-size: 24rpx;
                color: #333333;
                .enhance {
                    color: #F3B574;
                }
            }
        }

        .brand-list {
            background: #fff;
            overflow: hidden;
            .content {
                display: flex;
                align-items: center;
                flex-wrap: wrap;
                padding: 0 20rpx 24rpx 32rpx;

                .brand-item {
                    width: 160rpx;
                    height: 56rpx;
                    line-height: 56rpx;
                    border-radius: 28rpx;
                    text-align: center;
                    font-size: 26rpx;
                    color: #999999;
                    background: #f7f7f7;
                    margin: 24rpx 24rpx 0 0;

                    &:nth-child(3n) {
                        margin-right: 0;
                    }

                    &.active {
                        color: #F3B574;
                        background: #fef6f3;
                    }
                }
            }

            .toggle-all {
                width: 140rpx;
                text-align: center;
                line-height: 36rpx;
                margin: 0 auto 24rpx;
                .name,
                .iconfont {
                    font-size: 24rpx;
                    color: #999999;
                }

                .iconfont {
                    margin-left: 16rpx;
                }
            }
        }

        .cell-radio {
            display: flex;
            justify-content: space-between;
            align-items: center;
            line-height: 72rpx;
            height: 72rpx;
            padding: 0 34rpx 0 24rpx;
            margin: 24rpx 0;
            background: #fff;

            .cell-radio-name {
                font-size: 26rpx;
                color: #333333;
            }

            .icon-weixuanze {
                font-size: 28rpx;
                color: #b2b2b2;
            }

            .icon-yixuanze {
                font-size: 28rpx;
                color: #F3B574;
            }
        }
    }

    .footer {
        position: absolute;
        width: 100%;
        left: 0;
        bottom: 0;
        height: 168rpx;
        display: flex;
        align-items: center;

        .btn {
            width: 210rpx;
            height: 84rpx;
            border-radius: 42rpx;
            text-align: center;
            line-height: 84rpx;
            font-size: 30rpx;

            &.btn-reset {
                background: #ffe6dc;
                color: #F3B574;
                margin: 0 24rpx 0 112rpx;
            }

            &.btn-confirm {
                background: linear-gradient(135deg, #f28f31 0%, #F3B574 100%);
                color: #ffffff;
            }
        }
    }
}
</style>
