<script>
import ElCheckbox from 'element-ui/lib/checkbox'
import ElCheckboxGroup from 'element-ui/lib/checkbox-group'
import 'element-ui/lib/theme-chalk/checkbox.css'
import 'element-ui/lib/theme-chalk/checkbox-group.css'

export default {
  name: 'ProElCheckBox',
  components: { ElCheckbox, ElCheckboxGroup },
  props: {
    options: {
      type: Array,
      default: function() {
        return []
      }
    }
  },
  methods: {
    handleChangeInput(v) {
      this.$emit('input', v)
    }
  },
  render() {
    const props = { ...this.$attrs, ...this.$props };
    const listeners = { ...this.$listeners, change: this.handleChangeInput }
    
    return (
      <ElCheckboxGroup on={listeners} disabled={props.disabled} value={props.value}>
        {
          this.options.map(item => (
            <ElCheckbox label={item.value} key={item.value}>{item.label}</ElCheckbox>
          ))
        }
      </ElCheckboxGroup>
    )
  }
}
</script>