<template>
  <div>
    <v-snackbar
      color="success"
      v-model="snackbarSuccess"
      right="right"
      :timeout="3000"
      top="top"
    >
      {{ successMsg }}
      <v-btn color="white" flat @click="snackbarSuccess = false"> Close </v-btn>
    </v-snackbar>
    <v-snackbar
      color="error"
      v-model="snackbarError"
      right="right"
      :timeout="3000"
      top="top"
    >
      {{ errorMsg }}
      <v-btn color="white" flat @click="snackbarError = false"> Close </v-btn>
    </v-snackbar>

    <v-dialog persistent v-model="dialogPriceHeader" width="500">
      <v-card>
        <v-card-title class="headline grey lighten-2" primary-title>
          <v-layout align-center justify-space-between row fill-height>
            <p class="mb-2">FORM PENYERAHAN SAMPLE</p>
            <p>
              <kbd v-if="dialogAct === 'edit' && selectedPriceHeader">{{
              selectedPriceHeader.headerCode
            }}</kbd>
            </p>
          </v-layout>
        </v-card-title>
        <v-card-text>
          <v-layout row>
              <v-flex xs12>
                <v-autocomplete
                  label="Cabang*"
                  v-model="selected_branch"
                  class="ma-1"
                  :items="branchs"
                  auto-select-first
                  hide-details
                  style="font-size: 14px"
                  outline
                  no-filter
                  item-text="name"
                  return-object
                  :loading="isLoading"
                  no-data-text="Semua Corporate"
                >
                  <template slot="item" slot-scope="{ item }">
                    <v-list-tile-content>
                      <v-list-tile-title v-text="item.name"></v-list-tile-title>
                    </v-list-tile-content>
                  </template>
                </v-autocomplete>
                <p v-if="checkError('requirebranch')" class="error pl-2 pr-2" style="color:#fff">Anda belum memilih cabang</p>
              </v-flex>
          </v-layout>
          <v-layout row>
              <v-flex xs12>
                <v-autocomplete
                  label="Setup MCU*"
                  v-model="selected_setup"
                  class="ma-1"
                  :items="setups"
                  auto-select-first
                  hide-details
                  style="font-size: 14px"
                  outline
                  no-filter
                  item-text="name"
                  return-object
                  :loading="isLoading"
                  no-data-text="Pilih Setup MCU"
                >
                  <template slot="item" slot-scope="{ item }">
                    <v-list-tile-content>
                      <v-list-tile-title v-text="item.name"></v-list-tile-title>
                    </v-list-tile-content>
                  </template>
                </v-autocomplete>
                <p v-if="checkError('requirebranch')" class="error pl-2 pr-2" style="color:#fff">Anda belum memilih setup mcu</p>
              </v-flex>
          </v-layout>
          <v-layout class="mb-3" row>
            <v-flex xs12>
              <v-menu
                v-model="menuFormDateStart"
                :close-on-content-click="false"
                :nudge-right="40"
                lazy
                transition="scale-transition"
                offset-y
                full-width
                max-width="290px"
                min-width="290px"
              >
                <template v-slot:activator="{ on }">
                  <v-text-field
                    class="ma-1"
                    v-model="formatedStartDateHeader"
                    label="Tanggal Surat Jalan"
                    outline
                    readonly
                  hide-details
                    v-on="on"
                    @blur="date = deFormatedDate(formatedStartDateHeader)"
                  ></v-text-field>
                </template>
                <v-date-picker
                  v-model="startDateHeaderForm"
                  no-title
                  @input="menuFormDateStart = false"
                ></v-date-picker>
              </v-menu>
              <p v-if="checkError('wrongformatdate')" class="error pl-2 pr-2" style="color:#fff">Format tanggal salah, format yang benar : DD-MM-YYYY</p>
            </v-flex>
            </v-layout>
          <v-layout row>
            <v-flex xs12>
              <v-autocomplete
                label="Staf Penyerahan Sample*"
                v-model="selected_staff_sample"
                class="ma-1"
                :items="sample_staffs"
                :search-input.sync="search_staff_sample"
                auto-select-first
                hide-details
                style="font-size: 14px"
                outline
                no-filter
                item-text="name"
                return-object
                :loading="isLoading"
                no-data-text="Pilih Staf"
              >
                <template slot="item" slot-scope="{ item }">
                  <v-list-tile-content>
                    <v-list-tile-title v-text="item.name"></v-list-tile-title>
                  </v-list-tile-content>
                </template>
              </v-autocomplete>
              <p v-if="checkError('requirestafsample')" class="error pl-2 pr-2" style="color:#fff">Anda belum memilih staf yang menyerahkan sample</p>
            </v-flex>
            </v-layout>
            <v-layout row>
              <v-flex xs12>
                <v-autocomplete
                  label="Staf Kurir*"
                  v-model="selected_staff_courier"
                  class="ma-1"
                  :items="courier_staffs"
                  :search-input.sync="search_staff_courier"
                  auto-select-first
                  :disabled="_.isEmpty(selected_staff_sample)"
                  style="font-size: 14px"
                  outline
                  no-filter
                  item-text="name"
                  return-object
                  :loading="isLoading"
                  no-data-text="Pilih Staf"
                >
                  <template slot="item" slot-scope="{ item }">
                    <v-list-tile-content>
                      <v-list-tile-title v-text="item.name"></v-list-tile-title>
                    </v-list-tile-content>
                  </template>
                </v-autocomplete>
                <p v-if="checkError('requirestafcourier')" class="error pl-2 pr-2" style="color:#fff">Anda belum memilih staf yang membawa sample</p>
              </v-flex>
            </v-layout>
          
        </v-card-text>
        <v-divider></v-divider>
        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn
            color="grey"
            :disabled="pgrs_save"
            flat
            @click="dialogPriceHeader = false"
          >
            BATAL
          </v-btn>
          <v-btn
            color="primary"
            :disabled="pgrs_save"
            
            @click="saveData"
          >
            SIMPAN
          </v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
    <v-dialog persistent v-model="dialogDeleteHeader" width="500">
      <v-card>
        <v-card-title class="headline grey lighten-2" primary-title>
          <v-layout align-center justify-space-between row fill-height>
            <div>KONFIRMASI</div>
          </v-layout>
        </v-card-title>
        <v-card-text
          >Apakah anda yakin akan menghapus harga
          <kbd v-if="selectedPriceHeader" class="mx-2">{{ selectedPriceHeader.headerCode }}</kbd>
          <span v-if="selectedPriceHeader">{{ selectedPriceHeader.headerName }}</span> ?
        </v-card-text>
        <v-divider></v-divider>
        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn
            color="error"
            :disabled="loading"
            flat
            @click="dialogDeleteHeader = false"
          >
            BATAL
          </v-btn>
          <v-btn
            color="warning"
            :disabled="loading"
            flat
            @click="deletePriceHeader()"
          >
            YAKIN
          </v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
    <v-layout column>
      <v-layout align-center column>
        <v-toolbar dark color="primary">
          <v-toolbar-title class="white--text">LISTING SURAT JALAN</v-toolbar-title>
          <v-spacer></v-spacer>
          <v-btn @click="openDialogAdd()" icon>
            <v-icon>add_box</v-icon>
          </v-btn>
        </v-toolbar>
        <v-card style="width: 100%" class="mb-1 pa-2 searchbox">
          <v-layout  row>
            <v-flex xs12>
              <v-menu
                v-model="menuFormDateEnd"
                :close-on-content-click="false"
                :nudge-right="40"
                lazy
                transition="scale-transition"
                offset-y
                full-width
                max-width="290px"
                min-width="290px"
              >
                <template v-slot:activator="{ on }">
                  <v-text-field
                    class="ma-1"
                    v-model="formatedEndDateHeader"
                    label="Tanggal Surat Jalan"
                    outline
                    readonly
                  hide-details
                    v-on="on"
                    @blur="date = deFormatedDate(formatedEndDateHeader)"
                  ></v-text-field>
                </template>
                <v-date-picker
                  v-model="endDateHeaderForm"
                  no-title
                  @input="menuFormDateEnd = false"
                ></v-date-picker>
              </v-menu>
            </v-flex>
            </v-layout>
        </v-card>
      </v-layout>
      <v-card style="overflow-y: scroll" class="fill-height">
        <v-data-table
          :loading="loading"
          :items="priceHeaderList"
          class="v-table elevation-1"
          hide-actions
          hide-headers
        >
          <v-progress-linear
            v-slot:progress="loading"
            color="blue"
            :indeterminate="true"
          ></v-progress-linear>
          <template v-slot:items="props">
            <tr
              v-bind:class="{
                'amber lighten-5': isSelected(props.item),
              }"
              @click="selectMe(props.item)"
            >
              <td width="85%" class="py-2">
                <!-- v-bind:class="{ 'amber lighten-4': isSelected(props.item) }" -->
                <p class="mb-0 pl-1">{{props.item.branch_name}}</p>
                <p style="" class="pl-1 mb-1">
                  <kbd class="mr-2">{{ props.item.headerCode }}</kbd>
                  <span class="font-weight-bold">
                    {{ props.item.headerName }}
                  </span>
                </p>
               
                    <v-chip color="indigo" small label text-color="white">
                      <v-avatar>
                        <v-icon>account_box</v-icon>
                      </v-avatar>
                      {{ props.item.staff_name }}
                    </v-chip>
                    <v-chip color="orange" small label text-color="white">
                      <v-avatar>
                        <v-icon>assignment_ind</v-icon>
                      </v-avatar>
                      {{ props.item.kurir_name }}
                    </v-chip>
              
              </td>
              <td width="15%" class="py-2">
                <!-- @click="selectMe(props.item)"
                  v-bind:class="{ 'amber lighten-4': isSelected(props.item) }" -->
                <v-layout justify-space-between row>
                  <v-icon
                    color="blue"
                    @click="openDialogEdit(props.item)"
                    class="mr-1"
                    style="cursor: pointer"
                  >
                    edit
                  </v-icon>
                  <v-icon
                    color="red "
                    @click="openDialogDelete(props.item)"
                    class="ml-1"
                    style="cursor: pointer"
                  >
                    delete
                  </v-icon>
                </v-layout>
              </td>
            </tr>
          </template>
        </v-data-table>
      </v-card>
      <v-card class="pa-2">
        <div class="text-xs-left">
          <v-pagination v-model="page" :length="totalPageHeader"></v-pagination>
        </div>
      </v-card>
    </v-layout>
  </div>
</template>
<style scoped>
.searchbox .v-input.v-text-field .v-input__slot {
  min-height: 60px;
}

.searchbox .v-btn {
  min-height: 60px;
}

table.v-table tbody td,
table.v-table tbody th {
  height: 40px;
}

table.v-table thead tr {
  height: 40px;
}

.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;
}
</style>
<script>
module.exports = {
  //   components: {
  //     "one-dialog-info": httpVueLoader("../../common/oneDialogInfo.vue"),
  //     "one-dialog-alert": httpVueLoader("../../common/oneDialogAlert.vue"),
  //   },
  mounted() {
    this.$store.dispatch("price/searchHeader")
  },
  methods: {
    saveData() {
        this.$store.commit("patient/update_pgrs_save", true)
        this.$store.commit("patient/update_errors", [])
        var errors = this.$store.state.patient.errors
        var aDOB = moment(this.startDateHeaderForm, 'YYYY-MM-DD', true)
        console.log(this.startDateHeaderForm)
        console.log(aDOB)
        var isValidDate = aDOB.isValid()
        if (!isValidDate) {
            errors.push("wrongformatdate")
        }
        if (_.isEmpty(this.selected_branch)) {
            errors.push("requirebranch")
        }
        if (_.isEmpty(this.selected_staff_sample)) {
            errors.push("requirestafsample")
        }
        if (_.isEmpty(this.selected_staff_courier)) {
            errors.push("requirestafcourier")
        }
        if (errors.length === 0) {
            var prm = {}
            prm.setup = this.selected_setup
            prm.date = this.startDateHeaderForm
            prm.branch = this.selected_branch
            prm.staff_sample = this.selected_staff_sample
            prm.staff_courier = this.selected_staff_courier
            
            
            this.$store.dispatch("patient/saveheader", prm)
        }else{
          this.$store.commit("patient/update_pgrs_save", false)
        }
    },
    thr_search_company: _.debounce(function () {
      this.$store.dispatch("patient/searchcompany", this.search_company);
    }, 2000),
    formatDate(date) {
      if (!date) return null;

      const [year, month, day] = date.split("-");
      return `${day}-${month}-${year}`;
    },
    deFormatedDate(date) {
      if (!date) return null;

      const [day, month, year] = date.split("-");
      return `${year}-${month.padStart(2, "0")}-${day.padStart(2, "0")}`;
    },

    closeDialogQrCode() {
      this.dialogQrCode = false;
    },
    savePriceHeader() {
      console.log(this.dialogAct);
      if (this.dialogAct === "add") {
        this.$store.dispatch("price/insertPriceHeader");
      } else if (this.dialogAct === "edit") {
        this.$store.dispatch("price/editPriceHeader");
      }
    },
    deletePriceHeader() {
      this.$store.dispatch("price/deletePriceHeader");
    },
    selectMe(val) {
      this.selectedPriceHeader = val;
    },
    isSelected(val) {
      return this.selectedPriceHeader.headerID === val.headerID;
    },
    openDialogAdd() {
      this.dialogAct = "add";
      this.dialogPriceHeader = true;
      console.log('aaa')
    },
    openDialogDelete(val) {
      this.selectedPriceHeader = val;
      this.dialogDeleteHeader = true;
    },
    openDialogEdit(val) {
      this.dialogAct = "edit";
      this.selectedPriceHeader = val;
      this.nameHeader = this.selectedPriceHeader.headerName;
      this.startDateHeaderForm = this.selectedPriceHeader.headerStartDate;
      this.endDateHeaderForm = this.selectedPriceHeader.headerEndDate;
      this.dialogPriceHeader = true;
    },
    thr_search_staff_sample: _.debounce(function () {
      this.$store.dispatch("patient/searchstaffsample", {search:this.search_staff_sample});
    }, 2000),
    thr_search_staff_courier: _.debounce(function () {
      this.$store.dispatch("patient/searchstaffcourier", {search:this.search_staff_courier});
    }, 2000),
    checkError(value) {
        var errors = this.$store.state.patient.errors
        if (errors.includes(value)) {
            return true
        } else {
            return false
        }
    },
  },
  computed: {
    selected_setup:{
      get() {
        return this.$store.state.patient.selected_setup
      },
      set(val) {
        this.$store.commit("patient/update_selected_setup", val);
      },
    },
    setups() {
      return this.$store.state.patient.setups
    },
    pgrs_save() {
      return this.$store.state.patient.pgrs_save
    },
    selected_staff_courier:{
      get() {
        return this.$store.state.patient.selected_staff_courier
      },
      set(val) {
        this.$store.commit("patient/update_selected_staff_courier", val);
      },
    },
    courier_staffs() {
      return this.$store.state.patient.courier_staffs
    },
    selected_staff_sample: {
      get() {
        return this.$store.state.patient.selected_staff_sample
      },
      set(val) {
        this.$store.commit("patient/update_selected_staff_sample", val);
      },
    },
    sample_staffs() {
      return this.$store.state.patient.sample_staffs
    },
    isLoading: {
      get() {
        return this.$store.state.patient.isLoading
      },
      set(val) {
        this.$store.commit("price/update_isLoading", val);
      },
    },
    branchs() {
      return this.$store.state.patient.branchs;
    },
    selected_branch: {
      get() {
        return this.$store.state.patient.selected_branch;
      },
      set(val) {
        this.$store.commit("patient/update_selected_branch", val);
        this.setups = []
        if(val){
          this.$store.dispatch("patient/getsetups",{branch:val})
        }
      },
    },
    searchPrice: {
      get() {
        return this.$store.state.price.searchPrice;
      },
      set(val) {
        this.$store.commit("price/update_searchPrice", val);
        this.$store.dispatch("price/searchPriceHeader");
      },
    },
    priceHeaderList: {
      get() {
        return this.$store.state.price.priceHeaderList;
      },
      set(val) {
        this.$store.commit("price/update_priceHeaderList", val);
      },
    },
    loading: {
      get() {
        return this.$store.state.price.loading;
      },
      set(val) {
        this.$store.commit("price/update_loading", val);
      },
    },
    page: {
      get() {
        return this.$store.state.price.page;
      },
      set(val) {
        this.$store.commit("price/update_page", val);
        this.$store.dispatch("price/searchPriceHeader");
      },
    },
    totalPageHeader: {
      get() {
        return this.$store.state.price.totalPageHeader;
      },
      set(val) {
        this.$store.commit("price/update_totalPageHeader", val);
      },
    },
    errorMsg: {
      get() {
        return this.$store.state.price.errorMsg;
      },
      set(val) {
        this.$store.commit("price/update_errorMsg", val);
      },
    },
    snackbarError: {
      get() {
        return this.$store.state.price.snackbarError;
      },
      set(val) {
        this.$store.commit("price/update_snackbarError", val);
      },
    },
    snackbarSuccess: {
      get() {
        return this.$store.state.price.snackbarSuccess;
      },
      set(val) {
        this.$store.commit("price/update_snackbarSuccess", val);
      },
    },
    selectedPriceHeader: {
      get() {
        return this.$store.state.price.selectedPriceHeader;
      },
      set(val) {
        this.$store.commit("price/update_selectedPriceHeader", val);
        this.$store.dispatch("price/searchpricetest");
      },
    },

    successMsg: {
      get() {
        return this.$store.state.price.successMsg;
      },
      set(val) {
        this.$store.commit("price/update_successMsg", val);
      },
    },
    dialogPriceHeader: {
      get() {
        return this.$store.state.price.dialogPriceHeader;
      },
      set(val) {
        this.$store.commit("price/update_dialogPriceHeader", val);
     
      },
    },
    startDateHeaderForm: {
      get() {
        return this.$store.state.price.startDateHeader;
      },
      set(val) {
        console.log("sd");
        console.log(val);
        this.$store.commit("price/update_startDateHeader", val);
        //let sd = new Date(val);
        //let ed = new Date(this.endDateHeaderForm);
        //if (sd > ed) {
          //this.endDateHeaderForm = val;
       // }
      },
    },
    endDateHeaderForm: {
      get() {
        return this.$store.state.price.endDateHeader;
      },
      set(val) {
        this.$store.commit("price/update_endDateHeader", val);
        this.$store.commit("price/update_page", 1);
        console.log("ed");
        console.log(val);
      },
    },
    nameHeader: {
      get() {
        return this.$store.state.price.nameHeader;
      },
      set(val) {
        this.$store.commit("price/update_nameHeader", val);
      },
    },
    dialogDeleteHeader: {
      get() {
        return this.$store.state.price.dialogDeleteHeader;
      },
      set(val) {
        this.$store.commit("price/update_dialogDeleteHeader", val);
      },
    },
    formatedStartDateHeader() {
      return this.formatDate(this.startDateHeaderForm);
    },
    formatedEndDateHeader() {
      return this.formatDate(this.endDateHeaderForm);
    },
  },
  watch: {
    search_staff_sample(val, old) {
      if (val == old) return;
      //if (!val) return;
      //if (val.length < 1) return;
      //if (this.$store.state.patient.update_autocomplete_staff == 1) return;
      this.thr_search_staff_sample();
    },
    search_staff_courier(val, old) {
      if (val == old) return;
      //if (!val) return;
      //if (val.length < 1) return;
      //if (this.$store.state.patient.update_autocomplete_staff == 1) return;
      this.thr_search_staff_courier();
    }
  },
  data() {
    return {
      search_staff_courier:'',
      search_staff_sample:'',
      selected_delivery: {},
      search_company: "",
      search_test: "",
      menuFormDateStart: false,
      menuFormDateEnd: false,
      date: new Date().toISOString().substr(0, 10),
      dialogAct: "add",
      items: [],
      menustartdate: false,
      menuenddate: false,
      errors: [],
      sheet: false,
      indeterminatex: false,
      checkednotall: false,
      bar_chx_all: false,
      selected_barcode: [],
      dialogtimeline: false,
      search_doctor: "",
      headers: [
        {
          text: "",
          align: "center",
          sortable: false,
          value: "lab",
          width: "2%",
          class: "pa-2 blue darken-2 white--text",
        },
        {
          text: "NO",
          align: "center",
          sortable: false,
          value: "lab",
          width: "5%",
          class: "pa-2 blue darken-2 white--text",
        },
        {
          text: "NO REG",
          align: "center",
          sortable: false,
          value: "lab",
          width: "8%",
          class: "pa-2 blue darken-2 white--text",
        },
        {
          text: "NAMA",
          align: "center",
          sortable: false,
          value: "name",
          width: "15%",
          class: "pa-2 blue darken-2 white--text",
        },
        {
          text: "CORPORATE",
          align: "center",
          sortable: false,
          value: "name",
          width: "15%",
          class: "pa-2 blue darken-2 white--text",
        },
        {
          text: "PEMERIKSAAN",
          align: "center",
          sortable: false,
          value: "status",
          width: "20%",
          class: "pa-2 blue darken-2 white--text",
        },

        {
          text: "TOTAL",
          align: "center",
          sortable: false,
          value: "status",
          width: "5%",
          class: "pa-2 blue darken-2 white--text",
        },
      ],
    };
  },
};
</script>
