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

    <v-card-text>
      <v-row>
        <v-col cols="12">
          <v-select
            v-model="localData.jenisPembayaran"
            label="Pembayaran"
            :items="pembayaranOptions"
            variant="outlined"
            density="compact"
            :rules="[rules.required]"
            required
          />
        </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 rules = {
  required: v => !!v || 'Field ini wajib diisi'
}

const pembayaranOptions = [
  { title: 'BPJS', value: 'BPJS' },
  { title: 'Umum', value: 'UMUM' },
  { title: 'Asuransi', value: 'ASURANSI' },
  { title: 'Perusahaan', value: 'PERUSAHAAN' }
]

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