<template>
  <v-layout class="fill-height" column>
    <!-- alert dialog -->

    <v-dialog v-model="dialogsuccess" persistent max-width="290">
      <v-card>
        <v-card-title color="success" class="headline">Berhasil !</v-card-title>
        <v-card-text>
          {{ msgsuccess }}
        </v-card-text>
        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn color="green darken-1" flat @click="closeDialogSuccess">OK</v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
    <!-- alert dialog -->
    <v-card class="mb-2 pa-2 searchbox">
      <v-layout row>
        <!-- <v-flex class="text-xs-center" pa-1 xs5>
                    <v-select 
                        style="font-size:11px"
                        item-text="name" 
                        outline
                        return-object 
                        class="mini-select"
                        :items="statuses" 
                        v-model="status" 
                        label="status" hide-details></v-select>
                </v-flex> -->
        <!-- <v-flex class="text-xs-center" pa-1 xs5>
                        <v-autocomplete
                            style="font-size:12px"
                            outline
                            label="Cari Kel. Pelanggan ..."
                            v-model="filter_company"
                            :items="filter_companies"
                            :search-input.sync="filter_search_company"
                            auto-select-first
                            
                            no-filter
                            item-text="name"
                            return-object
                            :loading="isLoading"
                            hide-details
                            no-data-text="Pilih Kel. Pelanggan"
                        >
                        <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>
                </v-flex> -->

        <!-- inputan search -->
        <v-flex pt-1 pl-2 pr-2 pb-1 xs12>
          <v-text-field
            color="black"
            label="Cari"
            placeholder="Ketikkan Kode / Nama, Lalu tekan Enter"
            v-model="search_mgmmcu"
            @keyup.enter="searchMgmMcu()"
            outline
            single-line
            hide-details
          ></v-text-field>
        </v-flex>
      </v-layout>
    </v-card>
    <v-card>
      <v-layout row>
        <v-flex xs12 pl-2 pr-2 pt-2 pb-2>
          <v-data-table
            :headers="headers"
            :items="mgmmcus"
            :loading="isLoading"
            hide-actions
            class="elevation-1"
          >
            <template slot="items" slot-scope="props">
              <td
                @click="selectMe(props.item)"
                v-bind:class="{ 'amber lighten-4': isSelected(props.item) }"
                class="text-xs-left pa-1"
              >
                {{ props.item.Mgm_McuNumber }}
              </td>
              <td
                @click="selectMe(props.item)"
                v-bind:class="{ 'amber lighten-4': isSelected(props.item) }"
                class="text-xs-left pa-1"
              >
                <p class="mb-0 caption">{{ props.item.Mgm_McuLabel }}</p>
                <p class="mb-1 caption">
                  {{ props.item.Mgm_McuStartDateTxt }} -
                  {{ props.item.Mgm_McuEndDateTxt }}
                </p>
                <p class="mb-1 caption">{{ props.item.CorporateName }}</p>
              </td>
            </template>
          </v-data-table>
          <v-pagination
            style="margin-top: 10px; margin-bottom: 10px"
            :total-visible="15"
            v-model="curr_page"
            :length="xtotal_page"
          ></v-pagination>
        </v-flex>
      </v-layout>
    </v-card>
    <one-dialog-alert
      :status="openalertconfirmation"
      :msg="msgalertconfirmation"
      @forget-dialog-alert="forgetAlertConfirmation()"
      @close-dialog-alert="closeAlertConfirmation()"
    ></one-dialog-alert>
  </v-layout>
</template>

<style scoped>
table.v-table tbody td,
table.v-table tbody th {
  height: 35px;
}

table.v-table thead tr {
  height: 35px;
}
</style>
<script>
module.exports = {
  components: {
    "one-dialog-info": httpVueLoader("../../common/oneDialogInfo.vue"),
    "one-dialog-alert": httpVueLoader("../../common/oneDialogAlert.vue"),
  },
  mounted() {
    this.$store.dispatch("patient/search", {
      status: this.status,
      current_page: this.curr_page,
      company: 0,
      lastid: -1,
    });

    // load table 1
    this.$store.dispatch("patient/searchv0", {
      search: this.search,
      current_page: this.curr_page,
      lastid: -1,
    });
  },
  methods: {
    searchMgmMcu(){
      this.$store.dispatch("patient/searchv0", {
      search: this.search,
      current_page: this.curr_page,
      search:this.search_mgmmcu,
      lastid: -1,
    });
    },
    // cpone
    isSelected(p) {
      return p.Mgm_McuID == this.$store.state.patient.selected_patient.Mgm_McuID;
    },
    selectMe(pat) {
      if (this.$store.state.patient.no_save == 0) {
        this.$store.commit("patient/update_selected_patient", pat);
        this.$store.dispatch("patient/getgrafik");
      } else {
        this.$store.commit("patient/update_open_alert_confirmation", true);
      }
    },
    closeAlertConfirmation() {
      this.$store.commit("patient/update_open_alert_confirmation", false);
    },
    forgetAlertConfirmation() {
      this.$store.commit("patient/update_no_save", 0);
      this.$store.commit("patient/update_open_alert_confirmation", false);
    },
    updateAlert_success(val) {
      this.$store.commit("patient/update_alert_success", val);
    },
    closeDialogSuccess() {
      let arrpatient = this.$store.state.patient.patients;
      var idx = _.findIndex(
        arrpatient,
        (item) => item.M_PatientID === this.$store.state.patient.last_id
      );
      console.log(idx);
      // this.$store.dispatch("patient/search", {
      //     status: this.status,
      //     current_page: this.curr_page,
      //     lastid: idx
      // })

      this.$store.dispatch("patient/searchv0", {
        status: this.status,
        current_page: this.curr_page,
        lastid: idx,
      });
      this.$store.commit("patient/update_dialog_success", false);
    },
  },
  computed: {
    // cpone

    grafiks: {
      get() {
        return this.$store.state.patient.grafiks;
      },
      set(val) {
        this.$store.commit("patient/update_grafiks", val);
      },
    },
    search_mgmmcu: {
      get() {
        return this.$store.state.patient.search_mgmmcu;
      },
      set(val) {
        this.$store.commit("patient/update_search_mgmmcu", val);
        this.$store.commit("patient/update_no_save", 1);
      },
    },
    mgmmcus() {
      return this.$store.state.patient.mgmmcus;
    },
    // cpone
    filter_companies() {
      return this.$store.state.patient.filter_companies;
    },
    filter_company: {
      get() {
        return this.$store.state.patient.filter_company;
      },
      set(val) {
        this.$store.commit("patient/update_filter_company", val);
        //this.$store.dispatch("patient/getmou",this.$store.state.patient.company)
        this.$store.dispatch("patient/search", {
          status: this.status,
          current_page: this.curr_page,
          company: val.id,
          lastid: -1,
        });
      },
    },
    dialogconfirmationdelete: {
      get() {
        return this.$store.state.patient.dialog_confirmation_delete;
      },
      set(val) {
        this.$store.commit("patient/update_dialog_confirmation_delete", val);
      },
    },
    msgconfirmationdelete() {
      return this.$store.state.patient.msg_confirmation_delete;
    },
    status: {
      get() {
        return this.$store.state.patient.status;
      },
      set(val) {
        this.$store.commit("patient/update_status", val);
        this.$store.dispatch("patient/search", {
          status: val,
          current_page: this.curr_page,
          company: this.$store.state.patient.filter_company.id,
          lastid: -1,
        });
      },
    },
    dialogsuccess: {
      get() {
        return this.$store.state.patient.dialog_success;
      },
      set(val) {
        this.$store.commit("patient/update_dialog_success", val);
      },
    },
    msgsuccess() {
      return this.$store.state.patient.msg_success;
    },
    snackbar: {
      get() {
        return this.$store.state.patient.alert_success;
      },
      set(val) {
        this.$store.commit("patient/update_alert_success", val);
      },
    },
    isLoading() {
      return this.$store.state.patient.search_status == 1;
    },
    patients() {
      return this.$store.state.patient.patients;
    },
    totalpatient() {
      return this.$store.state.patient.total_patient;
    },
    curr_page: {
      get() {
        return this.$store.state.patient.current_page;
      },
      set(val) {
        this.$store.commit("patient/update_current_page", val);
        // this.$store.dispatch("patient/search", {
        //     status: this.status,
        //     current_page: val,
        //     lastid: -1
        // })

        var prm = {};
        prm.search = this.search_mgmmcu;
        prm.current_page = val;
        // this.$store.commit("patient/update_current_page_mgmmcu", 1)
        this.$store.dispatch("patient/searchv0", prm);
      },
    },
    xtotal_page: {
      get() {
        return this.$store.state.patient.total_mgmmcu;
      },
      set(val) {
        this.$store.commit("patient/update_total_mgmmcu", val);
      },
    },
    openalertconfirmation: {
      get() {
        return this.$store.state.patient.open_alert_confirmation;
      },
      set(val) {
        this.$store.commit("patient/update_open_alert_confirmation", val);
      },
    },
  },
  watch: {
    filter_search_company(val, old) {
      //console.log(val)
      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();
    },
  },
  data() {
    return {
      filter_search_company: "",
      statuses: [
        { id: "N", name: "Belum download" },
        { id: "Y", name: "Sudah download" },
      ],
      msgalertconfirmation: "Perubahan yang telah dilakukan belum disimpan dong !",
      items: [],
      name: "",
      snorm: "",
      page: 1,
      headers: [
        {
          text: "KODE",
          align: "left",
          sortable: false,
          value: "mr",
          width: "20%",
          class: "pa-2 deep-orange accent-1 white--text",
        },
        {
          text: "NAMA",
          align: "left",
          sortable: false,
          value: "lab",
          width: "55%",
          class: "pa-2 deep-orange accent-1 white--text",
        },
      ],
      pagination: {
        descending: false,
        page: 1,
        rowsPerPage: 5,
        sortBy: "Mgm_McuID",
        // totalItems: this.$store.state.patient.total_patients
        totalItems: this.$store.state.patient.total_mgmmcu,
      },
    };
  },
};
</script>
