<template>
  <el-checkbox-group
    :value='value'
    :size='size'
    :disabled='disabled'
    :min='min'
    :max='max'
    :text-color='textColor'
    :fill='fill'
    @input='input'
  >
    <template v-if='parrent === "button"'>
        <el-checkbox-button
            v-for='item in data'
            :key='item.value'
            :label='item.value'
            :trueLabel='item.trueLabel'
            :falseLabel='item.falseLabel'
            :disabled='item.disabled'
            :border='item.border'
            :size='item.size'
            :name='item.name'
        >{{item.label}}</el-checkbox-button>
    </template>
    <template v-else>
        <el-checkbox
            v-for='item in data'
            :key='item.value'
            :label='item.value'
            :trueLabel='item.trueLabel'
            :falseLabel='item.falseLabel'
            :disabled='item.disabled'
            :border='item.border'
            :size='item.size'
            :name='item.name'
        >{{item.label}}</el-checkbox>
    </template>
  </el-checkbox-group>
</template>

<script>
import Checkbox from '@ued_fpi/element-ui/packages/checkbox';
import CheckboxButton from '@ued_fpi/element-ui/packages/checkbox-button';
import CheckboxGroup from '@ued_fpi/element-ui/packages/checkbox-group';
export default {
  name: 'ElDynamicCheckbox',
  props: {
    value: Array,
    disabled: Boolean,
    min: Number,
    max: Number,
    size: String,
    fill: String,
    textColor: String,
    data: {
      type: Array,
      default() {
        return [];
      }
    },
    parrent: String // 只区分el-radio和el-radio-button，只有当parrent为button时，使用el-radio-button
  },
  components: {
    ElCheckboxGroup: CheckboxGroup,
    ElCheckboxButton: CheckboxButton,
    ElCheckbox: Checkbox
  },
  methods: {
    input(val) {
      this.$emit('input', val);
    }
  }
};
</script>