<template>
    <view class="select-item">
        <view class="brand-name">品牌名称</view>
        <view class="list">
            <view class="item" v-for="child in item.children" :key="child.id">
                <view class="left">
                    <text>设备名称</text>
                    <view class="extract">
                        <text>规格型号</text>
                        <text>功率</text>
                    </view>
                </view>
                <view class="right">
                    <u-checkbox
                        v-model="child.checked"
                        shape="circle"
                        label=""
                        :usedAlone="true"
                        @change="e => change(e, child.id)"
                    ></u-checkbox>
                </view>
            </view>
        </view>
    </view>
</template>

<script setup lang="ts">
import { PropType } from 'vue'

interface IChildren {
    id: number
    name: string
    checked: boolean
}
interface IDevice {
    id: number
    brandName: string
    children: IChildren[]
}
const props = defineProps({
    item: {
        type: Object as PropType<IDevice>,
        default: () => ({})
    }
})
const emit = defineEmits(['change'])
const change = (e: boolean, childId: number) => {
    emit('change', { checked: e, pId: props.item.id, cId: childId })
}
</script>

<style lang="scss" scoped>
.select-item {
    @include flex-direction;
    .brand-name {
        height: 60rpx;
        line-height: 60rpx;
        padding: 0 32rpx;
        background-color: $gray-1;
        font-size: 28rpx;
        color: $gray-2;
    }
    .list {
        .item {
            @include flex-justify;
            padding: 24rpx 32rpx;
            border-bottom: 1px solid $gray-3;
            .left {
                @include flex-direction;
                gap: 16rpx;
                .extract {
                    font-size: 28rpx;
                    color: $gray-2;
                    display: flex;
                    gap: 24rpx;
                }
            }
        }
    }
}
</style>
