<template>
  <div>
    <v-card class="pa-4 rounded-lg" elevation="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 4" :key="n" :value="n">
        <v-row no-gutters>
          
          <!-- left side-->
          <v-col cols="12" md="6" sm="12" xs="12" class="mt-4 pr-2">
            <datatable-patient v-if="tab === 1"></datatable-patient>
            <div v-else-if="tab === 2">
              <form-agreement></form-agreement>
              <form-pemeriksaan class="mt-4"></form-pemeriksaan>
            </div>
            <div v-else-if="tab === 3">KIRIM HASIL</div>
            <div v-else>PEMBAYARAN</div>
          </v-col>
          
          <!-- right side -->
          <v-col cols="12" md="6" sm="12" xs="12" class="mt-4 pl-2">
            <form-patient v-if="tab === 1"></form-patient>
            <form-pengirim class="mt-4" v-if="tab === 1"></form-pengirim>
            <detail-order v-if="tab === 2"></detail-order>
          </v-col>
        </v-row>
      </v-tabs-window-item>
    </v-tabs-window>
  </div>
</template>

<script type="module">
import DatatablePatient from "./datatable_patient.vue";
import Detail_order from "./detail_order.vue";
import FormPatient from "./form_patient.vue";
import Form_pemeriksaan from "./form_pemeriksaan.vue";
import FormPengirim from "./form_pengirim.vue";
import Kelpelanggan_agreement from "./kelpelanggan_agreement.vue";
export default {
  name: "filtercomp",
  components: {
    "datatable-patient": DatatablePatient,
    "form-patient": FormPatient,
    "form-pengirim": FormPengirim,
    "form-agreement": Kelpelanggan_agreement,
    "form-pemeriksaan": Form_pemeriksaan,
    "detail-order": Detail_order,
  },
  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>
