<template>
    <view class="item">
        <view class="left">
            <image class="image" src="" />
            <text>品牌</text>
        </view>
        <view class="right">
            <u-checkbox
                v-model="item.chekced"
                :name="item.id"
                shape="circle"
                label=""
                :usedAlone="true"
                @change="change"
            ></u-checkbox>
        </view>
    </view>
</template>

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

interface IBrand {
    id: number
    name: string
    image: string
    chekced: boolean
}
const props = defineProps({
    item: {
        type: Object as PropType<IBrand>,
        default: () => ({})
    }
})
const emit = defineEmits(['updateItem'])
const change = e => {
    emit('updateItem', { checked: e, id: props.item.id })
}
</script>

<style lang="scss" scoped>
.item {
    @include flex-center(space-between);
    height: 100rpx;
    border-bottom: 1px solid $gray-3;
    padding: 0 32rpx;
}
.left {
    flex: 1;
    @include flex-align;
    gap: 28rpx;
    .image {
        width: 60rpx;
        height: 60rpx;
        border: 1px solid $gray-3;
    }
}
</style>
