<template>
  <div>
    <v-dialog persistent max-width="500" v-model="dialogDelete">
      <v-card>
        <v-toolbar
          elevation="4"
          :title="$t('message.deleteTitle')"
          color="primary"
        ></v-toolbar>
        <v-card-text>
          {{ $t("message.deleteMsg") }}
          {{ this.selectedLocation.locationName }} ?</v-card-text
        >

        <v-card-actions class="px-5">
          <v-spacer></v-spacer>

          <v-btn
            color="error"
            size="large"
            :text="$t('message.form.close')"
            @click="dialogDelete = false"
          ></v-btn>
          <v-btn
            size="large"
            color="primary"
            :text="$t('message.form.deleteBtn')"
            @click="dialogDelete = false"
          ></v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
    <v-dialog persistent max-width="500" v-model="dialogForm">
      <v-card>
        <v-toolbar
          elevation="4"
          :title="action === 'add'? $t('message.form.add'):$t('message.form.edit')"
          color="primary"
        ></v-toolbar>
        <v-card-text>
          <v-text-field
            v-model="inpLocation"
            :label="$t('message.form.lokasi')"
            variant="outlined"
          ></v-text-field>
          <v-autocomplete
            :label="$t('message.form.station')"
            :items="stationList"
            item-title="name"
            return-object
            v-model="selectedStation"
            item-value="name"
            variant="outlined"
          ></v-autocomplete>
          <v-text-field
            v-model="inpPriority"
            type="number"
            :label="$t('message.form.prioritas')"
            variant="outlined"
          ></v-text-field>
        </v-card-text>

        <v-card-actions class="px-5">
          <v-spacer></v-spacer>

          <v-btn
            color="error"
            size="large"
            :text="$t('message.form.close')"
            @click="dialogForm = false"
          ></v-btn>

          <v-btn
            size="large"
            color="primary"
            :text="action === 'add'? $t('message.form.save'): $t('message.form.saveEdit')"
            @click="saveData()"
          ></v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
    <v-container class="bg-white rounded-lg" fluid>
      <v-data-table-server
        :items-per-page-options="itemsPerPageOption"
        v-model:items-per-page="itemsPerPage"
        :headers="headers"
        :items="locationList"
        height="63vh"
        :items-length="totalItems"
        :loading="loading"
        :search="search"
        @update:options="coba"
      >
        <template v-slot:item="{ item }">
          <tr
            @click="selectMe(item)"
            v-bind:class="{'bg-secondary-lighten':isSelected(item)}"
          >
            <td>{{ item.locationName }}</td>
            <td>{{ item.stationName }}</td>
            <td>{{ item.priority }}</td>
            <td class="text-center">
              <v-btn
                :disabled="loading"
                variant="plain"
                width="40px"
                @click="openDialogEdit(item)"
                min-width="40px"
                color="primary"
              >
                <span
                  class="iconify secondary"
                  data-icon="fluent:edit-24-regular"
                  data-inline="false"
                  style="font-size: 24px;"
                ></span>
              </v-btn>
              <!-- <v-btn
                color="error"
                size="large"
                :text="$t('message.form.close')"
                @click="openDialogInfo()"
              ></v-btn> -->
              <v-btn
                @click="openDialogDelete(item)"
                :disabled="loading"
                variant="plain"
                width="40px"
                min-width="40px"
                color="error"
              >
                <span
                  class="iconify error"
                  data-icon="fluent:delete-24-regular"
                  style="font-size: 24px;"
                ></span>
              </v-btn>
            </td>
          </tr>
        </template>
      </v-data-table-server>
    </v-container>
  </div>
</template>

<style scoped>
  .row-pointer >>> tbody tr :hover {
    cursor: pointer;
  }
</style>

<script type="module">
  export default {
    name: "ListPatient",
    data() {
      return {
        cobaHtml: "coba",
        itemsPerPageOption: [
          { value: 2, title: "2" },
          { value: 5, title: "5" },
          { value: 10, title: "10" },
          { value: 25, title: "25" },
          { value: 50, title: "50" },
        ],
        headers: [
          {
            align: "start",
            key: "locationName",
            sortable: true,
            width: "35%",
            title: this.$t("message.tableListPatient.lokasi"),
            class: "font-weight-bold",
          },
          {
            align: "start",
            key: "stationName",
            sortable: true,
            width: "35%",
            title: this.$t("message.tableListPatient.station"),
            class: "font-weight-bold",
          },
          {
            align: "start",
            key: "priority",
            sortable: true,
            width: "20%",
            title: this.$t("message.tableListPatient.prioritas"),
            class: "font-weight-bold",
          },
          {
            align: "center",
            key: "name",
            sortable: false,
            width: "10%",
            title: this.$t("message.tableListPatient.aksi"),
            class: "font-weight-bold",
          },
        ],
      };
    },
    mounted() {
      //   Iconify.scan();
      this.$store.dispatch("lokasi/search");
    },
    computed: {
      dialogInfo: {
        get() {
          return this.$store.state.lokasi.dialogInfo;
        },
        set(val) {
          this.$store.commit("lokasi/update_dialogInfo", val);
        },
      },
      snackbar: {
        get() {
          return this.$store.state.lokasi.snackbar;
        },
        set(val) {
          this.$store.commit("lokasi/update_snackbar", val);
        },
      },
      dialogDelete: {
        get() {
          return this.$store.state.lokasi.dialogDelete;
        },
        set(val) {
          this.$store.commit("lokasi/update_dialogDelete", val);
        },
      },
      action: {
        get() {
          return this.$store.state.lokasi.action;
        },
        set(val) {
          this.$store.commit("lokasi/update_action", val);
        },
      },
      stationList: {
        get() {
          return this.$store.state.lokasi.stationList;
        },
        set(val) {
          this.$store.commit("lokasi/update_stationList", val);
        },
      },
      selectedStation: {
        get() {
          return this.$store.state.lokasi.selectedStation;
        },
        set(val) {
          this.$store.commit("lokasi/update_selectedStation", val);
        },
      },
      dialogForm: {
        get() {
          return this.$store.state.lokasi.dialogForm;
        },
        set(val) {
          this.$store.commit("lokasi/update_dialogForm", val);
        },
      },
      sortBy: {
        get() {
          return this.$store.state.lokasi.sortBy;
        },
        set(val) {
          this.$store.commit("lokasi/update_sortBy", val);
        },
      },
      orderBy: {
        get() {
          return this.$store.state.lokasi.orderBy;
        },
        set(val) {
          this.$store.commit("lokasi/update_orderBy", val);
        },
      },
      locationListTmp: {
        get() {
          return this.$store.state.lokasi.locationListTmp;
        },
        set(val) {
          this.$store.commit("lokasi/update_locationListTmp", val);
        },
      },
      locationList: {
        get() {
          return this.$store.state.lokasi.locationList;
        },
        set(val) {
          this.$store.commit("lokasi/update_locationList", val);
        },
      },
      totalItems: {
        get() {
          return this.$store.state.lokasi.totalItems;
        },
        set(val) {
          this.$store.commit("lokasi/update_totalItems", val);
        },
      },
      loading: {
        get() {
          return this.$store.state.lokasi.loading;
        },
        set(val) {
          this.$store.commit("lokasi/update_loading", val);
        },
      },
      search: {
        get() {
          return this.$store.state.lokasi.search;
        },
        set(val) {
          this.$store.commit("lokasi/update_search", val);
        },
      },
      itemsPerPage: {
        get() {
          return this.$store.state.lokasi.itemsPerPage;
        },
        set(val) {
          this.$store.commit("lokasi/update_itemsPerPage", val);
        },
      },
      page: {
        get() {
          return this.$store.state.lokasi.page;
        },
        set(val) {
          this.$store.commit("lokasi/update_page", val);
        },
      },
      xpatients() {
        return this.$store.state.sendtofo.patients;
      },
      selectedLocation: {
        get() {
          return this.$store.state.lokasi.selectedLocation;
        },
        set(val) {
          this.$store.commit("lokasi/update_selectedLocation", val);
        },
      },
      inpLocation: {
        get() {
          return this.$store.state.lokasi.inpLocation;
        },
        set(val) {
          this.$store.commit("lokasi/update_inpLocation", val);
        },
      },
      inpPriority: {
        get() {
          return this.$store.state.lokasi.inpPriority;
        },
        set(val) {
          this.$store.commit("lokasi/update_inpPriority", val);
        },
      },
    },
    methods: {
      saveData() {
        this.dialogForm = false;
        let snackbar = {
          model: true,
          type: "success",
          message: "coba",
          multiLine: true,
          location: "top",
          timeout: 1500,
        };
        this.snackbar = snackbar;
        let df = {
          title: "INFORMATION",
          model: true,
          color: "primary",
          message: "information",
        };
        this.dialogInfo = df;
      },
      openDialogInfo() {
        let df = {
          title: "INFORMATION",
          model: true,
          color: "primary",
          message: "information",
        };
        this.dialogInfo = df;
      },
      openDialogDelete(data) {
        this.selectMe(data);
        this.dialogDelete = true;
        let snackbar = {
          model: true,
          type: "success",
          message: "coba",
          multiLine: true,
          location: "top",
          timeout: 1500,
        };
        this.snackbar = snackbar;
      },
      openDialogEdit(data) {
        this.action = "edit";
        this.dialogForm = true;
        this.inpLocation = data.locationName;
        this.inpPriority = data.priority;
        this.selectedStation = {
          id: 2,
          name: data.stationName,
        };
      },
      getIcon(iconName) {
        return `<span class="iconify" data-icon="${iconName}" data-inline="false"></span>`;
      },
      selectMe(item) {
        if (this.loading == true) return;
        this.selectedLocation = item;
      },
      async coba({ page, itemsPerPage, sortBy, search }) {
        this.page = page;
        if (sortBy[0] != undefined) {
          this.sortBy = sortBy[0]["key"];
          this.orderBy = sortBy[0]["order"];
        }
        this.$store.dispatch("lokasi/search");
      },
      isSelected(p) {
        return p.id == this.$store.state.lokasi.selectedLocation.id;
      },
      //   selectMe(data) {
      //     this.$store.commit("sendtofo/setSelectedPatient", data);
      //     this.$store.commit("sendtofo/setSelectedDetail", data);
      //   },
    },
    wacth: {},
  };
</script>
