<template>
  <div class="about">
      <transition-group>
        <div class="card mx-auto my-5 shadow" style="min-width: 18rem; max-width: 50%;overflow: auto;" v-if="showModal || disposable">
          <div class="card-body">
            <h5 class="card-title">
               Entity Data
            </h5>
            <button type="button" class="btn-close position-absolute fs-4" aria-label="Close" style="right: 5px;top: 5px;" @click.prevent="dispose()"></button>
            <div class="contain">
              <div class="row" :class="r=='invoice_prefix'? 'px-1':''" 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]})"
                                :label="headers[r]" label-class="text-dark fw-bold" option-class="bg-primary-subtle bg-gradient"/>
                <otherSelect v-else-if="r=='invoice_prefix'" :options="prefix_options" :multi-mode="false" :add-new="true" :object-mode="true" dispVal="name" :selectedDefault="rowData[r]"
                             v-model="rowData[r]" formClass="col-12 px-1 mb-1 bg-primary-subtle bg-gradient input rounded" input-class="bg-primary-subtle bg-gradient input"
                             label-class="text-dark fw-bold" :label="headers[r]"/>
                <float-inp v-else-if="r=='last_invoice_no'" type="number" :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 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.hasOwnProperty('id') || rowData['id']===null || rowData['id']<1" class="btn btn-primary" @click.prevent="postEntity('post')" >Create Entity</a>
            <a href="#" v-else class="btn btn-success" @click.prevent="postEntity('put')" >Update Entity</a>
          </div>
        </div>        
        <cdTable :links="links" title="Entities" table-name="entity" :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 { entityLinks } from '@/cd-links';
  import otherSelect from '@/parts/otherSelect.vue';
  export default{
    components:{
      cdTable, floatInp, floatSelect, otherSelect
    },
    props:{
      disposable:{
        type:Boolean,
        default:false
      }
    },
    data(){
      return {
        links: entityLinks,
        headers:{
              id:"ID",
              name: "Name",
              nickname: "Nickname",
              type: "Type",
              invoice_prefix:"Invoice Prefix",
              last_invoice_no:"Last Invoice No.",
              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'
          ],
          disabled:['id'],
          showModal:false,
          rowData:{
              name: null,
              nickname: null,
              type: null,
              invoice_prefix: null,
              last_invoice_no: 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"}
          ],
          prefix_options:[
            {id:"$FY",name:"Financial Year"},
            {id:"$CY",name:"Current Calendar Year"},
            {id:"$QTR",name:"Current Quarter of Calendar Year"},
            {id:"$QTRFY",name:"Current Quarter of Financial Year"},
            {id:"$CM",name:"Current Month"},
            {id:"INV",name:"INV"},
          ],
          loading:false
      }
    },
    methods:{
      dispose(){
        if(this.disposable){

          this.$store.commit('addAlert', {
                                                title: "Minimum Configuration Not Done!",
                                                message: "Please Login Again and Complete the Process",
                                                type: 'warning'})
          this.$store.dispatch('loggedOut');
        }
          
          this.showModal=false;
      },
      async postEntity(mode){
        
                this.loading=true;
                this.rowData.status=true;
                this.rowData.type = this.rowData.type.name;
                this.rowData.invoice_prefix = this.rowData.invoice_prefix==null? null : this.rowData.invoice_prefix.id;
                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'
                                          });
                        if(resp.data.success){
                          this.showModal=false;
                          this.$store.commit('addAlert', {
                                              title: "Minimum Configuration Done!",
                                              message: "Please Login Again",
                                              type: 'primary'});
                          this.$store.dispatch('loggedOut');
                        } 
                        else{
                          this.showModal=true;
                        }
                        }
                      else {
                        if(this.disposable){
                          this.$store.commit('addAlert', {
                                                                title: "Minimum Configuration Not Done!",
                                                                message: "Please Login Again and Complete the Process",
                                                                type: 'warning'})
                                                              }
                        this.$store.dispatch('loggedOut');
                      }
                    })
                    // eslint-disable-next-line
                    .catch(err=>{
                        
    
                    })
            },
      setRowData(e){
        this.rowData=e.rowData;
        /* let defPrefix = this.prefix_options.find(
          (b)=>{
            return b.name==this.rowData.invoice_prefix;
          }
        );
        defPrefix==undefined? this.prefix_options.push({id:this.rowData.invoice_prefix,name:this.rowData.invoice_prefix}) : null; */
                      
        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>
  