<template>
<el-form-item :prop="prop" :label="label" :rules="rules" :label-width="options.labelWidth">
  <el-checkbox-group v-model="value" style="width: 100%;" :disabled="disabled">
    <el-checkbox @change="onCheckBoxChange" v-for="row in items" :key="row.__value" :label="row.__value">{{row.__label}}
      <i class="el-icon-question" @click.prevent="options.questionIconFn && options.questionIconFn(row)" v-if="options.showQuestionIcon"></i>
    </el-checkbox>
  </el-checkbox-group>
</el-form-item>
</template>

<script lang="ts">

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

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

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

  def!: CheckboxDef
}
</script>
