<template>
    <view class="property-detail">
        <template v-for="item in goodsPropertyList" :key="item.id">
            <view class="property-item ss-p-40 ss-gap-40" v-if="item.checked">
                <view class="property-name ss-flex ss-gap-40 ss-m-b-20">
                    <view class="property-name-text">规格名</view>
                    <view class="property-name-value">{{ item.name }}</view>
                </view>
                <view class="property-value ss-flex ss-gap-40">
                    <view class="property-value-text">规格值</view>
                    <view class="property-value-value ss-flex ss-gap-10">
                        <view
                            v-for="sitem in item.propertyValues"
                            @tap="chooseProperty(item)"
                            :class="['item', item.checked ? 'active' : '']"
                            >{{ sitem.name }}</view
                        >
                    </view>
                </view>
            </view>
        </template>
    </view>
</template>

<script setup>
import { defineProps, ref, computed } from 'vue'

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

function chooseProperty(item) {
    item.checked = !item.checked
}
</script>

<style lang="scss" scoped>
.property-detail {
    .property-item {
        margin: 0 40rpx 20rpx;
        background-color: #f9f9f9;
        border-radius: 10px;

        .property-name {
            .property-name-text {
                color: #606266;
            }
        }

        .property-value {
            .property-value-text {
                color: #606266;
            }
            .property-value-value {
                .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);
                }
            }
        }
    }
}
</style>
