<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">
               Tax Type 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="date" v-if="dateFields.includes(r)" :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" />
                <float-inp type="text" v-else :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 Entity</a>
            <a href="#" v-else class="btn btn-success" @click.prevent="postBank('put')" >Update Entity</a>
          </div>
        </div>
        <cdTable :links="links" title="Taxes" table-name="tax" :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 { taxLinks } from '@/cd-links';
  export default{
    components:{
      cdTable, floatInp
    },
    data(){
      return {
        links: taxLinks,
        headers:{
            id: "ID",
            name: "Tax name",
            taxcode: "Tax Code",
            description: "Description",
            shortcode: "Short Code",
            perc: "Percentage(%)",
            start_date: "Applicable From",
            end_date: "Applicable To"
          },
          dateFields:['start_date','end_date'],
          hidden:[
            'creatorId',
            'createdAt',
            'updatedAt'
          ],
          disabled:['id'],
          formHidden:[
            'creatorId',
            'createdAt',
            'updatedAt',
            'ent_id'
          ],          
          showModal:false,
          rowData:{
            id: null,
            name: null,
            taxcode: null,
            description: null,
            shortcode: null,
            perc: null,
            start_date: null,
            end_date: null
          },
      }
    },
    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;
        if(this.rowData['id']>0) {          
          this.rowData.start_date=new Date(this.rowData['start_date']).toLocaleDateString().split('/').reverse().map(s=>s.padStart(2,"0")).join('-');
          this.rowData.end_date=new Date(this.rowData['end_date']).toLocaleDateString().split('/').reverse().map(s=>s.padStart(2,"0")).join('-');
        }
        else{
          this.rowData.start_date=new Date().toLocaleDateString().split('/').reverse().map(s=>s.padStart(2,"0")).join('-');
          this.rowData.end_date=new Date().toLocaleDateString().split('/').reverse().map(s=>s.padStart(2,"0")).join('-');
        }
        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>
  