<template>

  <!--
    多选:
      type: 'checkbox'
      v-model:      绑定数据
      keyName:      绑定key，默认‘key’
      labelName:    绑定label，默认‘label’
      dict:         字典
      binding:      执行data: ()=>{} 返回参数的绑定路径
      disabled:     是否禁用，默认false
 -->
  <el-checkbox-group
    v-model="data"
    :disabled="disabled"
  >
    <el-checkbox
      v-for="item in itemsData"
      :key="item[keyName]"
      :label="item[keyName]"
    >
      {{ item[labelName] }}
    </el-checkbox>
  </el-checkbox-group>

</template>

<script>
import { geItemsData } from './common'

export default {
  name: 'ACheckboxGroup',
  props: {
    prop: {
      type: String,
      required: true
    },
    label: {
      type: String,
      required: true
    },
    value: {
      type: [Array],
      default: () => []
    },
    keyName: {
      type: String,
      default: 'key'
    },
    labelName: {
      type: String,
      default: 'label'
    },
    dict: {
      type: String,
      default: undefined
    },
    option: {
      type: [Array, Function],
      default: undefined
    },
    binding: {
      type: String,
      default: ''
    },
    disabled: {
      type: Boolean
    }
  },
  data () {
    return {
      data: this.value,
      itemsData: []
    }
  },
  watch: {
    data (newVal) {
      this.$emit('update:value', newVal)
    },
    value (newVal) {
      this.data = newVal
    }
  },
  async created () {
    if (this.dict) {
      this.$emit('update:keyName', 'dictValue')
      this.$emit('update:labelName', 'dictLabel')
    }
    this.itemsData = await geItemsData(this.dict, this.option, this.binding)
  }
}
</script>
