<template>
    <div class="WM-Checkbox c-toggle-hide RTL WM-Align-R">
        <input
            type="checkbox"
            :id="ItemID"
            class="c-check"
            :value="ItemID"
            v-model="values"
            @change="changeValue"
        />
        <label :for="ItemID">
            <span class="inc"></span>
            <span class="check"></span>
            <span class="box"></span>
            {{ ItemText }}
        </label>
    </div>
</template>

<script>
export default {
    props: {
        ItemID: { default: "Checkbox" },
        ItemText: { default: " مقدار پیش فرض " },
        color: { default: "Red" },
        value: {type: Array}
    },
    data: function() {
        return {
            IconClass: "WMi-" + this.Icon,
            values: this.value
        };
    },
    methods:{
        changeValue($event) {
            if (this.value) {
                if ($event.target.checked) {
                    this.value.push(this.ItemID);
                } else {
                    let index = this.value.findIndex(x => x == this.ItemID);
                    this.value.splice(index, 1);
                }
            }
        }
    },
    watch:{
        value(value) {
            this.values = value;
        }
    }
};
</script>
