<template>
  <v-layout>
    <template>

      <v-dialog v-model="dialogdeletealert" max-width="30%">
        <v-card>
          <v-card-title class="headline blue lighten-3 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 flat @click="dialogdeletealert = false">
              Tutup
            </v-btn>
            <v-btn 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 class="black--text">PEMERIKSAAN</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:#EEEEEE;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 vtests">

          <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="vs.description" v-on="on"></span>
                    </template>
                    <span>{{vs.name}}</span>
                  </v-tooltip>
                </v-flex>
                <v-flex class="boxsolid" xs10>
                  <v-tooltip right>
                    <template v-slot:activator="{ on }">
                      <span v-html="vs.samplename" v-on="on"></span>
                    </template>
                    <span>{{vs.samplename}}</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" xs10>
                  <v-tooltip right>
                    <template v-slot:activator="{ on }">
                      <span v-html="vs.description" v-on="on"></span>
                    </template>
                    <span>{{vs.name}}</span>
                  </v-tooltip>
                </v-flex>
                <v-flex class="boxoutline" xs10>
                  <v-tooltip right>
                    <template v-slot:activator="{ on }">
                      <span v-html="vs.samplename" v-on="on"></span>
                    </template>
                    <span>{{vs.samplename}}</span>
                  </v-tooltip>
                </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">{{xtotalfiltertests}}</span> dari <span class="red--text">{{xtotaltests}}</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>
  </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,
      testname: '',
      testtypenew: '',
      testaddress: '',
      testphone: '',
      testemail: '',
      testpic: '',
      testmindp: '',
      search_city: '',
      search_doctor: '',
      nameRules: [
        v => !!v || 'Nama Tes harus diisi'
      ],
      addressRules: [
        v => !!v || 'Alamat Tes harus diisi'
      ],
      dialogdeletealert: false,
      msgalert: "",
      xid: 0,
      xsearch: "",
      islabfrom: "",
      islabto: "",
      isnewtesttype: false,
      readonlytypetest: false,
      readonlytypetestnew: false
    }),
    mounted() {
      this.$store.dispatch("test/lookup", {
        search: this.xsearch,
        all: this.xshowall
      })
      this.$store.dispatch("test/selecttesttype")
    },
    computed: {
      xact() {
        return this.$store.state.test.act
      },
      xerrors() {
        return this.$store.state.test.errors
      },
      xshowall() {
        return this.$store.state.test.show_all
      },
      vtests() {
        return this.$store.state.test.tests
      },
      xtotaltests() {
        return this.$store.state.test.total_tests
      },
      xtotalfiltertests() {
        return this.$store.state.test.total_filter_tests
      },
      dialogtest() {
        return this.$store.state.test.dialog_form_test
      },
      snackbar: {
        get() {
          return this.$store.state.test.alert_success
        },
        set(val) {
          this.$store.commit("test/update_alert_success", val)
        }
      },
      msgsnackbar() {
        return this.$store.state.test.msg_success
      },
      lookupstatus() {
        return this.$store.state.test.lookup_test
      },
      xtesttypes() {
        return this.$store.state.test.testtypes
      },
      xtesttype: {
        get() {
          return this.$store.state.test.testtype
        },
        set(val) {
          this.$store.commit("test/update_testtype", val)
        }

      },
      isLoading() {
        return this.$store.state.test.search_status == 1
      },
      xcities() {
        return this.$store.state.test.cities
      },
      cityaddress: {
        get() {
          return this.$store.state.test.city_address
        },
        set(val) {
          this.$store.commit("test/update_city_address", val)
          this.$store.dispatch("test/getdistrict", this.$store.state.test.city_address)
        }
      },
      xdoctors() {
        return this.$store.state.test.doctors
      },
      doctor: {
        get() {
          return this.$store.state.test.doctor
        },
        set(val) {
          this.$store.commit("test/update_doctor", val)
        }
      },
      xdistricts() {
        return this.$store.state.test.districts
      },
      districtaddress: {
        get() {
          return this.$store.state.test.district_address
        },
        set(val) {
          this.$store.commit("test/update_district_address", val)
          this.$store.dispatch("test/getkelurahan", this.$store.state.test.district_address)
        }
      },
      xkelurahans() {
        return this.$store.state.test.kelurahans
      },
      kelurahanaddress: {
        get() {
          return this.$store.state.test.kelurahan_address
        },
        set(val) {
          this.$store.commit("test/update_kelurahan_address", val)
        }
      }
    },
    methods: {
      updateShowAll(val) {
        this.$store.commit("test/update_show_all", val)
        this.$store.dispatch("test/lookup", {
          search: this.xsearch,
          all: this.xshowall
        })
      },
      isSelected(p) {
        return p.id == this.$store.state.test.selected_test.id
      },
      subname(name) {
        var xname = name
        if (xname.length > 18) {
          xname = xname.substring(0, 18) + '...'
        }
        return xname
      },
      selectMe(sc) {
        this.$store.commit("test/update_selected_test", sc)
        this.$store.dispatch("specimenlocal/lookup", {
          id: this.$store.state.test.selected_test.id
        })
      },
      updateDialogFormTes() {
        this.$store.commit("test/update_dialog_form_test", false)
      },
      openFormTes() {
        this.search_city = ''
        this.$store.commit("test/update_cities", [])
        this.cityaddress = {}
        this.search_doctor = ''
        this.$store.commit("test/update_doctors", [])
        this.doctor = {}
        this.$store.commit("test/update_districts", [])
        this.districtaddress = {}
        this.$store.commit("test/update_kelurahans", [])
        this.kelurahanaddress = {}
        this.testtypenew = ""
        this.$refs.formtest.reset()
        this.$refs.formtest.resetValidation()
        this.$store.commit("test/update_act", 'new')
        this.$store.commit("test/update_dialog_form_test", true)


      },
      thr_search_city: _.debounce(function () {
        this.$store.dispatch("test/searchcity", this.search_city)
      }, 2000),
      thr_search_doctor: _.debounce(function () {
        this.$store.dispatch("test/searchdoctor", this.search_doctor)
      }, 2000),
      saveFormTes() {
        if (this.$refs.formtest.validate()) {
          var newtesttype = this.testtypenew
          if ((_.isEmpty(this.testtypenew))) {
            this.$store.dispatch("test/save", {
              name: this.testname,
              address: this.testaddress,
              city: this.cityaddress.Nat_CityID,
              doctor: this.doctor.Nat_DoctorID,
              district: this.districtaddress.Nat_DistrictID,
              kelurahan: this.kelurahanaddress.Nat_KelurahanID,
              phone: this.testphone,
              email: this.testemail,
              pic: this.testpic,
              testtypenew: this.testtypenew,
              testtype: this.xtesttype.Nat_TestTypeID,
              islabfrom: this.islabfrom === true ? "Y" : "N",
              islabto: this.islabto === true ? "Y" : "N",
              testmindp: this.testmindp
            })
          } else {
            this.$store.dispatch("test/save", {
              name: this.testname,
              address: this.testaddress,
              city: this.cityaddress.Nat_CityID,
              doctor: this.doctor.Nat_DoctorID,
              district: this.districtaddress.Nat_DistrictID,
              kelurahan: this.kelurahanaddress.Nat_KelurahanID,
              phone: this.testphone,
              email: this.testemail,
              pic: this.testpic,
              testtypenew: this.testtypenew,
              testtype: 0,
              islabfrom: this.islabfrom === true ? "Y" : "N",
              islabto: this.islabto === true ? "Y" : "N",
              testmindp: this.testmindp
            })
          }

        }
      },
      updateFormTes() {
        if (this.$refs.formtest.validate()) {
          var newtesttype = this.testtypenew
          if (newtesttype == "") {
            this.$store.dispatch("test/update", {
              id: this.xid,
              name: this.testname,
              city: this.cityaddress.Nat_CityID,
              doctor: this.doctor.Nat_DoctorID,
              district: this.districtaddress.Nat_DistrictID,
              kelurahan: this.kelurahanaddress.Nat_KelurahanID,
              address: this.testaddress,
              phone: this.testphone,
              email: this.testemail,
              pic: this.testpic,
              testtypenew: this.testtypenew,
              testtype: this.xtesttype.Nat_TestTypeID,
              islabfrom: this.islabfrom === true ? "Y" : "N",
              islabto: this.islabto === true ? "Y" : "N",
              testmindp: this.testmindp
            })
          } else {
            this.$store.dispatch("test/update", {
              id: this.xid,
              name: this.testname,
              city: this.cityaddress.Nat_CityID,
              doctor: this.doctor.Nat_DoctorID,
              district: this.districtaddress.Nat_DistrictID,
              kelurahan: this.kelurahanaddress.Nat_KelurahanID,
              address: this.testaddress,
              phone: this.testphone,
              email: this.testemail,
              pic: this.testpic,
              testtypenew: this.testtypenew,
              testtype: 0,
              islabfrom: this.islabfrom === true ? "Y" : "N",
              islabto: this.islabto === true ? "Y" : "N",
              testmindp: this.testmindp
            })
          }


        }
      },
      updateAlert_success(val) {
        this.$store.commit("test/update_alert_success", val)
      },
      editTes(data) {
        this.xid = data.id
        this.testname = data.name
        this.$store.commit("test/update_cities", [{
          Nat_CityID: data.Nat_CityID,
          Nat_CityName: data.Nat_CityName
        }])
        this.cityaddress = {
          Nat_CityID: data.Nat_CityID,
          Nat_CityName: data.Nat_CityName
        }
        this.$store.commit("test/update_doctors", [{
          Nat_DoctorID: data.Nat_DoctorID,
          Nat_DoctorNames: data.Nat_DoctorNames
        }])
        this.doctor = {
          Nat_DoctorID: data.Nat_DoctorID,
          Nat_DoctorNames: data.Nat_DoctorNames
        }
        this.$store.commit("test/update_districts", [{
          Nat_DistrictID: data.Nat_DistrictID,
          Nat_DistrictName: data.Nat_DistrictName
        }])
        this.districtaddress = {
          Nat_DistrictID: data.Nat_DistrictID,
          Nat_DistrictName: data.Nat_DistrictName
        }
        this.$store.commit("test/update_kelurahans", [{
          Nat_KelurahanID: data.Nat_KelurahanID,
          Nat_KelurahanName: data.Nat_KelurahanName
        }])
        this.kelurahanaddress = {
          Nat_KelurahanID: data.Nat_KelurahanID,
          Nat_KelurahanName: data.Nat_KelurahanName
        }
        this.testaddress = data.address
        this.testphone = data.phone
        this.testemail = data.email
        this.testpic = data.pic
        this.testtypenew = ""
        this.islabfrom = data.islabfrom === 'N' ? false : true
        this.islabto = data.islabto === 'N' ? false : true
        this.testmindp = data.testmindp
        this.$store.commit("test/update_act", 'edit')
        this.$store.commit("test/update_dialog_form_test", true)
        var testtypes = this.$store.state.test.testtypes
        var idx_testtype = _.findIndex(testtypes, function (o) {
          return o.Nat_TestTypeID == data.testtypeid
        })
        var testtype = testtypes[idx_testtype]
        this.$store.commit("test/update_testtype", testtype)
      },
      deleteTes(data) {
        this.xid = data.id
        var xdata = {
          id: data.id,
          name: data.name,
          specimenlocals: 'xxx'
        }
        this.$store.commit("test/update_selected_test", xdata)
        this.msgalert = "Yakin, mau hapus test " + data.name + "  ?"
        this.dialogdeletealert = true
      },
      changeNewTestType(value) {
        this.readonlytypetest = value === true ? true : false
        this.readonlytypetestnew = value === true ? false : true
      },
      newTestType() {
        readonlytypetest: true
        readonlytypetestnew: false
      },
      closeDeleteAlert() {
        this.$store.dispatch("test/delete", {
          testid: this.$store.state.test.selected_test.id,
          testname: this.$store.state.test.selected_test.name
        })
        this.dialogdeletealert = false
      },
      thr_search: _.debounce(function () {
        this.$store.dispatch("test/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()
        }
      },
      search_city(val, old) {
        if (val == old) return
        if (!val) return
        if (val.length < 1) return
        if (this.$store.state.test.update_autocomplete_status == 1) return
        this.thr_search_city()
      },
      search_doctor(val, old) {
        if (val == old) return
        if (!val) return
        if (val.length < 1) return
        if (this.$store.state.test.update_autocomplete_status == 1) return
        this.thr_search_doctor()
      }
    }
  }
</script>