<script setup lang="ts">
import { computed } from 'vue'
import { NDatePicker } from 'naive-ui'

const props = defineProps<{ df: any; record: Record<string, any>; canEdit: boolean; ctx: any }>()

const labelLayout = computed(() => props.df.label_layout || 'vertical')

const dateValue = computed({
  get() {
    const val = props.record[props.df.fieldname]
    if (!val) return null
    if (typeof val === 'number') return val
    const timestamp = new Date(val).getTime()
    return isNaN(timestamp) ? null : timestamp
  },
  set(newVal: number | null) {
    if (newVal === null) {
      props.record[props.df.fieldname] = null
    } else {
      props.record[props.df.fieldname] = new Date(newVal).toISOString().replace('T', ' ').substring(0, 23)
    }
  }
})
</script>

<template>
  <div :class="['field-wrapper', `layout-${labelLayout}`]">
    <label class="field-label">
      {{ ctx.t(df.label || df.fieldname) }}
      <span v-if="df.reqd" class="required">*</span>
    </label>
    <n-date-picker 
      v-model:value="dateValue" 
      type="datetime"
      placeholder=""
      :disabled="!canEdit"
    />
  </div>
</template>

<style scoped>
.field-wrapper :deep(.n-date-picker) {
  flex: 1;
}
</style>


