<template>
            <div class="modal show d-block bg-cd-modal bg-gradient " >
                
                    <div class="modal-dialog" :class="fullScreen? 'modal-fullscreen':''">
                        <div class="modal-content">
    
                        <!-- Modal Header -->
                        <div class="modal-header">
                            <h4 class="modal-title text-dark">{{ title }}</h4>
                            <button type="button" class="btn-close" @click.prevent="$emit('close')"></button>
                        </div>
    
                        <!-- Modal Loading Body -->
                        <div class="text-center" v-show="loading">
                            <div class="mt-4 p-5 bg-secondary bg-gradient text-dark rounded">
                                <h3>Loading Addtional Data...</h3>                                
                                <div class="spinner-border" role="status">
                                    <span class="visually-hidden">Loading Addtional Data...</span>
                                </div>
                            </div>
                        </div>
                        <!-- Modal body -->
                        <div class="modal-body" v-show="!loading">
                            <form class="container">
                                <!-- <label class=" col-md-6 text-dark" for="">Read Only
                                </label> -->
                                <div class="row px-2 mb-3">
                                    <div class="col-md-6 text-dark my-1">
    
                                        <toggle-switch label-class="fw-bold" @change="readonly=!readonly"></toggle-switch>
                                    </div>
                                    <button class="my-1 col-md-6 btn btn-block btn-danger btn-sm" @click.prevent="delData()">Delete Record</button>  
                                </div>
                                <hr class="border-1 border-black">
                              <div class="mb-1" v-for="r,ind in Object.keys(rData)" :key="ind">
                                <div >
                                    
                                    <div v-if="headerTypes[r].type == 'select'">
                                        <float-select  :readonly="headerTypes[r].readonly || readonly" :disabled="dHolder[headerTypes[r].table]==undefined"
                                            :options="dHolder[headerTypes[r].table]" v-model="selectoids[r]" @change="procSelectChange(r,selectoids[r],headerTypes[r]['triggers'],headerTypes[r]['targetVar'])" 
                                            :label="headers[r]" label-class="text-danger fw-bold" option-class="bg-primary-subtle" :ogDataSrc="rData[r]"
                                        />
                                    </div>
                                    <div v-else-if="headerTypes[r].type == 'hidden'">
                                            <input type="hidden" v-model="rData[r]">
                                    </div>
                                    <div v-else>
                                        <float-inp :type="headerTypes[r].type" :readonly="readonly" :disabled="headerTypes[r]['readonly']" :label="headers[r]" label-class="text-danger fw-bold" input-class="bg-dark-subtle" v-model="rData[r]"/>
                                    </div>
                                </div>
                                <!-- <div v-else>
                                        <div v-if="headerTypes[r].type == 'select'">
                                            <float-select  :readonly="headerTypes[r].readonly || readonly" 
                                                :options="dHolder[headerTypes[r].table]" v-model="rData[r]"  @update="procSelectChange(r,rData[r],headerTypes[r]['triggers'])"
                                                :label="headers[r]" label-class="text-danger fw-bold" option-class="bg-primary-subtle"
                                            />
                                        </div>
                                        <div v-else-if="headerTypes[r].type == 'hidden'">
                                                <input type="hidden" v-model="rData[r]">
                                        </div>
                                        <div v-else>
                                            <float-inp :type="headerTypes[r].type" :readonly="headerTypes[r].readonly || readonly" :label="headers[r]" label-class="text-danger fw-bold" input-class="bg-dark-subtle" v-model="rData[r]"/>
                                        </div>    
                                </div> -->
                                
                                
                              </div>
                              
                              <!-- <button type="submit" class="btn btn-primary">Submit</button> -->
                              <button class="btn btn-block btn-success btn-sm" @click.prevent="apply()">{{ buttunlabel }}</button>
                            </form>
                        </div>
    
                        <!-- Modal footer -->
                        <div class="modal-footer">
                            <button type="button" class="btn btn-danger" @click.prevent="$emit('close')">Close</button>
                        </div>
    
                        </div>
                    </div>
                
                
            </div>
        

</template>
<script>
import toggleSwitch from '@/parts/toggleSwitch.vue';
import floatInp from '@/parts/floatInp.vue';
import floatSelect from '@/parts/floatSelect.vue';
import { dropDown } from '@/cd-links';
export default{
    components:{
        floatInp, toggleSwitch, floatSelect
    },
    props:{
        getItemList:{
            type:Array,
            default:new Array()
        },
        firstSelect:{
            default: new Object({table:'none',colName:'none'}),
            type:Object
        },
        fullScreen:{
            default:false,
            type:Boolean
        },
        title:{
            default:"Note",
            type:String
        },
        rowData:{
            type:Object,
            default:new Object()
        },
        headers:{
            type:Object,
            default:new Object()
        },
        hidden:Array,
        headerTypes:{
            type:Object,
            default:new Object()
        },
        addCols:{
            type:Object,
            default:new Object()
        }
    },
    data() {
        return {
            rData:this.rowData,
            readonly:true,
            dHolder:{},
            loading:false,
            selectoids:{},
            ddLinks: dropDown
        }
    },
    watch:{
        rowData(n){
            this.rData=n;
        }
    },
    methods:{
        async buzz(e){
            return await e;
        },
        notObj(title,msg,type){
            return {
                title: title,
                message: msg,
                type:type
            }
        },
        apply(){
            this.$emit('apply',this.rData);
            this.$emit('close');
        },
        delData(){
            this.$emit('delData',this.rData);
            this.$emit('close');
        },
        genOpts(r){
            return this.getDropDownData(this.headerTypes[r].table,"name");
        },
        procSelectChange(depsCol,valueData,triggerTable,targetVar){
            this.buzz(valueData);
            this.buzz(targetVar);
            this.rData[depsCol]=this.selectoids[depsCol].id;
            targetVar==null? '' : this.rData[targetVar]=valueData[targetVar];
            triggerTable==null? '' : this.getDropDownData(triggerTable,"name",depsCol,valueData.id,this.addCols[triggerTable]);
        }
        ,
        async getDropDownData(table,colName,depsCol='none',whereId=-1,addCols=undefined){
                var toSendObj = {table:table,colName:colName,condition:null,depsCol:depsCol,whereId:whereId}
                addCols==undefined? null : toSendObj.addCols=addCols;
                this.loading=true;
                await this.$store.getters.getAxios.post(this.ddLinks,toSendObj)
                    .then(resp=>{
                        this.dHolder[table] =  JSON.parse(resp.data.data);
                        this.loading=false;
                    })
                    // eslint-disable-next-line
                    .catch(err=>{
                        this.$store.commit('pushNotif',this.notObj('Error Dropdown Data!','Erro downloading '+table+' data for dropdown','danger'));
                        this.loading=false;
                    })
        },
        getSpecificList(name){
            var z = JSON.stringify(this.dHolder);
            this.buzz(z);
            var t =  JSON.parse(z)[name];
            return t;
        }
    },
    computed:{
        buttunlabel(){
            return this.rowData.id>0? 'Update Data' : 'Add Data';
        }
    },
    async mounted(){
        this.firstSelect.table=='none' ? this.buzz('no default list to load') : this.getDropDownData(this.firstSelect.table,this.firstSelect.colName);
        if(this.rData['id']>0){
            /* var varx = ''; */

            /* for (let i = 0; i < this.getItemList.length; i++) {
                varx = this.getItemList[i];
               await this.buzz(this.getSpecificList('banks'));
                if(i!=0) this.getDropDownData(this.headerTypes[varx].table,this.headerTypes[varx].colName);
                this.buzz(this.headerTypes[varx].table);
                for (let j = 0; j < this.dHolder[this.headerTypes[varx].table].length; j++) {
                    if(this.dHolder[this.headerTypes[varx].table][j].id==this.rData['id']){
                        this.selectoids[varx]=this.dHolder[this.headerTypes[varx].table][j];
                    }
                }
            } */
            /* this.getItemList.forEach((e,i)=>{
                if(i!=0) this.getDropDownData(this.headerTypes[e].table,this.headerTypes[e].colName);
                this.buzz('==============---------===============');
                this.buzz('==============---------===============');
                                
                this.selectoids[e] = this.dHolder[this.headerTypes[e].table].filter((e)=>{
                                        this.buzz(e);
                                        this.buzz(this.rData['id']);
                                        return e.id==this.rData['id'];
                                    })[0];
            }); */
            this.getItemList.forEach((e,i,arr)=>{
                this.buzz('==============---------===============');
                if(this.headerTypes[e].depsOn!=null)
                    this.getDropDownData(
                                this.headerTypes[e].table,
                                "name",
                                arr[i-1],
                                this.rowData[arr[i-1]],
                                this.addCols[this.headerTypes[e].table]
                                );
                else    this.getDropDownData(this.headerTypes[e].table,
                                "name");
                this.buzz('==============---------===============');
                                
                /* this.selectoids[e] = this.dHolder[this.headerTypes[e].table].filter((e)=>{
                                        this.buzz(e);
                                        this.buzz(this.rData['id']);
                                        return e.id==this.rData['id'];
                                    })[0]; */
            });
            this.$store.commit('pushNotif',this.notObj('Old Record','This is existing data','success'));
        }
    }
}
</script>
<style scoped>
    .bg-cd-modal{
        background-color: rgba(0, 0, 0, 0.439);
    }
</style>