<template>
  <div
    class="dev-main-item"
    :data-ref="itemObj.ref"
    :data-type="itemObj.type"
    :style="{ width: (100 / 24 * itemObj.options.span).toFixed(5) + '%'}"
    @click.stop="itemClick(itemObj)"
  >
    {{ itemObj.options.labelName }}

    <template v-if="itemObj.options.type == 'radio'">
      <el-radio-group
        v-model="radio"
        :disabled="itemObj.options.disabled"
      >
        <el-radio
          v-for="itme in data"
          :key="itme"
          :label="itme"
          :name="itemObj.options.name"
          :border="itemObj.options.border"
        >
          {{ itme }}
        </el-radio>
      </el-radio-group>
    </template>

    <template v-else-if="itemObj.options.type == 'button'">
      <el-radio-group
        v-model="radio"
        :disabled="itemObj.options.disabled"
        :size="itemObj.options.size"
        :text-color="itemObj.options.textColor"
        :fill="itemObj.options.fill"
      >
        <el-radio-button
          v-for="itme in data"
          :key="itme"
          :label="itme"
          :name="itemObj.options.name"
        />
      </el-radio-group>
    </template>

  </div>
</template>

<script>
import ApDevItemBase from './base/ApDevItemBase'

const arr = ['单选框A', '单选框B', '单选框C']
export default {
  name: 'ApDevRadio',
  extends: ApDevItemBase,
  data() {
    return {
      data: arr,
      radio: '单选框A' // 默认选中
    }
  },
  created() {
    // 默认参数
    this.defaultOptions = {
      span: 12,
      type: 'radio',
      size: 'medium',
      textColor: '#ffffff',
      fill: '#409EFF'
    }
  },
  methods: {

  }
}
</script>

<style scoped>

</style>
