<template>
    <view class="property-list">
        <uni-popup type="bottom" ref="propertyListPopupRef" background-color="#fff">
            <view class="popup-header">
                <view class="button-cancel" @click="onClosePopup">取消</view>
                <view class="button-link" @click="onConfirmPopup">确定</view>
            </view>
            <view class="popup-content">
                <view
                    v-for="item in goodsPropertyList"
                    :key="item.id"
                    :class="['property-item', item.checked ? 'active' : '']"
                    @tap="chooseProperty(item)"
                >
                    {{ item.name }}
                </view>
            </view>
        </uni-popup>
    </view>
</template>

<script setup>
import { ref, computed, defineEmits, defineProps, defineExpose } from 'vue'
import peach from '@/peach'

/**
 * todo 底部高度配置
 */

const props = defineProps({
    modelValue: {
        default: () => [],
        required: true,
        type: Array,
    },
    goodsPropertyList: {
        default: () => [],
        required: true,
        type: Array,
    },
})

const emit = defineEmits(['update:modelValue'])

const propertyListPopupRef = ref()

const onClosePopup = () => {
    propertyListPopupRef.value.close()
}

function chooseProperty(item) {
    item.checked = !item.checked
}

function onConfirmPopup() {
    let resut = props.goodsPropertyList
        .filter((item) => {
            if (item.checked) {
                return item.propertyValues.filter((sitem) => sitem.checked)
            }
        })
        .map((item) => {
            let children = item.propertyValues.filter((sitem) => sitem.checked).map((titem) => titem.id)
            return {
                id: item.id,
                children: children,
            }
        })

    console.log(resut)
    // emit('update:modelValue', props.goodsPropertyList.filter((item) => item.checked).map((item) => item.id) ?? [])
    onClosePopup()
}

function onOpen() {
    propertyListPopupRef.value.open('bottom')
}

defineExpose({
    onOpen,
})
</script>

<style lang="scss" scoped>
.property-list {
    .popup-content {
        height: 500rpx;
        padding: 40rpx;
        display: flex;
        flex-wrap: wrap;
        gap: 20rpx;
        justify-content: flex-start;
        .property-item {
            text-align: center;
            line-height: 60rpx;
            height: 60rpx;
            padding: 0 10px;
            border-radius: 10px;
            background-color: var(--ui-BG-4);
        }
        .active {
            color: #fff;
            background-color: var(--ui-BG-Main);
        }
    }

    .button-link {
        color: #1892ea;
        font-size: 28rpx;
    }
    .button-cancel {
        color: #888;
        font-size: 28rpx;
    }
    .popup-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 24rpx 38rpx 0;
    }
}
</style>
