<template>
  <el-form-item
    :label="label"
    :rules="requireRule(required, label, validate)"
    :prop="prop"
    :label-width="labelWidth"
  >
    <el-radio-group v-model="$parent.model[prop]" :disabled="disabled" @input="changeValue" style="width: 190px;">
      <el-radio
        v-for="item in data"
        :key="item[`${valueProp}`]"
        :label="item[`${valueProp}`]"
        >{{ item[`${labelProp}`] }}</el-radio
      >
    </el-radio-group>
    <span style="margin-left: 50px">{{ remark }}</span>
  </el-form-item>
</template>

<script>
import mixin from "./mixin";
/**
 * 输入框组件
 */
export default {
  mixins: [mixin],
  props: {
    validate: {
      type: String,
    },
    data: {
      type: Array,
      default: () => [],
    },
    valueProp: {
      type: String,
      default: "value",
    },
    labelProp: {
      type: String,
      default: "label",
    },
    remark: {
      type: String,
      default: "",
    },
    labelWidth: {
      type: String,
    },
  },
  methods:{
    changeValue(value){
      this.$emit('change', value)
    }
  }
};
</script>

<style scoped>
/deep/ .el-form-item__content{
  width: 240px;
}
.el-radio-group {
  width: 100%;
}
</style>
