<template lang="html">
    <div class="md-gr-row">
        <div class="md-gr-cell-ch">
            <input class="form-check-input" type="checkbox" v-model="checkActive" @change="CheckboxHandle"/>
        </div>
        <div class="md-gr-cell-text">
            <div>{{ name }}</div>
        </div>
    </div>
</template>
<script>
import { useGroupStore } from '@/stores/group';

import '@/assets/css/modal.css';

export default {
    name: 'MdGroupRow',
    props: {
        data: Object
    },
    data() {
        return {
            //Data
            id: 0,
            name: 'ROW NAME',

            //Comp
            checkActive: false,
        }
    },
    setup() {
        const groupStore = useGroupStore();

        return {
            AddToList: groupStore.AddToList,
            RemoveFromList: groupStore.RemoveFromList,
        }
    },
    mounted() {
        this.id = this.data.gr_id;
        this.name = this.data.gr_title;
    },
    methods: {
        CheckboxHandle() {
            if (this.checkActive) {
                this.AddToList(this.id);
            }
            else {
                this.RemoveFromList(this.id);
            }
        }
    }
}
</script>