<template>
 <v-layout >
  <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-flex xs12 >
 <v-card  class="mb-2" color="white" style="min-height:100px" >
   <v-toolbar  class="mb-1" color="blue lighten-3" dark height="50px">
     <v-toolbar-title>ITEM TEST : {{xitems.name.toUpperCase()}}</v-toolbar-title>
     <v-spacer></v-spacer>
     <v-btn
          color="primary"
          @click="saveItemTest()"
      >
      SIMPAN
      </v-btn>
   </v-toolbar>
  
  <v-layout row>
    <v-flex xs-4 pl-3 pr-3 pb-3 pt-2>
      <v-card>
          <v-card-title
              dark
              class="headline error pt-2 pb-2"
              primary-title
              style="color:white"
          >
              <h5 dark>PEMERIKSAAN TERPILIH</h5>
          </v-card-title>
          <v-card-text>
               <v-btn class="mt-1 mb-2" v-for="(vst,idx) in xitemtests" :key="vst.testid" small  color="error">{{vst.testname}} <v-icon  @click="deleteItemTest(vst)" right dark>clear</v-icon> </v-btn>
          </v-card-text>
      </v-card>
    </v-flex>
    <v-flex xs-8 pl-3 pr-3 pb-3 pt-2>
      <v-card>
          <v-card-title
              dark
              class="headline info pt-2 pb-2"
              primary-title
              style="color:white"
          >
              <h5 dark>LISTING PEMERIKSAAN</h5>
          </v-card-title>
          <v-card-text>
                <v-layout class="mb-2" row>
                    <v-text-field class="xs6 ma-1"
                                  label=""
                                  placeholder="Kode / nama pemeriksaan"
                                  single-line
                                  outline
                                  v-model="search"
                                  hide-details
                                  ></v-text-field>
                  <v-btn style="min-height:55px" class="xs4 ma-1" color="success"  @click="searchTests" >Cari</v-btn>
              </v-layout>
               <v-data-table 
                  :headers="headers" 
                  :items="xtests"
                  :loading="is_loading"
      :pagination.sync="pagination"
                   class="elevation-1">
                  <template slot="items" slot-scope="props">
                     <td class="text-xs-left pa-2">{{ props.item.testcode }}</td>
                     <td class="text-xs-left pa-2">{{ props.item.testname}}</td>
                     <td class="text-xs-right pa-2">
                        <div>
                              <v-btn @click="addToTests(props.item)" v-if="checkInTests(props.item) === false" small color="error"><v-icon left>close</v-icon>  Belum dipilih</v-btn>
                              <v-btn v-if="checkInTests(props.item) === true" flat small color="success"><v-icon left>check</v-icon> Sudah terpilih</v-btn>
                          </div>
                     </td>
                  </template>
                  <template>
                     <div class="text-xs-center">
                        <v-pagination
                           v-model="page"
                           :length="15"
                           :total-visible="7"
                        ></v-pagination>
                     </div>
                  </template>
               </v-data-table>
          </v-card-text>
      </v-card>
    </v-flex>
  </v-layout>
    
 </v-card>
 </v-flex>

 <template>
        <v-dialog
          v-model="dialogdeletealerttest"
          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>
                                          {{msgalerttest}}
                                        </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="dialogdeletealerttest = false"
                    >
                    Tutup
                    </v-btn>
                    <v-btn
                        color="primary"
                        flat
                        @click="closeDeleteAlertTest()"
                    >
                    Yakin lah
                    </v-btn>
                </v-card-actions>
            </v-card>
        </v-dialog>
      
    </template>
</v-layout>
</template>

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


</style>

<script>
module.exports = {
  
  mounted() {
     this.$store.dispatch("itemtest/lookuptests",{
            search:this.search
         })
  },
  computed: {
    openalertconfirmation: {
         get() {
            return this.$store.state.item.open_alert_confirmation
         },
         set(val) {
            this.$store.commit("item/update_open_alert_confirmation",val)
         }
      },
      dialogitemtest(){
        return this.$store.state.itemtest.dialog_form_item_test
      },
      xselected_test: {
         get() {
            return this.$store.state.itemtest.selected_test
         },
         set(val) {
            this.$store.commit("itemtest/update_selected_test",val)
         }
      },
      xitems(){
        return this.$store.state.item.selected_item
      },
      xtests(){
        return this.$store.state.itemtest.tests 
      },
      xtotal_test() {
          return this.$store.state.itemtest.total_test
      },
      xitemtests(){
        return this.$store.state.itemtest.item_tests 
      },
      is_loading() {
            return this.$store.state.itemtest.search_status == 1
      },
      snackbar: {
         get() {
            return this.$store.state.itemtest.alert_success
         },
         set(val) {
            this.$store.commit("itemtest/update_alert_success",val)
         }
      },
      msgsnackbar(){
        return this.$store.state.itemtest.msg_success
      },
  },
  methods : {
    searchTests(){
        this.$store.dispatch("itemtest/lookuptests",{
            search:this.search
         })
      },
      checkInTests(value){
        let arrtests = this.$store.state.itemtest.item_tests
        var idx = _.findIndex(arrtests, item => item.testid === value.testid)
        if(idx !== -1){
          return true
        }
        else{
          return false
        }
      },
      addToTests(value){
        if(this.$store.state.item.selected_item.id !== 0 ){
          let arrtests = this.$store.state.itemtest.item_tests
          arrtests.push({id:0,testid:value.testid,testname:value.testname})
          this.$store.commit("itemtest/update_item_tests",arrtests)
          this.$store.commit("itemtest/update_no_save",true)
          this.$store.dispatch("itemtest/lookuptests",{
              search:this.search
          })
        }
        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("item/update_open_alert_confirmation",false)
      },
      deleteItemTest(value){
         var arrtests = this.$store.state.itemtest.item_tests
         var idx = _.findIndex(arrtests, item => item.testid === value.testid)
         if(idx !== -1){
           arrtests.splice(idx, 1)
           this.$store.commit("itemtest/update_item_tests",arrtests)
         }
         if(value.id !== 0){
           var deltests = this.$store.state.itemtest.deleted_item_tests
            deltests.push(value)
           this.$store.commit("itemtest/update_deleted_item_tests",deltests)
         }
         
      },
      saveItemTest(){
        this.$store.dispatch("itemtest/save",{
              itemid: this.$store.state.item.selected_item.id,
              itemtests:this.$store.state.itemtest.item_tests,
              deleteditemtest :this.$store.state.itemtest.deleted_item_tests
          })
      },
      updateAlert_success(val){
        this.$store.commit("itemtest/update_alert_success",val)
      },
  },
  data: () => ({
    color:"success",
    validtest:false,
    search:"",
    dialogdeletealerttest:false,
    msgalertconfirmation:"Belum memilih salah satu item !",
    xid:0,
    page:1,
    msgalerttest:"",
    chip2:false,
     headers: [
            {
               text: "KODE PEMERIKSAAN",
               align: "left",
               sortable: false,
               value: "mr",
               width: "25%",
               class: "pa-2 blue lighten-3 white--text"
            },
            {
               text: "NAMA PEMERIKSAAN",
               align: "left",
               sortable: false,
               value: "lab",
               width: "35%",
               class: "pa-2 blue lighten-3 white--text"
            },
            {
               text: "STATUS",
               align: "center",
               sortable: false,
               value: "status",
               width: "15%",
               class: "pa-2 blue lighten-3 white--text"
            }
         ],pagination:{
            descending: false,
            page: 1,
            rowsPerPage: 5,
            sortBy: 'testcode',
            totalItems: this.xtotal_test
         }
  }),
}
</script>
