<template>
    <transition name="modal-animation">
        <div class="modal fade show modal-overlay" :class="{ 'show-modal' : modalActive == true}" tabindex="-1" id="connection_modal" v-show="modalActive">
            <div class="modal-dialog modal-dialog-centered" >
                <div class="modal-content">
                    <div class="modal-header" :class="backgroundColor" id="connection_modal_header" style="height: 39px;padding-top: 8px;">
                        <h5 class="text-white mb-0" id="connection_modal_heading">{{title}}</h5>
                        <button @click="closeModal" type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">×</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <table style="border:none;">
                            <tbody>
                                <tr>
                                    <td colspan="5">
                                        <perfect-scrollbar ref="scroll">
                                        <div style="height: 300px; width: 780px;padding-bottom: 5px;" >
                                        <table v-for="(record, index) of dataQuestions" :key="index" class="table tablesorter display compact order-column nowrap fontfit dataTable no-footer">
                                            <thead>
                                            <tr style="background-color: #FB4E0B;color:#FFFFFF">
                                            <slot name="columns">
                                                <th v-for="column in headers" :key="column">{{column}}</th>
                                            </slot>
                                            </tr>
                                            </thead>
                                            <tbody>
                                                <tr v-for="(row, indexRow) of record" :key="indexRow">
                                                    <td v-for="(column, indexColumn) of row" :key="indexColumn" v-show="indexColumn != 'rsvId'">
                                                        {{column}}
                                                    </td>
                                                </tr>
                                                <tr>                                                    
                                                    <td :colspan="headers.length">
                                                        <div style="float:left; padding-top: 5px;">
                                                            <b>is it a correct match?</b>
                                                        </div>
                                                        <div style="float:left">
                                                            <table>
                                                                <check-input label='Accept' :checked="record.answer" @checkChange='record.answer = $event'></check-input>    
                                                            </table>
                                                        </div>
                                                    </td>
                                                    
                                                </tr>
                                               
                                            </tbody>
                                        </table>
                                        </div>
                                        </perfect-scrollbar>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                        <div class="row">
                            <div class="col d-flex justify-content-end" style="margin-top: 20px;margin-bottom: 20px;">
                                <button class="btn btn-primary btn-sm" id="btn_save" type="button" style="width: 80px;margin-right: 10px;margin-left: 10px;background: #FB4E0B;border-color: #dddddd;" @click='save'>Save</button>
                                <button class="btn btn-primary btn-sm" id="btn_save" type="button" style="width: 80px;margin-right: 10px;margin-left: 10px;background: #808080;border-color: #dddddd;" @click='closeModal'>Cancel</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
        </div>
    </transition>
    <Modal title='Possible match candidate' :text='text' @close='closeModal' @cancel="closeModal" :modalActive="showModalConfirmation"  showOkButton="true" :showLoad="showLoadModal" backgroundColor="colorBackgroundModalValidate" confirmButtonText='Submit'></Modal>
</template>
<script lang="ts">
import RowForm from '@/lib-components/component/RowForm.vue';
import Modal from '@/lib-components/component/Modal.vue';
import  SectionHeading from '@/lib-components/component/SectionHeading.vue';
import { JobService } from '@/domain/services/Job.service';
import { PerfectScrollbar } from 'vue3-perfect-scrollbar';
import 'vue3-perfect-scrollbar/dist/vue3-perfect-scrollbar.css'
import CheckInput from '@/lib-components/component/CheckInput.vue';
export default{
    name: 'ModalQuestions',
    components:{
        RowForm,
        Modal,
        SectionHeading,
        PerfectScrollbar,
        CheckInput,
    },
    props: {
        title: { type: String, default: "Questions" },
        modalActive:Boolean,
        showOkButton : Boolean,
        showConfirmButton : Boolean,
        showCloseButton : Boolean,
        backgroundColor: String,
        showLoad : Boolean,
        confirmButtonText : { default : 'Delete', type: String},
        jobId: { default : '', type: String},
    },
    data: () => {
        return {
            load : true,
            text: '',
            showModalConfirmation: false,
            jobService: new JobService(),
            headers:[],
            dataQuestions: [],
            saveOk: false,
        }
    },
    async mounted(){
        this.load = false;
        
    },
    updated(){
        this.bodyOverflowModify();
    },
    watch:{
        async modalActive(){
            if(this.modalActive){
                await this.jobService.getQuestionsEvolve(this.jobId).then((responseJob: any) => {
                    if(responseJob.code == 200){
                        console.log(responseJob.data.length);
                        if(responseJob.data.length > 0){
                            this.dataQuestions = responseJob.data;
                            this.getDataHeaders(this.dataQuestions);
                        }
                        else {
                            this.dataQuestions = [];
                        }
                        
                    }
                });
            }
        }
    },
    methods: {
            resetControls(){
                this.showModalConfirmation = false;
            },
            getDataHeaders(data: []){
                let index = 0;
                this.headers = [];
                data.forEach((item: any) =>{
                    for(const property in item.record_1){
                        if(index == 0 && property != 'rsvId' ){
                            this.headers.push(property);
                        }
                    }
                    index++;
                });
            },
            isCheckAccept(check: boolean){
                this.checkAccept = check;
            },
            isCheckCancel(check: boolean){
                this.checkCancel = check;
            },
            bodyOverflowModify(){
                let body = document.body;
                if(this.modalActive){
                    body.classList.add("modal-open");
                }
                else{
                    body.classList.remove("modal-open");
                }
            },
            async save(){
                await this.jobService.saveQuestionsEvolve(this.jobId, JSON.stringify(this.dataQuestions)).then((response: any) => {
                    console.log(response);
                    this.text = response.response_text;
                    this.showModalConfirmation = true;
                    if(response.code == 200){
                        this.saveOk = true;
                    }
                });                
            },
            closeModal(){
                this.$emit("close");
                this.showModalConfirmation = false;
                if(this.saveOk){
                    console.log('save OK');
                     this.$emit("save");   
                }

            },
        },
}
</script>
<style scoped>
.colorBackgroundModalDelete
{
    background:#b67f80
}
.colorBackgroundModalValidate
{
    background:#799f78
}
.show-modal
{
    display: block;
    padding-right: 17px;
}

.modal-overlay {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 98;
    background-color: rgba(0, 0, 0, 0.3);
}
.modal-dialog {
    max-width: 820px;
    margin: 1.75rem auto;
}
.modal-header{
    background-color: #808080;
}
.ps {
  position: relative !important;
  top: 0;
  bottom: 0;
  width: 100%;
} 
</style>
