<script>
export default {
  name: 'ImgCheckboxGroup',
  components: {
    ImgCheckbox: () => import('./ImgCheckbox')
  },
  props: {
    multiple: {
      type: Boolean,
      required: false,
      default: false
    },
    defaultValues: {
      type: Array,
      required: false,
      default: () => []
    },
    options: {
      type: Array,
      default: () => []
    }
  },
  data () {
    return {
      values: [],
      datas: [],
    }
  },
  provide () {
    return {
      groupContext: this
    }
  },
  watch: {
    values: function (value) {
      this.$emit('change', value)
    }
  },
  methods: {
    handleChange (option) {
      if (!option.checked) {
        if (this.values.indexOf(option.value) > -1) {
          this.values = this.values.filter(item => item !== option.value)
        }
      } else {
        if (!this.multiple) {
          this.values = [option.value]
          this.datas.forEach(item => {
            if (item.value !== option.value) {
              item.sChecked = false
            }
          })
        } else {
          this.values.push(option.value)
        }
      }
    }
  },
}
</script>

<template>
  <div style="display: flex">
    <slot>
      <img-checkbox
        v-for="(item, index) in options"
        :key="index"
        v-bind="item"
      />
    </slot>
  </div>
</template>

<style scoped lang="less">

</style>
