<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 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-inp 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="postBank('post')" >Create Bank</a>
            <a href="#" v-else class="btn btn-success" @click.prevent="postBank('put')" >Update Bank</a>
          </div>
        </div>
        <cdTable :links="links" title="Banks" table-name="banks" :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 cdTable from '@/components/cddatatables/cdTable.vue';
  import { bankLinks } from '@/cd-links';
  export default{
    components:{
      cdTable, floatInp
    },
    data(){
      return {
        links: bankLinks,
        headers:{
            id: "ID",
            name: "Bank",
            type: "Type",
            description: "Description",
            shortcode: "Code",
            cog: "Country",
            status: "Status",
          },
          hidden:[
            'creatorId',
            'createdAt',
            'updatedAt'
          ],
          disabled:['id'],
          formHidden:[
            'creatorId',
            'createdAt',
            'updatedAt',
            'status',
            'ent_id'
          ],          
          showModal:false,
          rowData:{
            id: null,
            name: "",
            type: "",
            description: "",
            shortcode: "",
            cog: "",
          },
          preFetch:false
      }
    },
    methods:{
      async postBank(mode){        
        this.loading=true;
        this.rowData.status=true;
        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){
        this.rowData=e.rowData;
        this.showModal=true;
      },
    mounted(){
      if(this.$store.getters.getEntity<1){
                this.$store.commit('addAlert', {
                                                    title: "No Entity Selected!",
                                                    message: "Please select an entity to proceed",
                                                    type: 'warning'
                                                })                
                this.$router.push('/');
            }
      else{
        this.preFetch=true;
      }
    }
  }
}
  </script>
  