<template>
  <t-radio-group
    v-model="selected"
    allow-uncheck
    :options="optionList"
    @change="onChange"
  ></t-radio-group>
</template>

<script setup name="SelectEnable">
import { computed, ref, watch } from 'vue';
import { ABLE_TYPE } from '@/config/constants';

const emit = defineEmits(['update:modelValue', 'change']);
const props = defineProps({
  modelValue: { type: [Boolean, String], default: '' },
  options: { type: Object },
});

let selected = ref('');

const optionList = computed(() => {
  const data = props.options ?? ABLE_TYPE;

  return Object.keys(data).map((k) => {
    return { value: k === 'true', label: data[k] };
  });
});

const onChange = () => {
  emit('update:modelValue', selected.value);
  emit('change', selected.value);
};

watch(
  () => props.modelValue,
  (val) => {
    selected.value = val;
  },
  {
    immediate: true,
  }
);
</script>
