<template>
    <tr class="check-box">
        <td style="width: 20px;cursor: pointer;"></td>
        <td  @click='checkChange' colspan="3" style="cursor: pointer;">
            <i :class="[currentCheckStatus ? 'fas fa-check' : 'far fa-square' ]" style="font-size: 14px;margin-top: 1px"></i>
            <label class="label">{{label}}</label>
        </td>
        <td style="width: 20px;cursor: pointer;"></td>
    </tr>
</template>
<script lang="ts">
export default {
    name: 'CheckInput',
    props: {
        id: { type: String, default: '' },
        name: { type: String, default: '' },
        label: { type: String, default: '' },
        checked: { type: Boolean, default: false },
        group: { type: String, default: '' },
    },
    data: () =>{
        return{
            currentCheckStatus: false,
            isEditing: false,
        }
    },
    methods:{
        checkChange(){
            this.$emit('checkChange',  !this.checked);
        },
    },
    watch:{
        checked: function(value: Boolean){
            this.currentCheckStatus = value;
            this.isEditing = true;
            this.$emit('update:isEditing', this.isEditing);
        }
    },
    mounted(){
        this.currentCheckStatus = Boolean(this.checked);
    }

}
</script>
<style scoped>
.validation-icon{
    color: #946464;
}

.label{
    font-size: var(--input-label-font-size) !important;
    color: var(--label-form-color) !important;
    font-weight: bold;
    padding-left: 5px;
}

.check-box{
    background: #00000000;
}

</style>