<template>
    <div class="about">
      <TransitionGroup>
        <div class="card mx-auto my-5 shadow" style="min-width: 18rem; max-width: fit-content;overflow: auto;" v-if="showModal">
          <div class="card-body">
            <h5 class="card-title">
               Bank Account Data
            </h5>
            <button type="button" class="btn-close position-absolute fs-4" aria-label="Close" style="right: 5px;top: 5px;" @click.prevent="showModal=false"></button>
            <div class="contain">
              <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
              <div class="row" v-for="r,index in Object.keys(rowData).filter(item=>!formHidden.includes(item))" :key="index">
                <float-select v-if="r=='bank_id'" label="Bank Name" :options="ddHolder.banks" v-model="rowData[r]" :disabled="disabled.includes(r)" :ogDataSrc="ddHolder.banks.find((b)=>{return b.id==rowData[r]})"
                                                label-class="text-dark fw-bold" option-class="bg-primary-subtle bg-gradient" @change="fetchBranches(rowData[r])"/>
                
                <float-select v-if="r=='branch_id' " label="Branch Name" :options="ddHolder.branches" v-model="rowData[r]" :disabled="disabled.includes(r)" :ogDataSrc="ddHolder['branches'].find((b)=>{return b.id==rowData[r]})"
                                                  label-class="text-dark fw-bold" option-class="bg-primary-subtle bg-gradient" />

                <float-inp v-else-if="!['bank_id','branch_id'].includes(r)" type="text" :label="headers[r]" v-model="rowData[r]" class="col-12 px-1 mb-1" :disabled="disabled.includes(r)"
                label-class="text-dark fw-bold" input-class="bg-primary-subtle bg-gradient input" />
              </div>
            </div>
            <a href="#" v-if="rowData['id']===null || rowData['id']<1" class="btn btn-primary" @click.prevent="postBranch('post')" >Create Bank Account Details</a>
            <a href="#" v-else class="btn btn-success" @click.prevent="postBranch('put')" >Update Bank Account Details</a>
          </div>
        </div>
        <cdTable :links="links" title="Bank Accounts" table-name="bank_account" :hidden="hidden" :headers="headers" :gen-form="false" v-else @popForm="e=>setRowData(e)" ></cdTable>
        
      </TransitionGroup>
      
    </div>
  </template>
  <script>
  import floatInp from '@/parts/floatInp.vue';
  import { dropDownLinks } from '@/cd-links';
  import floatSelect from '@/parts/floatSelect.vue';
  import cdTable from '@/components/cddatatables/cdTable.vue';
  import { bankAccountLinks } from '@/cd-links';
  export default{
    components:{
      cdTable, floatInp, floatSelect
    },
    data(){
      return {
        links: bankAccountLinks,
        headers:{
            id: "ID",            
            nickname: "Nickname",
            name: "Name on Account",
            type: "Type",
            description: "Description",
            account_no: "Account no.#",
            "bank_branch.bank.name": "Bank name",
            "bank_branch.name": "Branch name",
            'bank_branch.ifsc': "IFSC #",
            status: "Status",
            branch_id: "Branch",
          },
          hidden:[
            'creatorId',
            'createdAt',
            'updatedAt',
            'bank_id',
            'ent_id',
            'branch_id'
          ],
          formHidden:['creatorId','createdAt','updatedAt','status','bank.name','ent_id','bank_branch.name','bank_branch.ifsc','bank_branch.id','bank_branch.bank.id','bank_branch.bank.name'],
          disabled:['id'],
          showModal:false,
          rowData:{
            id:null,
            bank_id:null,
            branch_id:null,
            nickname:null,
            name:null,
            type:null,
            description:null,
            account_no:null,
            "bank.name":null,
            "branch.name":null,
            'branch.ifsc':null,
          } ,
          ddHolder:{
            banks:[],
            branches:[]
          },
          preFetch:false,          
      }
    },
    methods:{
      async postBranch(mode){
        
        this.loading=true;
        this.rowData.status=true;
        typeof this.rowData.bank_id=='object'? this.rowData.bank_id = this.rowData.bank_id.id : null;
        typeof this.rowData.branch_id=='object'? this.rowData.branch_id = this.rowData.branch_id.id : null;
        this.rowData['ent_id']=this.$store.getters.getEntity;
        await this.$store.getters.getAxios(this.links[mode],{method:mode,data:this.rowData})
            .then(resp=>{

              if(resp.data.isLoggedIn){
                this.$store.commit('addAlert', {
                                      title: resp.data.title,
                                      message: resp.data.msg,
                                      type: resp.data.success? 'info' : 'danger'
                                  });
                resp.data.success? this.showModal=false : this.showModal=true;                            
                }
              else this.$store.dispatch('loggedOut');
            })
            // eslint-disable-next-line
            .catch(err=>{
                

            })
      },
      setRowData(e){
        console.log(e);
        if(e.rowData['id']!=null){
          this.fetchBranches({id:e.rowData['bank_id']});
        }
        this.rowData=e.rowData;
        this.rowData['branch_id']==undefined? this.rowData={branch_id:null,...this.rowData}:null;
        this.rowData['bank_id']==undefined? this.rowData={bank_id:null,...this.rowData}:null;
        this.showModal=true;
      },
      async getDropDownData(table,listName,filter) {
                    this.loading=true;
                    await this.$store.getters.getAxios.post(dropDownLinks[table],{ent_id:this.$store.getters.getEntity,filter:filter})
                        .then(resp=>{
                            if(!resp.data.isLoggedIn){
                                this.$store.dispatch('loggedOut');
                            }
                            else this.ddHolder[listName] =  resp.data.data;
                        })
                        // eslint-disable-next-line
                        .catch(err=>{
                            this.$store.commit('addAlert', {
                                title: "Error Getting DropDown Data for "+listName,
                                message: "Try after some time",
                                type: 'danger'
                            });
        
                        })
      },
      async fetchBranches(bank_id){
          await this.getDropDownData('branches','branches',{bank_id:bank_id.id});
      },
    },
    async mounted(){
        await this.getDropDownData('banks','banks',0);
        /* this.getDropDownData('branches','branches'); */
    }
  }
  </script>
  