<template>
 <v-layout >
 <v-flex xs12 >
 <v-card  class="mb-2" color="white"  >
    <v-toolbar  color="blue lighten-3" dark height="50px">
    <v-toolbar-title>Rack : {{xalmari.name}}</v-toolbar-title>
    <v-spacer></v-spacer>
    <v-btn @click="openFormRack(0)" icon>
      <v-icon>library_add</v-icon>
    </v-btn>
  </v-toolbar>

  <v-layout row wrap>
    <v-flex class="border-bottom-dashed" xs12 pt-2 pl-4 pr-4 pb-4>
          <table>
              <tr>
                <th width="25%" class="text-md-center pt-2 pb-2">KODE</th>
                <th  width="35%" class="text-md-center pt-2 pb-2">JUMLAH BARIS</th>
                <th width="15%" class="text-md-center pt-2 pb-2">JUMLAH KOLOM</th>
                <th  class="text-md-center pt-2 pb-2">AKSI</th>
              </tr>
              <tr v-if="racks.length > 0 " v-for="(rack,idx) in racks">
                <td class="text-md-left pl-3">{{rack.code}}</td>
                <td class="text-md-center">{{rack.xrows}}</td>
                <td class="text-md-center">{{rack.xcols}}</td>
                <td align="center" class="text-md-center">
                  <v-btn @click="editFormRack(rack)" depressed small color="primary"><v-icon>edit</v-icon></v-btn> 
                  <v-btn @click="deleteRack(rack)" depressed small color="error"><v-icon>delete</v-icon></v-btn>
                </td>
              </tr>
              <tr v-if="racks.length === 0"><td align="center" style="height:50px;text-align:center" colspan="8">Belum ada data</td> </tr>
          </table>
    </v-flex>
  </v-layout>
   <template>
  
    <v-dialog
      v-model="dialogdeletealertrack"
      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>
                                       {{msgalertrack}} 
                                    </v-flex>
                                </v-layout>
                                <v-layout mt-2 row>
                                  <p v-for="(xerror,idx) in xerrors" class="error pl-2 pr-2" style="color:#fff">{{xerror.msg}}</p>
                                </v-layout>
                                <v-layout row>
                                  <p v-for="(xsample,idx) in xsamples" class="info pl-2 pr-2" style="color:#fff">{{xsample.msg}}</p>
                                </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="dialogdeletealertrack = false"
                >
                Tutup
                </v-btn>
                <v-btn
                    color="primary"
                    flat
                    @click="doDeleteRack()"
                >
                Yakin lah
                </v-btn>
            </v-card-actions>
        </v-card>
    </v-dialog>
  
</template>


  <template>
    <v-layout row justify-center>
      <v-dialog v-model="dialograck" persistent max-width="600px">
        <v-card>
          <v-card-title>
            <span class="headline">Form Rack</span>
          </v-card-title>
          <v-card-text class="pt-0 pb-0">
            <v-layout wrap>
                <v-flex xs12>
                  Lemari : {{xalmari.name}}
                </v-flex>
                <v-flex xs12>
                  <v-text-field
                    label="Kode"
                    v-model="code"
                  ></v-text-field>
                </v-flex>
               <v-flex xs12>
                  <v-text-field
                    label="Jumlah Baris"
                    v-model="rows"
                  ></v-text-field>
                </v-flex>
                <v-flex xs12>
                  <v-text-field
                    label="Jumlah Kolom"
                    v-model="cols"
                  ></v-text-field>
                </v-flex>
                <v-flex>
                  <p v-for="(xerror,idx) in xerrors" class="error pl-2 pr-2" style="color:#fff">{{xerror.msg}}</p>
                  <p v-for="(xsample,idx) in xsamples" class="info pl-2 pr-2" style="color:#fff">{{xsample.msg}}</p>
                </v-flex>
            </v-layout>
          </v-card-text>
          <v-card-actions>
            <v-spacer></v-spacer>
            <v-btn color="blue darken-1" flat @click="updateDialogFormRack()">Tutup</v-btn>
            <v-btn color="blue darken-1" flat @click="saveFormRack()">Simpan</v-btn>
          </v-card-actions>
        </v-card>
      </v-dialog>
    </v-layout>
  </template>

 </v-card>
 </v-flex>



</v-layout>
</template>

<style scoped>
.searchbox .v-input.v-text-field .v-input__slot{
   min-height:60px;
}
.searchbox .v-btn {
   min-height:60px;
}


table {
   font-family: arial, sans-serif;
   border-collapse: collapse;
   width: 100%;
   background:white;
   border: 0px;
}

th, td {
   border: 1px solid black;
   border-collapse: collapse;
   padding-top: 2px;
   padding-bottom: 2px;
}
table>tr>td {
   padding: 8px;
}
table>tr>td:first {
   padding-left:15px!important;
}

</style>

<script>
module.exports = {
   data() {
      return {
         query: "",
         items: [],
         headers: [
            {
               text: "KODE",
               align: "Center",
               sortable: false,
               value: "code",
               width: "30%",
               class: " blue lighten-4"
            },
            {
               text: "JUMLAH BARIS",
               align: "Center",
               sortable: false,
               value: "rows",
               width: "30%",
               class: "blue lighten-4"
            },
            {
               text: "JUNLAH KOLOM",
               align: "Center",
               sortable: false,
               value: "cols",
               width: "30%",
               class: "blue lighten-4"
            },

            {
               text: "Action",
               align: "Center",
               sortable: false,
               value: "code",
               width: "15%",
               class: "blue lighten-4"
            }
         ],
          isLoading: false,
          color:"success",
          validrack:false,
          xid:0,
          code:"",
          name:"",
          rows:0,
          cols:0,
          msgalertrack:""
      };
   },
   computed: {
      racks() {
          return this.$store.state.rack.racks
      },
      xalmari(){
        return this.$store.state.almari.selected_almari
      },
       dialograck(){
        return this.$store.state.rack.dialog_form_rack
      },
      xerrors() {
          return this.$store.state.rack.errors
      },
      xsamples() {
          return this.$store.state.rack.samples
      },
      dialogdeletealertrack:{
          get() {
              return this.$store.state.rack.alert_delete
          },
          set(val) {
              this.$store.commit("rack/update_alert_delete",val)
          }
      }
  },
  methods : {
    updateDialogFormRack(){
       this.$store.commit("rack/update_dialog_form_rack",false)
    },
    openFormRack(val){
      this.xid = val
      this.code = ''
      this.name = ''
      this.suffix = ''
      this.$store.commit("rack/update_dialog_form_rack",true)
    },
    editFormRack(val){
      this.$store.commit("rack/update_errors",[])
      this.$store.commit("rack/update_samples",[])
      this.xid = val.id
      this.code = val.code
      this.rows = val.xrows
      this.cols = val.xcols
      this.$store.commit("rack/update_dialog_form_rack",true)
    },
    saveFormRack(){
      this.$store.dispatch("rack/save",{
            xid:this.xid,
            almariid:this.$store.state.almari.selected_almari.id,
            almariname:this.$store.state.almari.selected_almari.name,
            code:this.code,
            name:this.name,
            rows:this.rows,
            cols:this.cols
          })
    },
    updateAlert_success(val){
      this.$store.commit("almari/update_alert_success",val)
    },
    deleteRack(data){
      this.xid = data.id
      this.$store.commit("rack/update_errors",[])
      this.$store.commit("rack/update_samples",[])
      this.msgalertrack = "Yakin, mau hapus rack "+data.code+" ?"
      this.dialogdeletealertrack = true
    },
    closeDeleteAlertRack(){
      
      this.dialogdeletealertrack = false
    },
    doDeleteRack(){
      this.$store.dispatch("rack/delete",{
            xid:this.xid,
            almariid:this.$store.state.almari.selected_almari.id,
            almariname:this.$store.state.almari.selected_almari.name,
            name:this.name
          })
    }
  }
}
</script>
