<template>
  <div>
    <v-card class="mb-0 pa-2 mt-0 pt-0">
      <v-tabs v-model="tab" align-tabs="center" color="primary" grow>
        <v-tab :value="1">DEMOGRAFI</v-tab>
        <v-tab :value="2">PEMERIKSAAN</v-tab>
        <v-tab :value="3">KIRIM HASIL</v-tab>
        <v-tab disabled :value="4">PEMBAYARAN</v-tab>
      </v-tabs>
    </v-card>

    <v-tabs-window v-model="tab">
      <v-tabs-window-item v-for="n in 3" :key="n" :value="n">
        <v-row class="no-gutters">
          <v-col cols="12" md="6" sm="12" xs="12" class="mt-3 pr-1">
            <datatable-patient v-if="tab === 1"></datatable-patient>
          </v-col>
          <v-col cols="12" md="6" sm="12" xs="12" class="pl-1 mt-3">
            <form-patient v-if="tab === 1"></form-patient>
          </v-col>
        </v-row>
      </v-tabs-window-item>
    </v-tabs-window>
  </div>
</template>

<script type="module">
import DatatablePatient from "./datatable_patient.vue";
import FormPatient from "./form_patient.vue";
export default {
  name: "filtercomp",
  components: {
    "datatable-patient": DatatablePatient,
    "form-patient": FormPatient,
  },
  mounted() {},
  data() {
    return {
      menu: false,
      visible: false,
      tab: null,
    };
  },
  computed: {
    date: {
      get() {
        return this.$store.state.collection.date;
      },
      set(val) {
        this.$store.commit("setDate", val);
      },
    },
    temp_dropdown: {
      get() {
        return this.$store.state.collection.temp_dropdown;
      },
    },
  },
  methods: {
    formatDate() {
      if (!this.date) return null;

      return moment(this.date).format("DD-MM-YYYY");
    },
    deFormatedDate(date) {
      if (!date) return null;
      const [day, month, year] = date.split("-");
      return `${year}-${month.padStart(2, "0")}-${day.padStart(2, "0")}`;
    },
  },
};
</script>

<style scoped>
.pointer {
  cursor: pointer;
}
</style>
