<template>
<tr>
    <td style="width: 20px;cursor: pointer;"></td>
    <td style="width: 150px;"><span class="text-dark label">{{label}}</span></td>
    <td colspan="2">
        <table>
            <CheckInput v-for="(option, index) of optionList" :key="index" :label='option.label' :checked="option.checked" @checkChange='onCheckChange(index)' ></CheckInput>
        </table>
    </td>
    <td style="width: 20px;cursor: pointer;"></td>
</tr>

  
</template>
<script lang="ts">
import CheckInput from '@/lib-components/component/CheckInput.vue'
export default {
    name: 'CheckInputListOneSelection',
    components:{
        CheckInput
    },
    props: {
        id: { type: String, default: '' },
        name: { type: String, default: '' },
        label: { type: String, default: '' },
        optionList: [],
        group: { type: String, default: '' },
        value: { type: String, default: '' },
    },
    data: () => {
        return {
            currentChecked: null,
            selectedOption: '',
            isEditing: false,
        }
    },
    methods:{
        onCheckChange(value: number){
            this.optionList[value].checked = !this.optionList[value].checked;
            if(this.currentChecked != null){
                this.optionList[this.currentChecked].checked = false;
            }
            if(this.currentChecked ==  value || !this.optionList[value].checked){
                this.currentChecked =  null;
            }else{
                this.currentChecked = value;
            }
            this.selectedOption = this.optionList[value].checked ? this.optionList[value].value : '';
            this.$emit('selectChange', this.selectedOption);
        },
        getCurrentChecked(){
            this.currentChecked = this.optionList.findIndex((item: any) => item.value == this.value);
            console.log(this.value, this.currentChecked);
        }
    },
    watch:{
        value: function(){
            let index = this.optionList.findIndex((item: any) => item.value == this.value);
            this.optionList[index].checked = true;
            this.currentChecked = index;
            this.isEditing = true;
            this.$emit('update:isEditing', this.isEditing);
        }
    },
    mounted(){
        this.currentCheckStatus = Boolean(this.checked);
        this.getCurrentChecked();
    }

}
</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;
}

.check-box{
    background: #00000000;
}

</style>