<template>
    <v-layout column fill-height>
<template>
  
    <v-dialog
      v-model="dialogdeletealert"
      max-width="30%"
    >
        <v-card>
            <v-card-title
                class="headline grey lighten-2 pt-2 pb-2"
                primary-title
            >
            Peringatan !
            </v-card-title>
            <v-card-text class="pt-2 pb-2">
                <v-layout row>
                    <v-flex xs12 d-flex>
                        <v-layout row>
                            <v-flex pb-1 xs12>
                                <v-layout row>
                                    <v-flex pt-2 pr-2 xs12>
                                       {{msgalert}}
                                    </v-flex>
                                </v-layout>
                            </v-flex>
                        </v-layout>
                    </v-flex>
                </v-layout> 
            </v-card-text>
            <v-divider></v-divider>
            <v-card-actions>
                <v-spacer></v-spacer>
                <v-btn
                    color="primary"
                    flat
                    @click="dialogdeletealert = false"
                >
                Tutup
                </v-btn>
                <v-btn
                    color="primary"
                    flat
                    @click="closeDeleteAlert()"
                >
                Yakin lah
                </v-btn>
            </v-card-actions>
        </v-card>
    </v-dialog>
  
</template>

            <v-toolbar  class="pa-1 mb-2" color="blue lighten-3" dark height="50px">
              <v-toolbar-title>NUMBERING</v-toolbar-title>
              <v-spacer></v-spacer>
              <v-btn  @click="openFormNumbering()" icon>
                <v-icon>library_add</v-icon>
              </v-btn>
            </v-toolbar>


            <v-card class="pa-1 p-left-side grow" grow>
                <v-card-text class="pa-0">
                    <v-layout row wrap>

                        <v-flex xs12>
                        <v-data-table :headers="headers" :items="numberings"   :loading="isLoading" hide-actions class="elevation-1">
                           <template slot="items" slot-scope="props">
                              <td  v-bind:class="{'amber lighten-4':props.item.selected}" >{{ props.item.serviceName }}</td>
                              <td  class="text-sm-center" v-bind:class="{'amber lighten-4':props.item.selected}" >{{ props.item.numberingPrefix }}</td>
                              <td  class="text-sm-center" v-bind:class="{'amber lighten-4':props.item.selected}" >{{ props.item.numberingPrefixDate }}</td>
                              <td  class="text-sm-center" v-bind:class="{'amber lighten-4':props.item.selected}" >{{ props.item.numberingDigit }}</td>
                              <td  class="text-sm-center" v-bind:class="{'amber lighten-4':props.item.selected}" >{{ props.item.numberingSufix }}</td>
                              <td  class="text-sm-center" v-bind:class="{'amber lighten-4':props.item.selected}" >{{ props.item.numberingCounter }}</td>
                              <td  class="text-sm-center" v-bind:class="{'amber lighten-4':props.item.selected}" >{{ props.item.numberingReset }}</td>
                              <td class="justify-center layout px-0">
                                 <v-icon color="primary" small class="mr-2"  @click="editNumbering(props.item)"  > edit </v-icon>
                                 <v-icon color="error" small @click="deleteNumbering(props.item)" > delete   </v-icon> 
                              </td>
                             </template>

                        </v-data-table>
                        </v-flex>

                    </v-layout>
                </v-card-text>



            </v-card>
            <template>
               <v-layout row justify-center>
               <v-dialog v-model="xdialognumbering" persistent max-width="600px">
                  <v-card>
                     <v-card-title>
                     <span class="headline">Form Penomoran</span>
                     </v-card-title>
                     <v-card-text class="pt-0 pb-0">
                     <v-form
                        ref="formnumbering"
                        v-model="validnumbering"
                        lazy-validation
                     >
                        <v-layout wrap>
                              <v-flex xs12>
                                 <v-select
                                    item-text="serviceName"
                                    return-object
                                    :items="xservices" 
                                    v-model="xservice"
                                    label="Layanan"
                                 ></v-select>
                              </v-flex>
                              <v-flex xs12>
                                 <v-text-field v-model="prefix" label="Sisipan Awal"></v-text-field>
                              </v-flex>
                              <v-flex xs12>
                                 <v-text-field v-model="prefixdate" label="Sisipan Awal Tanggal"></v-text-field>
                              </v-flex>
                              <v-flex xs12>
                                 <v-text-field v-model="digit" label="Digit" ></v-text-field>
                              </v-flex>
                              <v-flex xs12>
                                 <v-text-field v-model="sufix" label="Sisipan Akhir" ></v-text-field>
                              </v-flex>
                              <v-flex xs12>
                                 <v-text-field v-model="counter" label="Counter" ></v-text-field>
                              </v-flex>
                              <v-flex xs12>
                                 <v-text-field v-model="reset" label="Reset" ></v-text-field>
                              </v-flex>
                        </v-layout>
                     </v-card-text>
                     <v-card-actions>
                     <v-spacer></v-spacer>
                     <v-btn color="blue darken-1" flat @click="updateDialogNumbering()">Tutup</v-btn>
                     <v-btn v-if="xactnumbering === 'new'" color="blue darken-1" flat @click="saveFormNumbering()">Simpan</v-btn>
                     <v-btn v-if="xactnumbering === 'edit'" color="blue darken-1" flat @click="updateFormNumbering()">Simpan Perubahan</v-btn>
                     </v-card-actions>
                     </v-form>
                  </v-card>
               </v-dialog>
               </v-layout>
          </template>
    </v-layout>

</template>

<style scoped>
table.v-table tbody td,table.v-table tbody th {
   height: 40px;
}

table.v-table thead tr {
   height: 40px;
}
</style>

<script>
module.exports = {
   components : {
      'one-dialog-info':httpVueLoader('../../common/oneDialogInfo.vue'),
      'one-dialog-alert':httpVueLoader('../../common/oneDialogAlert.vue')
   },
   mounted() {
      this.$store.dispatch("numbering/loadx")
   },
   methods : {
      isSelected(p) {
         return p.numberingID == this.$store.state.numbering.selected_numbering.numberingID
      },
      updateDialogNumbering(){
         this.$store.commit("numbering/update_dialog_numbering",false)
      },
      openFormNumbering(){
         this.$store.commit("service/update_selected_service",{})
         this.prefix = ''
         this.prefixdate = ''
         this.digit = ''
         this.sufix = ''
         this.counter = 0
         this.reset = ''
         this.$store.commit("numbering/update_dialog_numbering",true)
      },
      saveFormNumbering(){
         if (this.$refs.formnumbering.validate()) {
            this.$store.dispatch("numbering/save",{
               serviceid:this.$store.state.service.selected_service.serviceID,
               prefix:this.prefix,
               prefixdate:this.prefixdate,
               digit:this.digit,
               sufix:this.sufix,
               counter:this.counter,
               reset:this.reset
            })
         }
      },
      editNumbering(data){
         this.xid = data.numberingID
         this.$store.commit("service/update_selected_service",{serviceID:data.serviceID,serviceCode:data.serviceCode,serviceName:data.serviceName})
         this.prefix = data.numberingPrefix
         this.prefixdate = data.numberingPrefixDate
         this.digit = data.numberingDigit
         this.sufix = data.numberingSufix
         this.counter = data.numberingCounter
         this.reset = data.numberingReset
         this.$store.commit("numbering/update_act",'edit')
         this.$store.commit("numbering/update_error_code",false)
         this.$store.commit("numbering/update_dialog_numbering",true)
      },
      updateFormNumbering(){
         if (this.$refs.formnumbering.validate()) {
            this.$store.dispatch("numbering/update",{
               id:this.xid,
               serviceid:this.$store.state.service.selected_service.serviceID,
               prefix:this.prefix,
               prefixdate:this.prefixdate,
               digit:this.digit,
               sufix:this.sufix,
               counter:this.counter,
               reset:this.reset
            })
            
         }
      },
      deleteNumbering(data){
         this.xid = data.numberingID
         this.msgalert =  "Yakin, mau hapus numbering "+data.numberingPrefix+"  ?"
         this.dialogdeletealert = true
      },
      closeDeleteAlert(){
         this.$store.dispatch("numbering/deletex",{
               id:this.xid,
               name:this.numberingPrefix
            })
         this.dialogdeletealert = false
      }
   },
   computed: {
      xactnumbering(){
         return this.$store.state.numbering.act
      },
      xerrorcode(){
         return this.$store.state.numbering.error_code
      },
      xservices(){
         return this.$store.state.service.services
      },
      xservice:{
         get() {
               return this.$store.state.service.selected_service
         },
         set(val) {
               this.$store.commit("service/update_selected_service",val)
         }
      },
      snackbar: {
         get() {
            return this.$store.state.numbering.alert_success
         },
         set(val) {
            this.$store.commit("numbering/update_alert_success",val)
         }
      },
      msgsnackbar(){
        return this.$store.state.numbering.msg_success
      },
      xdialognumbering(){
         return this.$store.state.numbering.dialog_numbering
      },
      numberings() {
         return this.$store.state.numbering.numberings
      },
      isLoading() {
         return this.$store.state.numbering.load_status == 1
      },
      updateAlert_success(val){
         this.$store.commit("numbering/update_alert_success",val)
      }
   },
   data() {
      return {
         color:"success",
         validnumbering:false,
         xid:0,
         prefix:'',
         prefixdate:'',
         digit:'',
         sufix:'',
         counter:'',
         reset:'',
         dialogdeletealert:false,
         msgalert:"",
         headers: [
            {
               text: "LABEL PENOMORAN",
               align: "LEFT",
               sortable: false,
               value: "mr",
               width: "15%",
                class: "pa-2 blue lighten-3 white--text"
            },
            {
               text: "SISIPAN AWAL",
               align: "Center",
               sortable: false,
               value: "lab",
               width: "15%",
                class: "pa-2 blue lighten-3 white--text"
            },
            {
               text: "SISIPAN AWAL TANGGAL",
               align: "Center",
               sortable: false,
               value: "name",
               width: "15%",
                class: "blue lighten-3 white--text"
            },
            {
               text: "DIGIT",
               align: "CENTER",
               sortable: false,
               value: "name",
               width: "15%",
                class: "blue lighten-3 white--text"
            },
            {
               text: "SISIPAN AKHIR",
               align: "Center",
               sortable: false,
               value: "name",
               width: "15%",
               class: "blue lighten-3 white--text"
            },
            {
               text: "COUNTER",
               align: "Center",
               sortable: false,
               value: "name",
               width: "15%",
               class: "blue lighten-3 white--text"
            },
            {
               text: "RESET",
               align: "Center",
               sortable: false,
               value: "name",
               width: "15%",
                class: "blue lighten-3 white--text"
            },
            {
               text: "AKSI",
               align: "Center",
               sortable: false,
               value: "name",
               width: "15%",
                class: "blue lighten-3 white--text"
            }
         ]
      };
   }
}
</script>
