<template>
<el-form-item :prop="prop" :label="label" :label-width="options.labelWidth" :rules="rules">
  <el-radio-group @change="()=>onRadioChange(value)" v-model="value" style="width: 100%;" :disabled="disabled">
    <template v-if="options.type === 'button'">
      <el-radio-button v-for="row in items" :key="row.__value" :label="row.__value">{{row.__label}}</el-radio-button>
    </template>
    <template v-else>
      <el-radio v-for="row in items" :key="row.__value" :label="row.__value">{{row.__label}}
        <el-tooltip v-if="options.desc && options.desc[row.__value]" effect="dark" :content="options.desc[row.__value]" placement="top-start">
          <i class="el-icon-question"></i>
        </el-tooltip>
      </el-radio>
    </template>
  </el-radio-group>
</el-form-item>
</template>

<script lang="ts">

import { Vue, Component, Prop, Ref } from 'vue-property-decorator'
import { mixins } from 'vue-class-component'
import { RadioOptions, RadioDef } from '../../type'
import OptionFieldMixins from './OptionFieldMixins'

@Component
export default class RadioControl extends mixins(OptionFieldMixins) {
  get options () {
    return Object.assign(new RadioOptions(), this.def?.options)
  }

  onRadioChange (row: any) {
    const fn = this.options?.onRadioChange
    if (fn) fn(row, this.actualForm)
  }

  def!: RadioDef
}
</script>
