<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>COUNTER</v-toolbar-title>
              <v-spacer></v-spacer>
              <v-btn  @click="openFormCounter()" 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="counters"   :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.counterCode }}</td>
                                <td  v-bind:class="{'amber lighten-4':props.item.selected}">{{ props.item.counterIP }}</td>
                                <td class="justify-center layout px-0">
                                <v-icon small class="mr-2"  @click="editCounter(props.item)"  > edit </v-icon>
                                 <v-icon small @click="deleteCounter(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="xdialogcounter" persistent max-width="600px">
                  <v-card>
                     <v-card-title>
                     <span class="headline">Form Counter</span>
                     </v-card-title>
                     <v-card-text class="pt-0 pb-0">
                     <v-form
                        ref="formcounter"
                        v-model="validcounter"
                        lazy-validation
                     >
                        <v-layout wrap>
                              <v-flex xs12>
                                 <v-text-field v-model="countercode" label="Kode Counter" :rules="countercodeRules" required></v-text-field>
                              </v-flex>
                              <v-flex>
                                 <p class="error pl-2 pr-2" style="color:#fff" v-if="xerrorcode === true">Udah ada dong kode counter yang sama</p>
                              </v-flex>
                              <v-flex xs12>
                                 <v-text-field v-model="counterip" label="IP Counter" :rules="counteripRules" required></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="updateDialogCounter()">Tutup</v-btn>
                     <v-btn v-if="xactcounter === 'new'" color="blue darken-1" flat @click="saveFormCounter()">Simpan</v-btn>
                     <v-btn v-if="xactcounter === 'edit'" color="blue darken-1" flat @click="updateFormCounter()">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("counter/loadx")
   },
   methods : {
      isSelected(p) {
         return p.counterID == this.$store.state.counter.selected_counter.counterID
      },
      updateDialogCounter(){
         this.$store.commit("counter/update_dialog_counter",false)
      },
      openFormCounter(){
         this.counterpriority = 1
         this.$store.commit("counter/update_dialog_counter",true)
      },
      saveFormCounter(){
         if (this.$refs.formcounter.validate()) {
            this.$store.dispatch("counter/save",{
               code:this.countercode,
               ip:this.counterip
            })
         }
      },
      editCounter(data){
         this.xid = data.counterID
         this.countercode = data.counterCode
         this.counterip = data.counterIP
         this.$store.commit("counter/update_act",'edit')
         this.$store.commit("counter/update_error_code",false)
         this.$store.commit("counter/update_dialog_counter",true)
      },
      updateFormCounter(){
         if (this.$refs.formcounter.validate()) {
            this.$store.dispatch("counter/update",{
               id:this.xid,
               code:this.countercode,
               ip:this.counterip
            })
            
         }
      },
      deleteCounter(data){
         this.xid = data.counterID
         this.msgalert =  "Yakin, mau hapus schedule "+data.counterCode+"  ?"
         this.dialogdeletealert = true
      },
      closeDeleteAlert(){
         this.$store.dispatch("counter/deletex",{
               id:this.xid,
               name:this.counterCode
            })
         this.dialogdeletealert = false
      }
   },
   computed: {
      xactcounter(){
         return this.$store.state.counter.act
      },
      xerrorcode(){
         return this.$store.state.counter.error_code
      },
      xdialogcounter(){
         return this.$store.state.counter.dialog_counter
      },
      counters() {
         return this.$store.state.counter.counters
      },
      isLoading() {
         return this.$store.state.counter.load_status == 1
      },
      updateAlert_success(val){
         this.$store.commit("counter/update_alert_success",val)
      }
   },
   data() {
      return {
         color:"success",
         validcounter:false,
         countercode:'',
         counterip:'',
         countercodeRules: [
            v => !!v || 'Kode Counter harus diisi'
         ],
         counteripRules: [
            v => !!v || 'IP Counter harus diisi'
         ],
         dialogdeletealert:false,
         msgalert:"",
         xid:0,
         headers: [
            {
               text: "Code",
               align: "Center",
               sortable: false,
               value: "mr",
               width: "5%",
               class: " blue lighten-4"
            },
            {
               text: "IP",
               align: "Center",
               sortable: false,
               value: "name",
               width: "5%",
               class: "blue lighten-4"
            },
            {
               text: "Action",
               align: "Center",
               sortable: false,
               value: "name",
               width: "5%",
               class: "blue lighten-4"
            }
         ]
      };
   }
}
</script>
