<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-snackbar
               v-model="snackbar"
               :color="color"
               :timeout="5000"
               :multi-line="false"
               :vertical="false"
               :top="true"
               
            >
               {{msgsnackbar}}
               <v-btn
               flat
               @click="updateAlert_success(false)"
               >
               Tutup
               </v-btn>
            </v-snackbar>

            <v-toolbar  class="pa-1 mb-2" color="blue lighten-3" dark height="50px">
              <v-toolbar-title>LAYANAN</v-toolbar-title>
              <v-spacer></v-spacer>
              <v-btn @click="openFormService()" 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="services"   :loading="isLoading" hide-actions class="elevation-1">
                           <template slot="items" slot-scope="props">
                              <td  class="text-align:center" v-bind:class="{'amber lighten-4':props.item.selected}">{{ props.item.serviceCode }}</td>
                                 <td  style="text-align:left" v-bind:class="{'amber lighten-4':props.item.selected}">{{ props.item.serviceName }}</td>
                                 <td  style="text-align:center" v-bind:class="{'amber lighten-4':props.item.selected}">{{ props.item.servicePriority }}</td>
                                 <td style="text-align:center" class="justify-center layout px-0">
                                    <v-icon color="primary" small class="mr-2"  @click="editService(props.item)"  > edit </v-icon>
                                    <v-icon color="error" small @click="deleteService(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="xdialogservice" persistent max-width="600px">
                  <v-card>
                     <v-card-title>
                     <span class="headline">Form Service</span>
                     </v-card-title>
                     <v-card-text class="pt-0 pb-0">
                     <v-form
                        ref="formservice"
                        v-model="validservice"
                        lazy-validation
                     >
                        <v-layout wrap>
                              <v-flex xs12>
                                 <v-text-field v-model="servicecode" label="Kode Layanan" :rules="servicecodeRules" 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 service yang sama</p>
                              </v-flex>
                              <v-flex xs12>
                                 <v-text-field v-model="servicename" label="Nama Layanan" :rules="servicenameRules" required></v-text-field>
                              </v-flex>
                              <v-flex xs12>
                                 <v-text-field v-model="servicepriority" label="Prioritas" ></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="updateDialogService()">Tutup</v-btn>
                     <v-btn v-if="xactservice === 'new'" color="blue darken-1" flat @click="saveFormService()">Simpan</v-btn>
                     <v-btn v-if="xactservice === 'edit'" color="blue darken-1" flat @click="updateFormService()">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("service/loadx")
   },
   methods : {
      isSelected(p) {
         return p.serviceID == this.$store.state.service.selected_service.serviceID
      },
      selectMe(val) {
         
      },
      updateDialogService(){
         this.$store.commit("service/update_dialog_service",false)
      },
      openFormService(){
         this.servicepriority = 1
         this.$store.commit("service/update_dialog_service",true)
      },
      saveFormService(){
         if (this.$refs.formservice.validate()) {
            this.$store.dispatch("service/save",{
               code:this.servicecode,
               name:this.servicename,
               priority:this.servicepriority
            })
         }
      },
      editService(data){
         this.xid = data.serviceID
         this.servicecode = data.serviceCode
         this.servicename = data.serviceName
         this.servicepriority = data.servicePriority
         this.$store.commit("service/update_act",'edit')
         this.$store.commit("service/update_error_code",false)
         this.$store.commit("service/update_dialog_service",true)
      },
      updateFormService(){
         if (this.$refs.formservice.validate()) {
            this.$store.dispatch("service/update",{
               id:this.xid,
               code:this.servicecode,
               name:this.servicename,
               priority:this.servicepriority
            })
            
         }
      },
      deleteService(data){
         this.xid = data.serviceID
         this.msgalert =  "Yakin, mau hapus layanan "+data.serviceName+"  ?"
         this.dialogdeletealert = true
      },
      closeDeleteAlert(){
         this.$store.dispatch("service/deletex",{
               id:this.xid,
               name:this.serviceName
            })
         this.dialogdeletealert = false
      },
   },
   computed: {
      xactservice(){
         return this.$store.state.service.act
      },
      xerrorcode(){
         return this.$store.state.service.error_code
      },
      snackbar: {
         get() {
            return this.$store.state.service.alert_success
         },
         set(val) {
            this.$store.commit("service/update_alert_success",val)
         }
      },
      msgsnackbar(){
        return this.$store.state.service.msg_success
      },
      xdialogservice(){
         return this.$store.state.service.dialog_service
      },
      services() {
         return this.$store.state.service.services
      },
      isLoading() {
         return this.$store.state.service.load_status == 1
      },
      updateAlert_success(val){
         this.$store.commit("service/update_alert_success",val)
      }
   },
   data() {
      return {
         color:"success",
         validservice:false,
         servicecode:'',
         servicename:'',
         servicepriority:1,
         servicenameRules: [
            v => !!v || 'Nama Layanan harus diisi'
         ],
         servicecodeRules: [
            v => !!v || 'Kode Layanan harus diisi'
         ],
         dialogdeletealert:false,
         msgalert:"",
         xid:0,
         headers: [
            {
               text: "KODE",
               align: "left",
               sortable: false,
               value: "mr",
               width: "15%",
               class: "blue lighten-3 white--text"
            },
            {
               text: "NAMA LAYANAN",
               align: "left",
               sortable: false,
               value: "name",
               width: "25%",
               class: "blue lighten-3 white--text"
            },
            {
               text: "PRIORITAS",
               align: "center",
               sortable: false,
               value: "name",
               width: "25%",
               class: "blue lighten-3 white--text"
            },
            {
               text: "AKSI",
               align: "center",
               sortable: false,
               value: "status",
               width: "15%",
               class: "blue lighten-3 white--text"
            }
         ],
      };
   }
}
</script>
