<template>
  <div class="el-radio-card" :class="[`el-radio-card_${direction}`]">
    <radio v-bind="$props" @change="change" @input="handleInput">
      <!-- 通过icon 传参 -->
      <i v-if="$slots.icon" :class="icon" class="icon-initial"></i>
      <!-- radio icon插槽 -->
      <span v-else class="icon-initial">
        <slot name="icon"></slot>
      </span>
      <!-- 默认插槽 -->
      <template v-slot:default>
        <slot></slot>
      </template>
    </radio>
  </div>
</template>
<script>
  import Emitter from 'modesign-ui/src/mixins/emitter';
  import radio from './radio.vue'

  export default {
    name: 'ElRadioCard',

    mixins: [Emitter],

    components: {
      radio
    },

    data() {
      return {};
    },

    methods: {
      change(value, ev) {
        this.$emit('change', value, ev);
      },

      handleInput(val) {
        this.$emit('input', val);
      },
    },

    props: {
      value: {},
      label: {},
      extra: {},
      icon: String,
      disabled: Boolean,
      checked: Boolean,
      name: String,
      trueLabel: [String, Number],
      falseLabel: [String, Number],
      border: Boolean,
      size: {
        type: String,
        default: 'medium'
      },
      direction: {
        type: String,
        default: 'horizontal'
      },
    }
  };
</script>
