<template>
  <v-card>
    <v-card-title class="d-flex justify-space-between align-center">
      <span class="text-h6">JENIS PENDAFTARAN</span>
      <v-btn variant="text" color="primary" size="small" @click="resetSection">
        Atur Ulang
      </v-btn>
    </v-card-title>

    <v-card-text>
      <v-row>
        <v-col cols="12" md="6">
          <div class="mb-2">
            <span class="text-subtitle-2">
              Jenis Kunjungan <span class="text-red">*</span>
            </span>
          </div>
          <v-radio-group
            v-model="localData.visitType"
            :rules="[rules.required]"
            inline
          >
            <v-radio label="Kunjungan Sakit" value="sakit" />
            <v-radio label="Kunjungan Sehat" value="sehat" />
          </v-radio-group>
        </v-col>
      </v-row>

      <v-row>
        <v-col cols="12" md="6">
          <v-select
            v-model="localData.treatmentType"
            :items="treatmentTypes"
            label="Jenis Perawatan"
            variant="outlined"
            density="compact"
            :rules="[rules.required]"
            append-inner-icon="mdi-chevron-down"
          >
            <template v-slot:label>
              Jenis Perawatan <span class="text-red">*</span>
            </template>
          </v-select>
        </v-col>

        <v-col cols="12" md="6">
          <v-select
            v-model="localData.triage"
            :items="triageOptions"
            label="Triase"
            variant="outlined"
            density="compact"
            placeholder="Pilih"
            clearable
            append-inner-icon="mdi-chevron-down"
          />
        </v-col>
      </v-row>
    </v-card-text>
  </v-card>
</template>

<script setup>
import { ref, watch } from "vue";

const props = defineProps({
  registrationData: {
    type: Object,
    required: true
  }
});

const emit = defineEmits(["update:registrationData", "update"]);

const localData = ref({ ...props.registrationData });

const treatmentTypes = ["Rawat Jalan", "Rawat Inap", "IGD"];

const triageOptions = [
  { title: "Merah (Emergency)", value: "merah" },
  { title: "Kuning (Urgent)", value: "kuning" },
  { title: "Hijau (Less Urgent)", value: "hijau" },
  { title: "Hitam (Non Urgent)", value: "hitam" }
];

const rules = {
  required: (value) => !!value || "Field ini wajib diisi"
};

const resetSection = () => {
  localData.value = {
    visitType: "",
    treatmentType: "Rawat Jalan",
    triage: ""
  };
};

watch(
  localData,
  (newVal) => {
    emit("update:registrationData", newVal);
    emit("update");
  },
  { deep: true }
);
</script>
