<template>
  <view class="cu-form-group">
    <view class="title">{{ title }}</view>
    <checkbox
      @click="change"
      :checked="isCheck"
      :value="checkboxValue"
      :disabled="disabled"
      :class="[isCheck ? 'checked' : '', color ? color : '', round ? 'round' : '']"
    ></checkbox>
  </view>
</template>

<script>
export default {
  name: 'l-checkbox',

  props: {
    title: {},
    disabled: {},
    round: {},
    color: {},
    checkboxValue: {},
    value: { default: () => [] }
  },

  methods: {
    change(e) {
      let arr = this.value
      const isCurrentCheck = this.value.includes(this.checkboxValue)

      if (isCurrentCheck) {
        arr = arr.filter(t => t !== this.checkboxValue)
      } else {
        arr.push(this.checkboxValue)
      }

      this.$emit('input', arr)
      this.$emit('change', arr)
    }
  },

  computed: {
    isCheck() {
      return this.value.includes(this.checkboxValue)
    }
  }
}
</script>
