<template>
  <v-layout column>
    <!-- ERROR DIALOG -->
    <v-dialog v-model="dialog_error" max-width="500px">
      <v-card>
        <v-card-title>
          <span>ERROR !</span>
          <v-spacer></v-spacer>
        </v-card-title>
        <v-divider></v-divider>
        <div class="ma-3 red--text">{{ msgError }}</div>
        <v-divider></v-divider>
        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn color="primary" flat @click="dialog_error = false"
            >Close</v-btn
          >
        </v-card-actions>
      </v-card>
    </v-dialog>
    <!-- END ERROR DIALOG -->
    <!-- Alert Delete -->
    <v-dialog v-model="dialogdeletealert" 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>
                      {{ 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 color="primary" flat @click="dialogdeletealert = false">
            Tutup
          </v-btn>
          <v-btn color="primary" flat @click="deleteItem()"> Yakin lah </v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
    <!-- End alert delete -->
    <!-- Snackbar -->
    <v-snackbar
      v-model="snackbar"
      :timeout="5000"
      :multi-line="false"
      :vertical="false"
      :top="true"
      :color="clr"
      :value="snackbar"
    >
      {{ msgsnackbar }}
      <v-btn flat @click="snackbar = false"> Tutup </v-btn>
    </v-snackbar>
    <!-- End Snackbar -->
    <!-- Dialog -->
    <v-dialog v-model="dialog_form" persistent max-width="600px">
      <v-card>
        <v-form ref="formitemgroup" lazy-validation>
          <v-card-title>
            <span class="title">Form Layanan FO</span></v-card-title
          >
          <v-divider v-if="!saveStatus"></v-divider>
          <v-progress-linear
            v-if="saveStatus"
            :indeterminate="true"
          ></v-progress-linear>
          <v-card-text class="pt-0 pb-2">
            <v-layout wrap>
              <v-flex xs12>
                <v-text-field
                  v-model="xCode"
                  label="Kode*"
                  required
                  :error="kodeErrorMessage !== ''"
                  :error-messages="kodeErrorMessage"
                  @blur="kodeValidation"
                ></v-text-field>
                <v-text-field
                  v-model="xName"
                  label="Nama*"
                  required
                  :error="nameErrorMessage !== ''"
                  :error-messages="nameErrorMessage"
                  @blur="nameValidation"
                ></v-text-field>
                <v-text-field
                  v-model="xPriority"
                  label="Prioritas*"
                  required
                  :error="priorityErrorMessage !== ''"
                  :error-messages="priorityErrorMessage"
                  @blur="priorityValidation"
                ></v-text-field>

                <v-layout row wrap>
                  <!-- FO Order -->
                  <v-flex xs6>
                    <v-radio-group v-model="xFoOrder">
                      <template v-slot:label>
                        <div>FO Order*</div>
                      </template>
                      <v-radio value="Y">
                        <template v-slot:label>
                          <div>Ya</div>
                        </template>
                      </v-radio>
                      <v-radio value="N">
                        <template v-slot:label>
                          <div>Tidak</div>
                        </template>
                      </v-radio>
                    </v-radio-group>
                  </v-flex>

                  <!-- layanan online -->
                  <v-flex xs6>
                    <v-radio-group v-model="xServiceOnline">
                      <template v-slot:label>
                        <div>Layanan Online*</div>
                      </template>
                      <v-radio value="Y">
                        <template v-slot:label>
                          <div>Ya</div>
                        </template>
                      </v-radio>
                      <v-radio value="N">
                        <template v-slot:label>
                          <div>Tidak</div>
                        </template>
                      </v-radio>
                    </v-radio-group>
                  </v-flex>
                </v-layout>

                <!-- is consult dokter -->
                <v-radio-group
                  v-model="xIsConsultDoctor"
                  @change="onChangeIsConsultDoctor"
                >
                  <template v-slot:label>
                    <div>Konsultasi Dokter*</div>
                  </template>
                  <v-radio value="Y">
                    <template v-slot:label>
                      <div>Ya</div>
                    </template>
                  </v-radio>
                  <v-radio value="N">
                    <template v-slot:label>
                      <div>Tidak</div>
                    </template>
                  </v-radio>
                </v-radio-group>
                <!-- service doctor name -->
                <div v-if="isConsultDoctor === true">
                  <v-text-field
                    v-model="xNameDoctor"
                    label="Nama Dokter*"
                    required
                    :error="nameDoctorErrorMessage !== ''"
                    :error-messages="nameDoctorErrorMessage"
                    @blur="nameDoctorValidation"
                  ></v-text-field>
                </div>
              </v-flex>
              <v-flex>
                <!-- <p
                  v-for="(xerror, idx) in xerrors"
                  class="error pl-2 pr-2"
                  style="color: #fff"
                >
                  {{ xerror.msg }}
                </p> -->
              </v-flex>
            </v-layout>
          </v-card-text>
          <v-divider></v-divider>
          <v-card-actions>
            <v-spacer></v-spacer>
            <v-btn color="blue darken-1" flat @click="closeDialog()"
              >Tutup</v-btn
            >
            <!-- <v-btn
              color="blue darken-1"
              flat
              @click="updateDialogFormItemgroup()"
              :disabled="getLoadingSave === 1"
              >Tutup</v-btn
            > -->
            <v-btn
              v-if="act === 'add'"
              color="blue darken-1"
              flat
              @click="addItem()"
              >Simpan</v-btn
            >
            <v-btn
              v-if="act === 'edit'"
              color="blue darken-1"
              flat
              @click="editItem()"
              >Simpan Perubahan</v-btn
            >
          </v-card-actions>
        </v-form>
      </v-card>
    </v-dialog>
    <!-- End Dialog -->
    <v-flex xs12>
      <v-card>
        <!-- Toolbar -->
        <v-toolbar
          color="blue darken-1"
          dark
          scroll-off-screen
          scroll-target="#scrolling-techniques"
        >
          <v-toolbar-title class="headline font-weight-bold"
            >Layanan</v-toolbar-title
          >
          <v-spacer></v-spacer>
          <div>
            <v-btn @click="openAdd()" icon><v-icon>library_add</v-icon></v-btn>
          </div>
        </v-toolbar>
        <!-- End Toolbar -->
        <!-- Search area -->
        <v-card elevation="0">
          <v-card-text>
            <v-layout row>
              <v-flex xs3>
                <v-text-field
                  v-model="xsearch"
                  label="Cari"
                  placeholder="Ketikkan nama atau kode"
                  outline
                  hide-details
                ></v-text-field>
              </v-flex>
            </v-layout>
          </v-card-text>
        </v-card>
        <!-- End Search Area -->
        <v-divider></v-divider>
        <!-- <v-layout xs12> -->
        <v-divider></v-divider>
        <div
          id="scrolling-techniques"
          class="scroll-y"
          :style="{ height: windowHeight }"
        >
          <v-data-table
            :headers="headers"
            :loading="isLoading"
            :items="getService"
            hide-actions
          >
            <template v-slot:headers="props">
              <tr>
                <th
                  v-for="header in props.headers"
                  :key="header.text"
                  :width="header.width"
                  @click="changeSort(header.value, sorting.type, header)"
                >
                  <v-icon
                    color="blue darken-2"
                    v-if="
                      header.sort &&
                      sorting.type == 'desc' &&
                      sorting.sortBy === header.value
                    "
                    small
                    >arrow_upward</v-icon
                  >
                  <v-icon
                    color="blue darken-2"
                    v-if="
                      header.sort &&
                      sorting.type == 'asc' &&
                      sorting.sortBy === header.value
                    "
                    small
                    >arrow_downward</v-icon
                  >
                  <v-icon
                    color="grey lighten-2"
                    v-if="sorting.sortBy !== header.value && header.sort"
                    small
                    >arrow_downward</v-icon
                  >
                  {{ header.text }}
                </th>
              </tr>
            </template>
            <v-progress-linear
              v-slot:progress
              color="blue"
              indeterminate
            ></v-progress-linear>
            <template v-slot:items="props">
              <td
                class="text-xs-center pa-2"
                @click="selectMe(props.item)"
                v-bind:class="{ 'blue lighten-5': isSelected(props.item) }"
              >
                {{ props.item.serviceCode }}
              </td>
              <td
                class="text-xs-left pa-2"
                @click="selectMe(props.item)"
                v-bind:class="{ 'blue lighten-5': isSelected(props.item) }"
              >
                {{ props.item.serviceName }}
              </td>
              <td
                class="text-xs-center pa-2"
                @click="selectMe(props.item)"
                v-bind:class="{ 'blue lighten-5': isSelected(props.item) }"
              >
                {{ props.item.servicePriority }}
              </td>
              <td
                class="text-xs-center pa-2"
                @click="selectMe(props.item)"
                v-bind:class="{ 'blue lighten-5': isSelected(props.item) }"
              >
                {{ props.item.serviceIsFoOrder }}
              </td>
              <td
                class="text-xs-center pa-2"
                @click="selectMe(props.item)"
                v-bind:class="{ 'blue lighten-5': isSelected(props.item) }"
              >
                {{ props.item.serviceIsOnline }}
              </td>
              <td
                class="text-xs-center pa-2"
                @click="selectMe(props.item)"
                v-bind:class="{ 'blue lighten-5': isSelected(props.item) }"
              >
                {{ props.item.serviceIsConsultDoctor }}
              </td>
              <td
                class="text-xs-center pa-2"
                @click="selectMe(props.item)"
                v-bind:class="{ 'blue lighten-5': isSelected(props.item) }"
              >
                {{
                  props.item.serviceDoctorName == ""
                    ? "-"
                    : props.item.serviceDoctorName
                }}
              </td>
              <td
                class="text-xs-center pa-2"
                @click="selectMe(props.item)"
                v-bind:class="{ 'blue lighten-5': isSelected(props.item) }"
              >
                <v-toolbar flat dense>
                  <v-btn
                    small
                    color="primary"
                    dark
                    @click="openEdit(props.item)"
                    >ubah <v-icon small right dark>edit</v-icon></v-btn
                  >
                  <v-divider vertical></v-divider>
                  <v-btn
                    small
                    color="danger"
                    dark
                    @click="confirmDelete(props.item)"
                    >hapus <v-icon small right dark>clear</v-icon></v-btn
                  >
                </v-toolbar>
              </td>
            </template>
            <template v-slot:no-results>
              <v-alert :value="true" color="error" icon="warning">
                Pencarian "{{ xsearch }}" tiada hasil.
              </v-alert>
            </template>
          </v-data-table>
        </div>
        <v-divider></v-divider>
        <v-flex xs12 class="text-xs-left pt-3 pb-3">
          <v-pagination
            v-model="curr_page"
            :length="xtotal_page"
          ></v-pagination>
        </v-flex>
        <!-- End Pagination -->
      </v-card>
    </v-flex>
  </v-layout>
</template>
<script>
module.exports = {
  data() {
    return {
      windowHeight: window.innerHeight - 360 + "px",
      xName: "",
      xCode: "",
      xPriority: "",
      xFoOrder: "N",
      xServiceOnline: "N",
      xIsConsultDoctor: "N",
      xNameDoctor: "",
      act: "",
      nameErrorMessage: "",
      kodeErrorMessage: "",
      priorityErrorMessage: "",
      nameDoctorErrorMessage: "",
      clr: "success",
      dialogdeletealert: false,
      isConsultDoctor: false,
      msgalert: "",
      headers: [
        {
          text: "KODE",
          align: "left",
          sortable: false,
          sort: true,
          value: "serviceCode",
          width: "10%",
          class: "pa-2 blue darken-3 white--text",
        },
        {
          text: "NAMA LAYANAN",
          align: "center",
          sortable: false,
          sort: true,
          value: "serviceName",
          width: "25%",
          width: "30%",
          class: "pa-2 blue darken-3 white--text",
        },
        {
          text: "PRIORITAS",
          align: "center",
          sortable: false,
          sort: true,
          value: "servicePriority",
          width: "25%",
          class: "pa-2 blue darken-3 white--text",
        },
        {
          text: "FO ORDER",
          align: "center",
          sortable: false,
          sort: true,
          value: "serviceIsFoOrder",
          width: "25%",
          class: "pa-2 blue darken-3 white--text",
        },
        {
          text: "LAYANAN ONLINE",
          align: "center",
          sortable: false,
          sort: true,
          value: "serviceIsOnline",
          width: "25%",
          class: "pa-2 blue darken-3 white--text",
        },
        {
          text: "KONSULTASI DOKTER",
          align: "center",
          sortable: false,
          sort: true,
          value: "serviceIsConsultDoctor",
          width: "25%",
          class: "pa-2 blue darken-3 white--text",
        },
        {
          text: "NAMA DOKTER",
          align: "center",
          sortable: false,
          sort: true,
          value: "serviceDoctorName",
          width: "25%",
          class: "pa-2 blue darken-3 white--text",
        },
        {
          text: "AKSI",
          align: "center",
          sortable: false,
          sort: false,
          value: "rm",
          width: "15%",
          width: "10%",
          class: "pa-2 blue darken-3 white--text",
        },
      ],
    };
  },
  mounted() {
    this.$store.dispatch("service/lookup");
  },
  computed: {
    getService() {
      return this.$store.state.service.service;
    },
    xsearch: {
      get() {
        return this.$store.state.service.x_search;
      },
      set(val) {
        this.$store.commit("service/update_x_search", val);
      },
    },
    curr_page: {
      get() {
        return this.$store.state.service.current_page;
      },
      set(val) {
        this.$store.commit("service/update_current_page", val);
        this.$store.dispatch("service/lookup");
      },
    },
    xtotal_page: {
      get() {
        return this.$store.state.service.total;
      },
      set(val) {
        this.$store.commit("service/update_total_page", val);
      },
    },
    isLoading() {
      return this.$store.state.service.search_status;
    },
    sorting: {
      get() {
        return this.$store.state.service.sorting;
      },
      set(val) {
        this.$store.commit("service/update_sorting", val);
      },
    },
    dialog_form: {
      get() {
        return this.$store.state.service.dialog_form;
      },
      set(val) {
        this.$store.commit("service/update_dialog_form", val);
      },
    },
    saveStatus() {
      return this.$store.state.service.save_status;
    },
    selected_item: {
      get() {
        return this.$store.state.service.selected_item;
      },
      // set(val) {
      //   this.$store.commit("supplier/update_selected_supplier", val);
      // },
    },
    snackbar: {
      get() {
        return this.$store.state.service.snackbar;
      },
      set(val) {
        this.$store.commit("service/update_snackbar", val);
      },
    },
    msgsnackbar() {
      return this.$store.state.service.success_message;
    },
    dialog_error: {
      get() {
        return this.$store.state.service.alert_error;
      },
      set(val) {
        this.$store.commit("service/update_alert_error", val);
      },
    },
    msgError() {
      return this.$store.state.service.error_message;
    },
  },
  methods: {
    changeSort(value, sort, header) {
      if (header.sort) {
        var newVal = value;
        var newSort = sort == "asc" ? "desc" : "asc";
        if (newVal !== this.sorting.sortBy) newSort = "asc";
        this.sorting = { type: newSort, sortBy: newVal };
        this.$store.dispatch("service/lookup");
      }
    },
    nameValidation() {
      if (!/\S/.test(this.xName)) {
        this.nameErrorMessage = "Nama tidak boleh kosong";
      }
      if (/\S/.test(this.xName)) {
        this.nameErrorMessage = "";
      }
    },
    kodeValidation() {
      if (!/\S/.test(this.xCode)) {
        this.kodeErrorMessage = "Kode tidak boleh kosong";
      }
      if (/\S/.test(this.xCode)) {
        this.kodeErrorMessage = "";
      }
    },
    priorityValidation() {
      if (!/\S/.test(this.xPriority)) {
        this.priorityErrorMessage = "Priority tidak boleh kosong";
      }
      if (/\S/.test(this.xPriority)) {
        this.priorityErrorMessage = "";
      }
    },
    nameDoctorValidation() {
      if (!/\S/.test(this.xNameDoctor)) {
        this.nameDoctorErrorMessage = "Nama Dokter tidak boleh kosong";
      }
      if (/\S/.test(this.xNameDoctor)) {
        this.nameDoctorErrorMessage = "";
      }
    },
    // onchange konsultasi dokter
    onChangeIsConsultDoctor() {
      if (this.xIsConsultDoctor === "Y") {
        this.isConsultDoctor = true;
      } else {
        this.nameDoctorErrorMessage = "";
        this.isConsultDoctor = false;
      }
    },
    openAdd() {
      this.xName = "";
      this.xCode = "";
      this.xPriority = "";
      this.xNameDoctor = "";
      this.act = "add";
      this.dialog_form = true;
    },
    addItem() {
      this.kodeValidation();
      this.nameValidation();
      this.priorityValidation();

      // klu konsultasi dokter = 'Y' check nama dokter
      if (this.xIsConsultDoctor === "Y") {
        this.nameDoctorValidation();
      }
      if (this.xIsConsultDoctor === "N") {
        this.nameDoctorErrorMessage == "";
        this.xNameDoctor = "";
      }

      prm = {
        code: this.xCode,
        name: this.xName,
        priority: this.xPriority,
        foOrder: this.xFoOrder,
        serviceOnline: this.xServiceOnline,
        isConsultDoctor: this.xIsConsultDoctor,
        nameDoctor: this.xNameDoctor,
      };
      if (
        this.nameErrorMessage == "" &&
        this.kodeErrorMessage == "" &&
        this.priorityErrorMessage == "" &&
        this.nameDoctorErrorMessage == ""
      ) {
        this.$store.dispatch("service/addData", prm);
      }
    },
    closeDialog() {
      this.xName = "";
      this.xCode = "";
      this.xPriority = "";
      this.kodeErrorMessage = "";
      this.nameErrorMessage = "";
      this.priorityErrorMessage = "";
      this.dialog_form = false;
    },
    openEdit(data) {
      this.selectMe(data);
      this.xName = data.serviceName;
      this.xCode = data.serviceCode;
      this.xPriority = data.servicePriority;
      this.xFoOrder = data.serviceIsFoOrder;
      this.xServiceOnline = data.serviceIsOnline;
      this.xIsConsultDoctor = data.serviceIsConsultDoctor;
      if (data.serviceIsConsultDoctor === "Y") {
        this.isConsultDoctor = true;
      } else {
        this.isConsultDoctor = false;
      }
      this.xNameDoctor = data.serviceDoctorName;
      this.act = "edit";
      this.dialog_form = true;
    },
    selectMe(sc) {
      this.$store.commit("service/update_selected_item", sc);
    },
    isSelected(p) {
      return p.serviceID == this.selected_item.serviceID;
    },
    editItem() {
      this.kodeValidation();
      this.nameValidation();
      this.priorityValidation();

      if (this.xIsConsultDoctor === "Y") {
        this.nameDoctorValidation();
      }
      if (this.xIsConsultDoctor === "N") {
        this.nameDoctorErrorMessage == "";
        this.xNameDoctor = "";
      }

      prm = {
        id: this.selected_item.serviceID,
        code: this.xCode,
        name: this.xName,
        priority: this.xPriority,
        foOrder: this.xFoOrder,
        serviceOnline: this.xServiceOnline,
        isConsultDoctor: this.xIsConsultDoctor,
        nameDoctor: this.xNameDoctor,
      };
      if (
        this.nameErrorMessage == "" &&
        this.kodeErrorMessage == "" &&
        this.priorityErrorMessage == "" &&
        this.nameDoctorErrorMessage == ""
      ) {
        this.$store.dispatch("service/editData", prm);
      }
    },
    confirmDelete(data) {
      this.selectMe(data);
      this.xName = data.serviceName;
      this.msgalert = "Yakin, mau hapus layanan " + data.serviceName + " ?";
      this.dialogdeletealert = true;
    },
    deleteItem() {
      prm = { name: this.xName, id: this.selected_item.serviceID };
      this.$store.dispatch("service/deleteData", prm);
      this.dialogdeletealert = false;
    },
    thr_search: _.debounce(function () {
      this.$store.dispatch("service/lookup");
    }, 1000),
  },
  watch: {
    xsearch(val, old) {
      this.xsearch = val;
      this.thr_search();
    },
  },
};
</script>
