<script setup>
import ICON from "../static/icons/dd.png";

const {size} = defineProps({
    size: {
        type: String,
        default: '30rpx',
    }
});
const modelValue = defineModel();
</script>

<template>
    <view class="!flex" @click="modelValue=!modelValue">
        <view :class="['x-t-y', modelValue ? 'cur' : '']">
            <image v-if="modelValue" class="!size-[17rpx]" :src="ICON"></image>
        </view>

        <view>
            <slot></slot>
        </view>
    </view>
</template>

<style scoped lang="scss">
.x-t-y {
    $size: v-bind(size);
    width: $size;
    height: $size;
    border: 1px solid #666;
    border-radius: 50%;
    display: inline-flex;
    flex-shrink: 0;
    margin-top: 5rpx;
    margin-right: 10rpx;
    justify-content: center;
    align-items: center;
}

.cur {
    border: 1px solid var(--primary-color);
}
</style>
