<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-layout column>
      <v-layout align-center column>
        <v-toolbar dark color="primary">
          <v-toolbar-title class="white--text"
            >SERAH TERIMA HASIL</v-toolbar-title
          >
          <v-spacer></v-spacer>
          <v-tooltip bottom>
            <template v-slot:activator="{ on }">
              <v-btn @click="addNew()" icon v-on="on">
                <v-icon>add_box</v-icon>
              </v-btn>
            </template>
            <span>Tambah serah terima baru</span>
          </v-tooltip>
        </v-toolbar>
        <v-card style="width: 100%" class="mb-2 pa-2 searchbox">
          <v-layout row wrap>
            <v-flex xs12 class="mb-2">
              <v-autocomplete
                single-line
                v-model="selectedSetup"
                :loading="loading"
                :items="setupList"
                item-text="Mgm_McuLabel"
                class="mini-select"
                outline
                hide-details
                return-object
                label="Proyek MCU"
              >
                <template v-slot:selection="data">
                  <template>
                    <v-list-tile-content>
                      <v-list-tile-title
                        >{{ data.item.Mgm_McuNumber }} -
                        {{ data.item.Mgm_McuLabel }}</v-list-tile-title
                      >
                      <v-list-tile-sub-title>
                        {{ data.item.Mgm_McuStartDate }}
                        {{ data.item.Mgm_McuEndDate }}</v-list-tile-sub-title
                      >
                    </v-list-tile-content>
                  </template>
                </template>
                <template slot="item" slot-scope="{ item }">
                  <template>
                    <v-list-tile-content>
                      <v-list-tile-title
                        >{{ item.Mgm_McuNumber }} -
                        {{ item.Mgm_McuLabel }}</v-list-tile-title
                      >
                      <v-list-tile-sub-title>
                        {{ item.Mgm_McuStartDate }}/
                        {{ item.Mgm_McuEndDate }}</v-list-tile-sub-title
                      >
                    </v-list-tile-content>
                  </template>
                </template></v-autocomplete
              >
            </v-flex>
            <v-flex xs6 class="mb-2">
              <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="mr-2"
                    v-model="formatedStartDateHeader"
                    label="Tanggal Awal"
                    outline
                    hide-details
                    readonly
                    v-on="on"
                    @blur="deFormatedDate(formatedStartDateHeader)"
                  ></v-text-field>
                </template>
                <v-date-picker
                  v-model="startDateHeaderForm"
                  no-title
                  @input="menuFormDateStart = false"
                ></v-date-picker>
              </v-menu>
            </v-flex>
            <v-flex xs6 class="mb-2">
              <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="ml-2"
                    v-model="formatedEndDateHeader"
                    label="Tanggal Akhir"
                    outline
                    readonly
                    hide-details
                    v-on="on"
                    @blur="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; height: 65vh" class="fill-height">
        <div>
          <v-layout
            row
            wrap
            class="pa-2"
            v-for="(data, index) in handoverHeader"
          >
            <v-flex
              @click="selectMe(data)"
              xs12
              class="px-2"
              v-bind:class="{ 'amber lighten-4': isSelected(data) }"
              :key="index"
            >
              <v-layout row wrap>
                <v-flex xs12 class="mb-1 font-weight-bold subheading">{{
                  data.handoverCode
                }}</v-flex>
                <v-flex xs12 class="mb-1 font-weight-bold subheading"
                  ><kbd>{{ data.handoverDate }}</kbd></v-flex
                >
                <v-flex xs12 class="mb-1"
                  >Staff : {{ data.handoverStaff }}</v-flex
                >
                <v-flex xs12 class="mb-1"
                  >Penerima : {{ data.handoverReceivedBy }}</v-flex
                >
                <v-flex xs12 class="mb-1 font-italic">{{
                  data.handovernote
                }}</v-flex>
                <v-flex xs12 class="mb-1 font-italic">
                  <v-divider> </v-divider>
                </v-flex>
              </v-layout> </v-flex
          ></v-layout>
        </div>
      </v-card>
      <v-card class="pa-2">
        <div class="text-xs-left">
          <v-pagination
            v-model="headerPage"
            :length="headerTotal"
          ></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("handover/getsetup");
  },
  methods: {
    selectMe(val) {
      this.selectedHandover = val;
      this.isAdd = false;
      this.$store.commit("handover/update_detailPage", 1);
      this.$store.dispatch("handover/getdetail");
    },
    addNew() {
      this.selectedHandover = {};
      this.isAdd = true;
      this.$store.commit("handover/update_receiver", "");
      this.$store.commit("handover/update_selectedStatusDetail", "N");
      this.$store.commit("handover/update_note", "");
      this.$store.commit("handover/update_detailPage", 1);
      this.$store.dispatch("handover/getdetail");
    },
    isSelected(val) {
      return this.selectedHandover.handoverID == val.handoverID;
    },
    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")}`;
    },
  },
  computed: {
    selectedData: {
      get() {
        return this.$store.state.handover.selectedData;
      },
      set(val) {
        this.$store.commit("handover/update_selectedData", val);
      },
    },
    setupList: {
      get() {
        return this.$store.state.handover.setupList;
      },
      set(val) {
        this.$store.commit("handover/update_setupList", val);
      },
    },
    selectedSetup: {
      get() {
        return this.$store.state.handover.selectedSetup;
      },
      set(val) {
        this.$store.commit("handover/update_selectedSetup", val);
        this.selectedData = [];
        this.selectedHandover = {};
        this.startDateHeaderForm = val.Mgm_McuStartDate;
        this.endDateHeaderForm = val.Mgm_McuEndDate;
        this.isAdd = true;
        this.$store.commit("handover/update_receiver", "");
        this.$store.commit("handover/update_selectedStatusDetail", "N");
        this.$store.commit("handover/update_note", "");
        this.$store.commit("handover/update_endDateDetail", val.Mgm_McuEndDate);
        this.$store.commit(
          "handover/update_startDateDetail",
          val.Mgm_McuStartDate
        );
        this.$store.dispatch("handover/search");
        this.$store.commit("handover/update_detailPage", 1);
        this.$store.dispatch("handover/getdetail");
      },
    },
    loading: {
      get() {
        return this.$store.state.handover.loading;
      },
      set(val) {
        this.$store.commit("handover/update_loading", val);
      },
    },
    errorMsg: {
      get() {
        return this.$store.state.handover.errorMsg;
      },
      set(val) {
        this.$store.commit("handover/update_errorMsg", val);
      },
    },
    snackbarError: {
      get() {
        return this.$store.state.handover.snackbarError;
      },
      set(val) {
        this.$store.commit("handover/update_snackbarError", val);
      },
    },
    snackbarSuccess: {
      get() {
        return this.$store.state.handover.snackbarSuccess;
      },
      set(val) {
        this.$store.commit("handover/update_snackbarSuccess", val);
      },
    },
    successMsg: {
      get() {
        return this.$store.state.handover.successMsg;
      },
      set(val) {
        this.$store.commit("handover/update_successMsg", val);
      },
    },

    startDateHeaderForm: {
      get() {
        return this.$store.state.handover.startDateHeader;
      },
      set(val) {
        this.$store.commit("handover/update_startDateHeader", val);
        this.selectedData = [];
        this.selectedHandover = {};
        this.$store.dispatch("handover/search");
      },
    },
    endDateHeaderForm: {
      get() {
        return this.$store.state.handover.endDateHeader;
      },
      set(val) {
        this.$store.commit("handover/update_endDateHeader", val);
        this.selectedData = [];
        this.selectedHandover = {};
        this.$store.dispatch("handover/search");
      },
    },
    handoverHeader: {
      get() {
        return this.$store.state.handover.handoverHeader;
      },
      set(val) {
        this.$store.commit("handover/update_handoverHeader", val);
      },
    },
    selectedHandover: {
      get() {
        return this.$store.state.handover.selectedHandover;
      },
      set(val) {
        this.selectedData = [];
        this.$store.commit("handover/update_selectedHandover", val);
        this.$store.commit("handover/update_receiver", val.handoverReceivedBy);
        this.$store.commit("handover/update_note", val.handovernote);
      },
    },
    headerPage: {
      get() {
        return this.$store.state.handover.headerPage;
      },
      set(val) {
        this.$store.commit("handover/update_headerPage", val);
        this.selectedData = [];
        this.$store.dispatch("handover/search");
      },
    },
    headerTotal: {
      get() {
        return this.$store.state.handover.headerTotal;
      },
      set(val) {
        this.$store.commit("handover/update_headerTotal", val);
      },
    },
    isAdd: {
      get() {
        return this.$store.state.handover.isAdd;
      },
      set(val) {
        this.$store.commit("handover/update_isAdd", val);
      },
    },
    formatedStartDateHeader() {
      return this.formatDate(this.startDateHeaderForm);
    },
    formatedEndDateHeader() {
      return this.formatDate(this.endDateHeaderForm);
    },
  },
  watch: {
    // search_company(val, old) {
    //   if (val == old) return;
    //   if (!val) return;
    //   if (val.length < 1) return;
    //   if (this.$store.state.patient.update_autocomplete_status == 1) return;
    //   this.thr_search_company();
    // },
    // search_doctor(val, old) {
    //   if (val == old) return;
    //   if (!val) return;
    //   if (val.length < 1) return;
    //   if (this.$store.state.patient.update_autocomplete_status == 1) return;
    //   this.thr_search_doctor();
    // },
    // search_test(val, old) {
    //   if (val == old) return;
    //   if (!val) return;
    //   if (val.length < 1) return;
    //   if (this.$store.state.patient.update_autocomplete_status == 1) return;
    //   this.thr_search_test();
    // },
    searchhandoverHeaderCopy(val, old) {
      if (val == old) return;
      if (!val) return;
      if (val.length < 1) return;
      this.thrsearchphautocomplete();
    },
  },
  data() {
    return {
      searchhandoverHeaderCopy: "",
      selected_delivery: {},
      search_company: "",
      search_test: "",
      menuFormDateStart: false,
      menuFormDateEnd: false,
      date: new Date().toISOString().substr(0, 10),
      dialogAct: "add",
      items: [],
      menuFormDateEnd: false,
      menuFormDateStart: 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>
