<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-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>USERGROUP</v-toolbar-title>
           <v-spacer></v-spacer>
           
         </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-center>
          <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 style="overflow: auto;max-height:550px">
          <div v-for="(vs,index) in vusergroups">
                <v-layout pa-2 v-if="isSelected(vs)" row>
                <v-flex xs12 @click="selectMe(vs)"  >
                  <v-layout row>
                    <v-flex class="boxsolid"  xs12>
                      <v-tooltip right>
                        <template v-slot:activator="{ on }">
                          <span v-on="on">{{subname(vs.name)}}</span>
                        </template>
                        <span>{{vs.name}}</span>
                      </v-tooltip>
                    </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"  xs12>
                      <v-tooltip right>
                        <template v-slot:activator="{ on }">
                          <span v-on="on">{{subname(vs.name)}}</span>
                        </template>
                        <span>{{vs.name}}</span>
                      </v-tooltip>
                    </v-flex>
                  </v-layout>
                </v-flex>
                </v-layout>
          <v-divider></v-divider>
          </div>
          </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">{{xtotalfilterusergroups}}</span> dari <span class="red--text">{{xtotalusergroups}}</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>
       </v-card>
     </v-flex>
      <one-dialog-alert :status="openalertconfirmation" :msg="msgalertconfirmation" @forget-dialog-alert="forgetAlertConfirmation()" @close-dialog-alert="closeAlertConfirmation()"></one-dialog-alert>
</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 = {
  components : {
      'one-dialog-alert':httpVueLoader('../../common/oneDialogAlert.vue')
   },
  data: () => ({
      color:"success",
      valid:false,
      schedulename:'',
      nameRules: [
        v => !!v || 'Nama Schedule harus diisi'
      ],
      dialogdeletealert:false,
      msgalert:"",
      xid:0,
      xsearch:"",
      msgalertconfirmation:"Perubahan yang telah dilakukan belum disimpan dong !"
    }),
  mounted() {
      this.$store.dispatch("usergroup/lookup",{search:this.xsearch,all:this.xshowall})
  },
  computed: {
      xact() {
          return this.$store.state.usergroup.act
      },
      xshowall() {
          return this.$store.state.usergroup.show_all
      },  
      vusergroups() {
          return this.$store.state.usergroup.usergroups
      },
      xtotalusergroups(){
        return this.$store.state.usergroup.total_usergroups
      },
      xtotalfilterusergroups(){
        return this.$store.state.usergroup.total_filter_usergroups
      },
      snackbar: {
         get() {
            return this.$store.state.usergroup.alert_success
         },
         set(val) {
            this.$store.commit("usergroup/update_alert_success",val)
         }
      },
      msgsnackbar(){
        return this.$store.state.usergroup.msg_success
      },
      openalertconfirmation: {
         get() {
            return this.$store.state.usergroup.open_alert_confirmation
         },
         set(val) {
            this.$store.commit("usergroup/update_open_alert_confirmation",val)
         }
      }
  },
  methods : {
    updateShowAll(val){
      this.$store.commit("usergroup/update_show_all",val)
       this.$store.dispatch("usergroup/lookup",{search:this.xsearch,all:this.xshowall})
    },
    isSelected(p) {
        return p.id ==  this.$store.state.usergroup.selected_usergroup.id
    },
    subname(name){
      var xname = name
      if(xname.length > 15){
        xname = xname.substring(0, 12)+'...'
      }
      return xname
    },
    selectMe(sc) {
      var xnosave = this.$store.state.usergroup.no_save
      if(!xnosave){
        this.$store.commit("usergroup/update_selected_usergroup",sc)
        this.$store.dispatch("priviledge/lookup",{
            id:this.$store.state.usergroup.selected_usergroup.id
          })
      }
      else{
        this.$store.commit("usergroup/update_open_alert_confirmation",true)
      }
      
       
    },
    closeAlertConfirmation(){
        this.$store.commit("usergroup/update_open_alert_confirmation",false)
    },
    forgetAlertConfirmation(){
        this.$store.commit("usergroup/update_no_save",0)
        this.$store.commit("usergroup/update_open_alert_confirmation",false)
    },
    updateAlert_success(val){
      this.$store.commit("usergroup/update_alert_success",val)
    },
    thr_search: _.debounce( function () {
        this.$store.dispatch("usergroup/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>
