<template>
    <div class="radio">
        <div class="title">{{ title }}</div>
        <el-radio-group v-model="radioValue" @change="onRadioChange">
            <el-radio :value="item.value" size="large" v-for="(item, index) in options" :key="index">{{ item.label }}</el-radio>
        </el-radio-group>
    </div>
</template>

<script>export default {
  name: 'Radio',
  model: {
    prop: 'value',
    event: 'change'
  },
  props: {
    value: {
      type: [String, Number],
      default: 1,
      required: true
    },
    options: {
      type: Array,
      default: () => [
        { value: 1, label: '正常' },
        { value: 2, label: '重度残疾' },
        { value: 3, label: '残疾' }
      ]
    },
    title: {
      type: String,
      default: '标题'
    },
    width: {
      type: String,
      default: '20vw'
    }
  },
  emits: ['change'],
  data () {
    return {
      radioValue: this.value
    }
  },
  watch: {
    value (newValue) {
      this.radioValue = newValue
    }
  },
  methods: {
    onRadioChange (value) {
      this.radioValue = value
      this.$emit('change', value)
    }
  }
}
</script>

<style scoped lang="less">
.radio{
    background-color: #DBECFF;
    height: 5.76vw ;
    padding: 0.83vw 1vw ;
    border-radius: 4px;
    width: v-bind(width);
    .title{
        font-size: 0.93vw;
        //margin: 1vw 0;
        margin-bottom: 1vw;

    }
    :deep(.el-radio.el-radio--large .el-radio__label) {
        font-size: 0.93vw;
    }
    :deep(.el-radio.el-radio--large .el-radio__inner) {
        width: 0.93vw;
        height: 0.93vw;
    }
}

</style>
