<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>ITEM</v-toolbar-title>
           <v-spacer></v-spacer>
           <v-btn @click="openFormNew()" 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-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,idx) in vitems" :key="vs.id">

                <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-on="on">{{subname(vs.namex)}} <span class="float-right">@Rp {{convertMoney(vs.price)}}</span></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="editItem(vs)">edit</v-icon>
                        <v-icon style="color:#ffffff" @click="deleteItem(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-on="on">{{subname(vs.namex)}} <span class="float-right">@Rp {{convertMoney(vs.price)}}</span></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="editItem(vs)">edit</v-icon>
                        <v-icon style="color:red" @click="deleteItem(vs)">clear</v-icon>
                      </v-layout>
                    </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">{{xtotalfilteritems}}</span> dari <span class="red--text">{{xtotalitems}}</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="dialogitem" persistent max-width="600px">
                <v-card>
                  <v-card-title>
                    <span class="headline">Form Item</span>
                  </v-card-title>
                  <v-card-text class="pt-0 pb-0">
                  <v-form
                      ref="formitem"
                      v-model="valid"
                      lazy-validation
                    >
                    <v-layout wrap>
                        <v-flex xs12 pl-2>
                          <v-text-field v-model="itemcode" label="Kode Item"></v-text-field>
                          <p  v-if="checkError('errorcode')" class="error pl-2 pr-2" style="color:#fff">Kode sudah ada yang punya dong</p>
                          <p  v-if="checkError('requirecode')" class="error pl-2 pr-2" style="color:#fff">Kode harus diisi dong</p>
                        </v-flex>
                        <v-flex xs12 pl-2>
                          <v-text-field v-model="itemname" label="Nama Item"></v-text-field>
                          <p  v-if="checkError('errorname')" class="error pl-2 pr-2" style="color:#fff">Nama sudah ada yang punya dong</p>
                          <p  v-if="checkError('requirename')" class="error pl-2 pr-2" style="color:#fff">Nama harus diisi dong</p>
                        </v-flex>
                        <v-flex xs12>
                          <v-text-field v-model="itemprice" label="Harga Item"></v-text-field>
                          <p  v-if="checkError('requireprice')" class="error pl-2 pr-2" style="color:#fff">Harganya harus diisi dong</p>
                        </v-flex>
                        <v-flex xs12 pt-2>
                          <div>
                              <v-btn @click="changeBtnMandatory(itemmandatory)" v-if="itemmandatory === 'N'" small color="error"><v-icon left>close</v-icon>  Tidak boleh dihapus</v-btn>
                              <v-btn @click="changeBtnMandatory(itemmandatory)" v-if="itemmandatory === 'Y'" small color="success"><v-icon left>check</v-icon> Tidak boleh dihapus</v-btn>
                          </div>
                        </v-flex>
                    </v-layout>
                  </v-card-text>
                  <v-card-actions>
                    <v-spacer></v-spacer>
                    <v-btn color="blue darken-1" flat @click="updateDialogFormItem()">Tutup</v-btn>
                    <v-btn v-if="xact === 'new'" color="blue darken-1" flat @click="saveForm()">Simpan</v-btn>
                    <v-btn v-if="xact === 'edit'" color="blue darken-1" flat @click="updateForm()">Simpan Perubahan</v-btn>
                  </v-card-actions>
                  </v-form>
                </v-card>
              </v-dialog>
            </v-layout>
          </template>

       </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,
    dialogdeletealert:false,
    msgalert:"",
    xid:0,
    xsearch:"",
    itemcode:'',
    itemname:'',
    itemmandatory:'N',
    itemprice:0,
    msgalertconfirmation:"Perubahan yang telah dilakukan belum disimpan dong !"
  }),
  mounted() {
    this.$store.dispatch("item/lookup",{search:this.xsearch,all:this.xshowall})
  },
  computed: {
    openalertconfirmation: {
         get() {
            return this.$store.state.item.open_alert_confirmation
         },
         set(val) {
            this.$store.commit("item/update_open_alert_confirmation",val)
         }
      },
      xact() {
          return this.$store.state.item.act
      },
      xshowall() {
          return this.$store.state.item.show_all
      },  
      vitems() {
          return this.$store.state.item.items
      },
      xtotalitems(){
        return this.$store.state.item.total_items
      },
      xtotalfilteritems(){
        return this.$store.state.item.total_filter_items
      },
      dialogitem(){
        return this.$store.state.item.dialog_form_item
      },
      snackbar: {
         get() {
            return this.$store.state.item.alert_success
         },
         set(val) {
            this.$store.commit("item/update_alert_success",val)
         }
      },
      msgsnackbar(){
        return this.$store.state.item.msg_success
      },
      lookupstatus(){
        return this.$store.state.item.lookup_item
      }
      
  },
  methods : {
    convertMoney(money){
            return one_money(money)
      },
    checkError(value){
        var errors = this.$store.state.item.errors
        if(errors.includes(value)){
            return true
        }
        else{
            return false
        }
    },
    changeBtnMandatory(value){
        var newval = (value === 'Y')?'N':'Y'
        this.itemmandatory = newval
    },
    updateShowAll(val){
      this.$store.commit("item/update_show_all",val)
       this.$store.dispatch("item/lookup",{search:this.xsearch,all:this.xshowall})
    },
    isSelected(p) {
        return p.id ==  this.$store.state.item.selected_item.id
    },
    subname(name){
      var xname = name
      if(xname.length > 25){
        xname = xname.substring(0, 25)+'...'
      }
      return xname
    },
    selectMe(sc) {
      if(this.$store.state.itemtest.no_save == false ){
        this.$store.commit("item/update_selected_item",sc)
        this.$store.commit("itemtest/update_deleted_item_tests",[])
        this.$store.dispatch("itemtest/lookup",{
            id:this.$store.state.item.selected_item.id
          })
      }
      else{
        this.$store.commit("item/update_open_alert_confirmation",true)
      }
      
    },
    closeAlertConfirmation(){
          this.$store.commit("item/update_open_alert_confirmation",false)
      },
      forgetAlertConfirmation(){
          this.$store.commit("itemtest/update_no_save",false)
          this.$store.commit("itemtest/update_deleted_item_tests",[])
          this.$store.commit("item/update_open_alert_confirmation",false)
      },
    updateDialogFormItem(){
       this.$store.commit("item/update_dialog_form_item",false)
    },
    openFormNew(){
      this.$store.commit("item/update_act",'new')
      this.$store.commit("item/update_dialog_form_item",true)
      this.xid = 0
      this.itemcode = ''
      this.itemname = ''
      this.itemmandatory = 'N'
      this.itemprice = 0
    },
    saveForm(){
      this.$store.commit("item/update_errors",[])
      var errors = this.$store.state.item.errors
      if(this.itemcode === ''){
        errors.push("requirecode")
      }
      if(this.itemname === ''){
        errors.push("requirename")
      }
      if(this.itemprice === ''){
        errors.push("requireprice")
      }

      if(errors.length === 0){
        this.$store.dispatch("item/save",{
            act : this.$store.state.item.act,
            id:0,
            code:this.itemcode,
            name:this.itemname,
            flagmandatory:this.itemmandatory,
            price:this.itemprice
        })
      }
    },
    updateForm(){
      this.$store.commit("item/update_errors",[])
      var errors = this.$store.state.item.errors
      if(this.itemcode === ''){
        errors.push("requirecode")
      }
      if(this.itemname === ''){
        errors.push("requirename")
      }

      if(errors.length === 0){
        this.$store.dispatch("item/save",{
            act : this.$store.state.item.act,
            id:this.xid,
            code:this.itemcode,
            name:this.itemname,
            flagmandatory:this.itemmandatory,
            price:this.itemprice
        })
      }
      
    },
    updateAlert_success(val){
      this.$store.commit("item/update_alert_success",val)
    },
    editItem(data){
      this.xid = data.id
      this.itemcode = data.code
      this.itemname = data.name
      this.itemmandatory = data.flagmandatory
      this.itemprice = data.price
      this.$store.commit("item/update_act",'edit')
      this.$store.commit("item/update_dialog_form_item",true)
    },
    deleteItem(data){
      console.log(data)
      this.xid = data.id
      var xdata = {id:data.id,code:data.code,name:data.name,itemtests:'xxx'}
      this.$store.commit("item/update_selected_item",xdata)
      this.msgalert =  "Yakin, mau hapus item "+data.name+"  ?"
      this.dialogdeletealert = true
    },
    closeDeleteAlert(){
      this.$store.dispatch("item/delete",{
            itemid:this.$store.state.item.selected_item.id,
            itemcode:this.$store.state.item.selected_item.code,
            itemname:this.$store.state.item.selected_item.name
          })
      this.dialogdeletealert = false
    },
    thr_search: _.debounce( function () {
        this.$store.dispatch("item/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>
