<template>
    <div class="about">
      <Transition>
        <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">
               Billable 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">
              <div class="row" v-for="r,index in Object.keys(rowData).filter(item=>!formHidden.includes(item))" :key="index">
                <float-select v-if="r=='type'" list-mode="Array" label="Billable Type" :options="listOptions.type" v-model="rowData[r]" :disabled="disabled.includes(r)" :ogDataSrc="rowData[r]"
                  label-class="text-dark fw-bold" option-class="bg-primary-subtle bg-gradient"/>
                <float-select v-else-if="r=='currency'" list-mode="Array" label="Billing Currency" :options="listOptions.currency" v-model="rowData[r]" :disabled="disabled.includes(r)" :ogDataSrc="listOptions.currency.find((b)=>{return b==rowData[r]})"
                    label-class="text-dark fw-bold" option-class="bg-primary-subtle bg-gradient"/>
                <multi-form v-else-if="r=='taxes'" :options="ddHolder.taxes" formClass="bg-primary-subtle bg-gradient input" wrapClass="col-12 px-1 mb-1"
                        label-class="text-dark fw-bold" input-class="bg-primary-subtle bg-gradient input"  label="Taxes" :subTexts="['perc']" :suffix="multiCols.suffix" :prefix="multiCols.prefix"
                        title="Select Taxes" :selected="rowData[r]? rowData[r] : []" @updateChoices="this.rowData[r]=$event"/>
                <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="postBillable('post')" >Create Billable</a>
            <a href="#" v-else class="btn btn-success" @click.prevent="postBillable('put')" >Update Billable</a>
          </div>
        </div>
        <cdTable :links="links" title="Billables" table-name="billable" :hidden="hidden" :headers="headers" 
        :gen-form="false" v-else @popForm="e=>setRowData(e)" :multiCols="multiCols"></cdTable>
        
      </Transition>

      
    </div>
  </template>
  <script>
  import floatInp from '@/parts/floatInp.vue';
  import floatSelect from '@/parts/floatSelect.vue';
  import MultiForm from '@/parts/MultiForm.vue';
  import cdTable from '@/components/cddatatables/cdTable.vue';
  import { billableLinks,dropDownLinks } from '@/cd-links';  
  export default{
    components:{
      cdTable, floatInp, floatSelect, MultiForm
    },
    data(){
      return {
        links: billableLinks,
        headers:{
            id: "ID",
            name: "Billable",
            type: "Type",
            hsn:"HSN",
            taxes:"Taxes",
            description: "Description",
            shortcode: "Short Code",
            currency: "Currency",
            cost: "Cost",
            status: "Status",

          },
          hidden:[
            'creatorId',
            'createdAt',
            'updatedAt',
            'billable_entity.id',
            'billable_entity.name'
          ],
          disabled:['id'],
          formHidden:[
            'creatorId',
            'createdAt',
            'updatedAt',
            'status',
            'ent_id',

          ],          
          showModal:false,
          rowData:{
            id: null,
            name: null,
            type: null,
            hsn:null,
            taxes:null,
            description: null,
            shortcode: null,
            currency: null,
            cost: null,
            status: null
          },
          multiCols:{
                  cols:[
                    'taxes',
                  ],
                  subTexts:{
                    taxes:['perc']
                  },
                  suffix:new Map([
                    ["perc","%"], 
                  ]),
                  prefix: new Map([
                    /* ["perc","Excl."] */
                  ])
                },
          preFetch:false,
          listOptions:{
            currency: ['INR','GBP','USD','EUR','RUB'],
            type: ['Service','Product','Consultancy']
          },
          ddHolder:{
            taxes:[],   
          },
      }
    },
    methods:{
      async postBillable(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;
      },
      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 mounted(){
      await this.getDropDownData('taxes','taxes',0);
    }
}
  </script>
  