<script setup lang="ts">
import Block from '~/components/pub/my-ui/doc-entry/block.vue'
import Cell from '~/components/pub/my-ui/doc-entry/cell.vue'
import Field from '~/components/pub/my-ui/doc-entry/field.vue'
import Label from '~/components/pub/my-ui/doc-entry/label.vue'

const props = defineProps<{
  excludeFields?: string[]
}>()

const emits = defineEmits(['click'])

const subject = ref({
  'prim-compl': '',
  'sec-compl': '',
  'cur-disea-hist': '',
  'pas-disea-hist': '',
  'fam-disea-hist': '',
  'alg-hist': '',
  'alg-react': '',
  'med-hist': '',
  'blood-type': '',
})

const isExcluded = (key: string) => props.excludeFields?.includes(key)
</script>

<template>
  <form id="entry-form">
    <div class="mb-5 border-b border-b-slate-300 pb-3 text-lg xl:text-xl">
      <Block>
        <Cell>
          <Label dynamic>Sudah Vaksin</Label>
          <Field>
            <RadioGroup class="flex gap-4">
              <div class="flex items-center space-x-2">
                <RadioGroupItem id="vaksin-yes" value="yes" />
                <Label for="vaksin-yes">Sudah</Label>
              </div>
              <div class="flex items-center space-x-2">
                <RadioGroupItem id="vaksin-no" value="no" />
                <Label for="vaksin-no">Belum</Label>
              </div>
            </RadioGroup>
          </Field>
        </Cell>

        <Cell>
          <Label dynamic>Kasus</Label>
          <Field>
            <RadioGroup class="flex gap-4">
              <div class="flex items-center space-x-2">
                <RadioGroupItem id="kasus-baru" value="baru" />
                <Label for="kasus-baru">Baru</Label>
              </div>
              <div class="flex items-center space-x-2">
                <RadioGroupItem id="kasus-lama" value="lama" />
                <Label for="kasus-lama">Lama</Label>
              </div>
            </RadioGroup>
          </Field>
        </Cell>

        <Cell>
          <Label dynamic>Kunjungan</Label>
          <Field>
            <RadioGroup class="flex gap-4">
              <div class="flex items-center space-x-2">
                <RadioGroupItem id="kunjungan-baru" value="baru" />
                <Label for="kunjungan-baru">Baru</Label>
              </div>
              <div class="flex items-center space-x-2">
                <RadioGroupItem id="kunjungan-lama" value="lama" />
                <Label for="kunjungan-lama">Lama</Label>
              </div>
            </RadioGroup>
          </Field>
        </Cell>
      </Block>

      <Block :colCount="2">
        <!-- Riwayat Penyakit -->
        <Cell>
          <Label dynamic>Keluhan Utama</Label>
          <Field>
            <Textarea placeholder="Masukkan anamnesa pasien" />
          </Field>
        </Cell>
        <Cell>
          <Label dynamic>Riwayat Penyakit</Label>
          <Field>
            <Textarea
              placeholder="Masukkan anamnesa pasien (Riwayat Penyakit Sekarang, Dahulu, Pengobatan, Keluarga, dll)"
            />
          </Field>
        </Cell>
        <Cell>
          <Label dynamic>SpO₂</Label>
          <Field>
            <Input type="number" placeholder="%" />
          </Field>
        </Cell>

        <Cell>
          <Label dynamic>Tekanan Darah Sistol</Label>
          <Field>
            <Input type="number" placeholder="mmHg" />
          </Field>
        </Cell>

        <Cell>
          <Label dynamic>Tekanan Darah Diastol</Label>
          <Field>
            <Input type="number" placeholder="mmHg" />
          </Field>
        </Cell>

        <Cell>
          <Label dynamic>Respirasi</Label>
          <Field>
            <Input type="number" placeholder="kali/menit" />
          </Field>
        </Cell>

        <Cell>
          <Label dynamic>Nadi</Label>
          <Field>
            <Input type="number" placeholder="kali/menit" />
          </Field>
        </Cell>

        <Cell>
          <Label dynamic>Temperatur</Label>
          <Field>
            <Input type="number" placeholder="℃" />
          </Field>
        </Cell>

        <Cell>
          <Label dynamic>Berat Badan</Label>
          <Field>
            <Input type="number" placeholder="Kg" />
          </Field>
        </Cell>

        <Cell>
          <Label dynamic>Tinggi Badan</Label>
          <Field>
            <Input type="number" placeholder="Cm" />
          </Field>
        </Cell>

        <Cell>
          <Label dynamic>Golongan Darah</Label>
          <Field>
            <Select :options="bloodGroups" />
          </Field>
        </Cell>

        <Cell>
          <Label dynamic>Pemeriksaan Fisik (Yang Mendukung)</Label>
          <Field>
            <Textarea placeholder="Masukkan pemeriksaan fisik" />
          </Field>
        </Cell>

        <!-- Prosedur -->
        <Cell>
          <Label dynamic>Diagnosa (ICD-X)</Label>
          <Field>
            <Button
              class="rounded bg-orange-100 px-3 py-1 text-orange-600"
              type="button"
              @click="emits('click', 'diagnosa')"
              >+ Pilih Diagnosa</Button
            >
          </Field>
        </Cell>
        <!-- Diagnosa -->
        <Cell>
          <Label dynamic>Diagnosa (ICD-X)</Label>
          <Field>
            <Button
              class="rounded bg-orange-100 px-3 py-1 text-orange-600"
              type="button"
              @click="emits('click', 'prosedur')"
              >+ Pilih Prosedur</Button
            >
          </Field>
        </Cell>
      </Block>

      <div class="mb-8 grid grid-cols-2 gap-4">
        <AppIcdPreview />
        <AppIcdPreview />
      </div>

      <Block :colCount="3">
        <Cell>
          <Label dynamic>Diagnosa Medis</Label>
          <Field>
            <Textarea />
          </Field>
        </Cell>

        <Cell>
          <Label dynamic>Rencana Awal Medis</Label>
          <Field>
            <Textarea />
          </Field>
        </Cell>

        <Cell>
          <Label dynamic>Terapi</Label>
          <Field>
            <Textarea />
          </Field>
        </Cell>
      </Block>
    </div>
  </form>
</template>
