import { defineComponent, PropType, ref } from 'vue';
import './index.less';
export default defineComponent({
  props: {
    options: {
      type: Array as PropType<any[]>,
      default: [],
    },
    modelValue: {
      type: Number || String,
    },
  },
  emits: ['update:modelValue', 'change'],
  setup(props, { emit }) {
    const curbtn = ref<string | number | undefined>(props.modelValue);
    const CurrentChange = (value: string | number) => {
      curbtn.value = value;
      emit('change', value);
      // emit('update:modelValue', value);
    };
    return () => (
      <div class="custom-radio-group">
        {props.options.map((item: any) => (
          <button
            class={[
              'radio-group-button',
              item.value == curbtn.value ? 'radio-group-active' : '',
            ]}
            onClick={CurrentChange.bind(this, item.value)}
          >
            {item.label}
          </button>
        ))}
      </div>
    );
  },
});
