<template>
  <div>
    <v-card-subtitle
      class="bg-grey-lighten-4 text-subtitle-2 font-weight-medium py-2"
    >
      KESEHATAN
    </v-card-subtitle>

    <v-card-text>
      <v-row>
        <!-- Golongan Darah -->
        <v-col cols="12" md="6">
          <v-select
            v-model="localData.golonganDarah"
            label="Golongan Darah"
            :items="golonganDarahOptions"
            variant="outlined"
            density="compact"
          />
        </v-col>

        <!-- Status Perokok -->
        <v-col cols="12" md="6">
          <v-select
            v-model="localData.statusPerokok"
            label="Status Perokok"
            :items="statusPerokokOptions"
            variant="outlined"
            density="compact"
          />
        </v-col>

        <!-- Jenis Penyakit -->
        <v-col cols="12">
          <v-select
            v-model="localData.jenisPenyakit"
            label="Jenis Penyakit"
            :items="jenisPenyakitOptions"
            variant="outlined"
            density="compact"
            multiple
            chips
            closable-chips
            placeholder="Pilih Jenis Penyakit"
          />
        </v-col>
      </v-row>
    </v-card-text>
  </div>
</template>

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

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

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

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

const golonganDarahOptions = [
  { title: "A", value: "A" },
  { title: "B", value: "B" },
  { title: "AB", value: "AB" },
  { title: "O", value: "O" }
];

const statusPerokokOptions = [
  { title: "Tidak Merokok", value: "tidak" },
  { title: "Perokok Aktif", value: "aktif" },
  { title: "Perokok Pasif", value: "pasif" },
  { title: "Mantan Perokok", value: "mantan" }
];

const jenisPenyakitOptions = [
  "Diabetes",
  "Hipertensi",
  "Jantung",
  "Asma",
  "TBC",
  "Hepatitis",
  "HIV/AIDS",
  "Kanker",
  "Ginjal",
  "Stroke"
];

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