<template>
 <v-layout>
 <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-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="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-flex xs12 >
       <v-card class="scroll-container" style="/*max-height:645px;overflow: auto;*/">
         <v-toolbar  color="blue lighten-3" dark height="50px">
           <v-toolbar-title>LEMARI</v-toolbar-title>
           <v-spacer></v-spacer>
           <v-btn @click="openFormAlmari()" icon>
             <v-icon>library_add</v-icon>
           </v-btn>
         </v-toolbar>
         <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-layout row  style="background:#bbdefb;padding-top:5px;" justify-left>
          <v-list-tile >
            <input type="text" v-model="xsearch" class="textinput" placeholder="Cari ..."/>
            </v-list-tile-content>
          </v-list-tile>
          </v-layout>
          <v-divider></v-divider>
          <div  v-for="(vs,index) in valmaries" >

                <v-layout pa-2 v-if="isSelected(vs)" row>
                <v-flex xs12 @click="selectMe(vs)"  >
                  <v-layout row>
                    <v-flex class="boxsolid"  xs10>
                      <v-tooltip right>
                        <template v-slot:activator="{ on }">
                          <span v-html="subname(vs.description)" v-on="on"></span>
                        </template>
                        <span>{{vs.name}}</span>
                      </v-tooltip>
                    </v-flex>
                    <v-flex class="boxsolid text-center" style="padding-top:10px" pl-2 pb-2 pr-2 xs2>
                      <v-layout row align-center justify-space-between>
                        <v-icon style="color:#ffffff" @click="editAlmari(vs)">edit</v-icon>
                        <v-icon style="color:#ffffff" @click="deleteAlmari(vs)">clear</v-icon>
                      </v-layout>
                    </v-flex>
                  </v-layout>
                </v-flex>
                </v-layout>

                
    
                <v-layout pa-2 v-if="!isSelected(vs)" row>
                <v-flex xs12 @click="selectMe(vs)"  >
                  <v-layout row>
                    <v-flex class="boxoutline"  xs10>
                      <v-tooltip right>
                        <template v-slot:activator="{ on }">
                          <span v-html="subname(vs.description)" v-on="on"></span>
                        </template>
                        <span>{{vs.name}}</span>
                      </v-tooltip>
                    </v-flex>
                    <v-flex class="boxoutline text-center" style="padding-top:10px" pl-2 pb-2 pr-2 xs2>
                      <v-layout row align-center justify-space-between>
                        <v-icon style="color:red" @click="editAlmari(vs)">edit</v-icon>
                        <v-icon style="color:red" @click="deleteAlmari(vs)">clear</v-icon>
                      </v-layout>
                    </v-flex>
                  </v-layout>
                </v-flex>
                </v-layout>
          <v-divider></v-divider>
          </div>
          <v-layout row>
            <v-flex class="text-xs-center" pt-3 xs12>
              <p style="margin-bottom:2px;color: rgba(0,0,0,0.54);font-size:12px;" >Menampilkan <span class="red--text">{{xtotalfilteralmaries}}</span> dari <span class="red--text">{{xtotalalmaries}}</span> total data</p>
              <v-btn small v-if="xshowall === 'N'" flat @click="updateShowAll('Y')" color="primary" dark>Tampilkan Semua</v-btn>
              <v-btn small v-if="xshowall === 'Y'" flat @click="updateShowAll('N')" color="primary" dark>Batasi data</v-btn>
            </v-flex>
          </v-layout>
      

          <template>
            <v-layout row justify-center>
              <v-dialog v-model="dialogalmari" persistent max-width="600px">
                <v-card>
                  <v-card-title>
                    <span class="headline">Form Almari</span>
                  </v-card-title>
                  <v-card-text class="pt-0 pb-0">
                  <v-form
                      ref="formalmari"
                      v-model="valid"
                      lazy-validation
                    >
                    <v-layout wrap>
                        <v-flex xs12>
                          <v-text-field v-model="almaricode" label="Kode"></v-text-field>
                        </v-flex>
                        <v-flex xs12>
                          <v-text-field v-model="almariname" label="Nama"></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>
                        </v-flex>
                    </v-layout>
                  </v-card-text>
                  <v-card-actions>
                    <v-spacer></v-spacer>
                    <v-btn color="blue darken-1" flat @click="updateDialogFormAlmari()">Tutup</v-btn>
                    <v-btn v-if="xact === 'new'" color="blue darken-1" flat @click="saveFormAlmari()">Simpan</v-btn>
                    <v-btn v-if="xact === 'edit'" color="blue darken-1" flat @click="updateFormAlmari()">Simpan Perubahan</v-btn>
                  </v-card-actions>
                  </v-form>
                </v-card>
              </v-dialog>
            </v-layout>
          </template>

       </v-card>
     </v-flex>
</v-layout>
</template>

<style scoped>
.textinput {
  -webkit-transition: width 0.4s ease-in-out;
  transition: width 0.4s ease-in-out;
  background-color: white;
  background-position: 10px 10px; 
  background-repeat: no-repeat;
  padding-left: 40px;
  width: 100%;
  padding: 8px 10px;
  margin-bottom: 5px;
  box-sizing: border-box;
  border: 1px solid #607d8b;

}

.textinput:focus {
  width: 100%;
}
.textinput:focus::-webkit-input-placeholder  {color:transparent;}
.textinput:focus::-moz-placeholder   {color:transparent;}
.textinput:-moz-placeholder   {color:transparent;}
.boxoutline{
  color:red;border:1px solid red;justify-content:center;height: 45px;
  line-height: 45px;padding-left:10px;background:#ffffff;    font-size: 14px;
    font-weight: 500;border-radius:1px
}
.boxoutline:hover{
  background:rgba(0, 0, 0, 0.07)!important;
  font-size: 15px;
  font-weight: 700;
}

.boxsolid{
  color:#ffffff;border:1px solid #ffffff;justify-content:center;height: 45px;
  line-height: 45px;padding-left:10px;background: #f44336;    font-size: 14px;
    font-weight: 500;border-radius:1px
}
.boxsolid:hover{
  background:#f44336de;
  font-size: 15px;
  font-weight: 700;
}
.scroll-container {
  scroll-padding: 50px 0 0 50px;
}
::-webkit-scrollbar {
      width: 7px;
} /* this targets the default scrollbar (compulsory) */
::-webkit-scrollbar-track {
      background-color: #73baf3;
} /* the new scrollbar will have a flat appearance with the set background color */
 
::-webkit-scrollbar-thumb {
      background-color: #2196f3; 
} /* this will style the thumb, ignoring the track */
 
::-webkit-scrollbar-button {
      background-color: #0079da;
} /* optionally, you can style the top and the bottom buttons (left and right for horizontal bars) */
 
::-webkit-scrollbar-corner {
      background-color: black;
} /* if both the vertical and the horizontal bars appear, then perhaps the right bottom corner also needs to be styled */

</style>

<script>
module.exports = {
  data: () => ({
      color:"success",
      valid:false,
      almaricode:'',
      almariname:'',
      kodeRules: [
        v => !!v || 'Kode Almari harus diisi'
      ],
      nameRules: [
        v => !!v || 'Nama Almari harus diisi'
      ],
      msgalert:"",
      xid:0,
      xsearch:""
    }),
  mounted() {
      this.$store.dispatch("almari/lookup",{search:this.xsearch,all:this.xshowall})
  },
  computed: {
      xact() {
          return this.$store.state.almari.act
      },
      xerrors() {
          return this.$store.state.almari.errors
      },
      xsamples() {
          return this.$store.state.almari.samples
      },
      xshowall() {
          return this.$store.state.almari.show_all
      },  
      valmaries() {
          return this.$store.state.almari.almaries
      },
      xtotalalmaries(){
        return this.$store.state.almari.total_almaries
      },
      xtotalfilteralmaries(){
        return this.$store.state.almari.total_filter_almaries
      },
      dialogalmari(){
        return this.$store.state.almari.dialog_form_almari
      },
      snackbar: {
         get() {
            return this.$store.state.almari.alert_success
         },
         set(val) {
            this.$store.commit("almari/update_alert_success",val)
         }
      },
      msgsnackbar(){
        return this.$store.state.almari.msg_success
      },
      lookupstatus(){
        return this.$store.state.almari.lookup_almari
      },
      dialogdeletealert: {
         get() {
            return this.$store.state.almari.alert_delete
         },
         set(val) {
            this.$store.commit("almari/update_alert_delete",val)
         }
      }
  },
  methods : {
    updateShowAll(val){
      this.$store.commit("almari/update_show_all",val)
       this.$store.dispatch("almari/lookup",{search:this.xsearch,all:this.xshowall})
    },
    isSelected(p) {
        return p.id ==  this.$store.state.almari.selected_almari.id
    },
    subname(name){
      var xname = name
      if(xname.length > 30){
        xname = xname.substring(0, 30)+'...'
      }
      return xname
    },
    selectMe(sc) {
        this.$store.commit("almari/update_selected_almari",sc)
        this.$store.dispatch("rack/lookup",{
          id:this.$store.state.almari.selected_almari.id
        })
    },
    updateDialogFormAlmari(){
       this.$store.commit("almari/update_dialog_form_almari",false)
    },
    openFormAlmari(){
      this.$store.commit("almari/update_act",'new')
      this.$store.commit("almari/update_dialog_form_almari",true)
    },
    saveFormAlmari(){
      this.$store.dispatch("almari/save",{
            code:this.almaricode,
            name:this.almariname
         })
    },
    updateFormAlmari(){

      this.$store.dispatch("almari/update",{
        id:this.xid,
        code:this.almaricode,
        name:this.almariname
      })
         
    
    },
    updateAlert_success(val){
      this.$store.commit("almari/update_alert_success",val)
    },
    editAlmari(data){
      this.xid = data.id
      this.almaricode = data.code
      this.almariname = data.name
      this.$store.commit("almari/update_act",'edit')
      this.$store.commit("almari/update_error_code",false)
      this.$store.commit("almari/update_error_name",false)
      this.$store.commit("almari/update_dialog_form_almari",true)
    },
    deleteAlmari(data){
      this.xid = data.id
      var xdata = {id:data.id,name:data.name,rakcs:'xxx'}
      this.$store.commit("almari/update_selected_almari",xdata)
      this.$store.commit("almari/update_errors",[])
      this.$store.commit("almari/update_samples",[])
      this.msgalert =  "Yakin, mau hapus almari "+data.name+"  ?"
      this.dialogdeletealert = true
      
    },
    closeDeleteAlert(){
      this.$store.dispatch("almari/delete",{
            almariid:this.$store.state.almari.selected_almari.id,
            almariname:this.$store.state.almari.selected_almari.name
          })
      //this.dialogdeletealert = false
    },
    thr_search: _.debounce( function () {
        this.$store.dispatch("almari/lookup",{search:this.xsearch,all:this.xshowall})
    },1000)
  },
  watch: {
      xsearch(val,old) {
        if ( val !== old && this.lookupstatus !== 1){
          console.log(val)
          this.xsearch = val
          this.thr_search()
        }
      }
   }
}
</script>
