<template>
  <div class="bio-radio">
    <el-radio-group
      class="bio-radio-group"
      v-model="itemList.value"
      :disabled="disabled">
      <template v-for="(radioItem, radioIndex) in itemList.selector">
        <el-radio
          class="bio-radio__item"
          :label="radioItem[itemList.valueKey || 'codevalue']"
          :disabled="radioItem.disabled"
          :key="radioIndex"
          @click.native.prevent="edcRadioClick({itemList, value: radioItem[itemList.valueKey || 'codevalue'], disabled: (disabled || radioItem.disabled)})">
          {{radioItem[itemList.labelKey || 'codedesp']}}
        </el-radio>

        <!--codelisttype === '2' 多行模式，且可设置一行显示几个-->
        <br
          :key="`key${radioIndex}`"
           v-if="itemList.codelisttype === '2' && ( radioIndex + 1 ) % ( itemList.format || 1) === 0"/>
      </template>
    </el-radio-group>
  </div>
</template>

<script>
export default {
  name: 'BioRadio',

  props: {
    itemList: {
      type: Object
    },

    disabled: {
      type: Boolean
    }
  },

  methods: {
    edcRadioClick({itemList, value, disabled}) {
      if (disabled) return;
      if (value === itemList.value && !itemList.required) {
        this.$set(itemList, 'value', '');
      } else {
        this.$set(itemList, 'value', value);
      }
      this.$emit('radioChange');
    }
  }
};
</script>

<style lang="scss">
.bio-radio {
  width: 100%;
  line-height: 28px;

  .bio-radio-group {
    width: inherit;

    .bio-radio__item {
      margin-bottom: 5px;

      .el-radio__label {
        word-wrap: break-word;
        white-space: normal;
      }
    }
  }
}
</style>
