<script setup>
import {inject} from "vue";

const modelValue = inject('modelValue');
const {value} = defineProps({
    value: {
        type: [String, Number],
        default: 0
    }
});
</script>

<template>
    <view @click="modelValue=value" :class="['x-radio', modelValue===value ? 'x-radio-cur' : '']">
        <slot></slot>
    </view>
</template>

<style lang="scss" scoped>
.x-radio {
    padding: 12rpx 0;
    text-align: center;
    background-color: #F7F8FA;
    border-radius: 4rpx;
    color: rgb(78, 89, 105);
    font-size: 24rpx;
    font-weight: 500;
    line-height: 20px;
    letter-spacing: 0;
    transition: 500ms;
}
.x-radio-cur {
    background-color: #E8F3FF;
    color: #165DFF;
}
</style>
