<template>
  <div class="page">
    <div class="title" v-if="title" :style="{width: labelWidth + 'px'}">{{ title }}</div>
    <el-radio
      v-for="item in cradioList"
      :key="item.id"
      :label="item.label"
      :border="border"
      :size="size"
      @change="onChange"
      v-model="radio"
    >
      {{ item.text }}
    </el-radio>
  </div>
</template>

<script>
export default {
  name: "HmElementRadio",
  data() {
    return {
      radioList: [
        {
          id: 1,
          label: "1",
          value: "raido1",
          text: "备选1",
        },
        {
          id: 1,
          label: "2",
          value: "raido2",
          text: "备选2",
        },
      ],
      radio: "1",
    };
  },
  props: {
    /**
     * 文字标题
     */
    title: {
      type: String,
      default: "raido:"
    },
    /**
     * 标题宽度
     */
    labelWidth: {
      type: Number,
      default:80
    },
    /**
     * 显示边框
     */
    border: {
      type: Boolean,
    },
    /**
     * 大小
     * @options ["default","large","small"]
     */
    size: {
      type: String,
    },
    /**
     * 数据内容
     */
    cradioList: {
      type: Array,
      default: function () {
        return [
          {
            id: 1,
            label: "1",
            value: "raido1",
            text: "备选1",
          },
          {
            id: 1,
            label: "2",
            value: "raido2",
            text: "备选2",
          },
        ];
      },
    },
  },
  watch: {
    cradioList(value) {
      console.log("监听的值", value);
      this.radioList = value;
    },
  },
  mounted() {
    this.radioList = this.cradioList;
  },
  methods: {
    onChange(e) {
      console.log("label改变了", e);
      this.$emit("e");
    },
  },
};
</script>

<style scoped>
.page {
  width: 100%;
  display: flex;
  align-items: center;
  padding-left: 5vw;
}
</style>