<template>
  <div class="about">
      <transition-group>
        <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">
               Payee Entity 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 => !hidden.includes(item))" :key="index">
                <float-select   v-if="r=='type'" :options="typeOptions" v-model="rowData[r]" :disabled="disabled.includes(r)" :ogDataSrc="typeOptions.find((b)=>{return b.id==rowData[r]})"
                                list-mode="Object"  :label="headers[r]" label-class="text-dark fw-bold" option-class="bg-primary-subtle bg-gradient"
                                            />
                <float-inp v-else 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="postPayeeEntity('post')" >Create Entity</a>
            <a href="#" v-else class="btn btn-success" @click.prevent="postPayeeEntity('put')" >Update Entity</a>
          </div>
        </div>        
        <cdTable :links="links" title="Payee Entities" table-name="pentity" :hidden="hidden" :headers="headers" :gen-form="false" v-else @popForm="e=>setRowData(e)" ></cdTable>
      </transition-group>
      <!-- <transition>
      </transition> -->
      
    </div>
  </template>
  <script>
  import cdTable from '@/components/cddatatables/cdTable.vue';
  import floatInp from '@/parts/floatInp.vue';
  import floatSelect from '@/parts/floatSelect.vue';
  import { payeeEntityLinks } from '@/cd-links';
  export default{
    components:{
      cdTable, floatInp, floatSelect
    },
    data(){
      return {
        links: payeeEntityLinks,
        headers:{
              id:"ID",
              name: "Name",
              nickname: "Nickname",
              type: "Type",
              description: "Description",
              pan: "PAN",
              gst: "GST",
              tax_details: "Tax_Details",
              address: "Address",
              contact_no: "Contact No.",
              email: "Email",
              createdAt:"Created On",
          },
          hidden:[
            'creatorId',
            'updatedAt',
            'createdAt',
            'status',
            'invoice_temp_id',
            'ent_id'
          ],
          disabled:['id'],
          showModal:false,
          rowData:{
              name: null,
              nickname: null,
              type: null,
              description: null,
              pan: null,
              gst: null,
              tax_details: null,
              address: null,
              contact_no: null,
              email: null,
          },
          typeOptions:[
            {id:"Person",name:"Person"},
            {id:"Company",name:"Company"}
          ],
          loading:false
      }
    },
    methods:{
      async postPayeeEntity(mode){
        
                this.loading=true;
                this.rowData.status=true;
                this.rowData['ent_id']=this.$store.getters.getEntity;
                this.rowData.type = this.rowData.type.name;
                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;
      },
      async getDropDownData(table,colName) {
                    this.loading=true;
                    await this.$axios.post(this.ddLinks,{table:table,colName:colName})
                        .then(resp=>{
                            this.ddHolder[table] =  JSON.parse(resp.data.data);
                            this.ddList.forEach(e=>{
                                if(e.depsOn==null)this.getDropDownData(e.table,e.colName);
                            });
                        })
                        // eslint-disable-next-line
                        .catch(err=>{
                            this.$store.commit('addAlert', {
                                title: "Error Getting Data",
                                message: "Try after some time",
                                type: 'danger'
                            });
        
                        })
                },
      
    }
  }
  </script>
  