<template>
  <div class="switch_box">
    <h2 v-if="title">{{ title }}</h2>
    <el-radio-group
      v-model="filterData"
      :size="size"
      @change="handleChangeRadio"
    >
      <el-radio-button
        v-for="(i, index) in radioData"
        :key="index"
        :label="i.label"
      >
        <span>{{ i.text }}</span>
      </el-radio-button>
    </el-radio-group>
  </div>
</template>
<script setup>
import { ref } from "vue";
const props = defineProps({
  modelValue: {
    type: String,
    default: "",
  },
  size: {
    type: String,
    default: "",
  },
  title: {
    type: String,
    default: "",
  },
  radioData: {
    type: Array,
    default: [],
  },
});
const emits = defineEmits(["update:modelValue", "handleAction"]);
let filterData = ref(props.modelValue);
function handleChangeRadio(val) {
  emits("update:modelValue", val);
  emits("handleAction", val);
}
</script>
<style lang="scss" scoped>
.switch_box {
  text-align: center;
}
</style>
