import type { Config } from '~/components/pub/my-ui/data-table'
import { defineAsyncComponent } from 'vue'

const action = defineAsyncComponent(() => import('./_common/dropdown-action.vue'))
const statusBadge = defineAsyncComponent(() => import('./_common/verify-badge.vue'))
const resultData = defineAsyncComponent(() => import('./_common/card-result.vue'))

export const config: Config = {
  cols: [{}, { width: 800 }, {}, { width: 120 }, { width: 3 },],

  headers: [
    [
      { label: 'Tanggal' },
      { label: 'Hasil Asesmen Pasien Dan Pemberian Pelayanan' },
      { label: 'Jenis Form' },
      { label: 'Status' },
      { label: 'Action' },
    ],
  ],

  keys: ['date', 'result', 'type', 'status', 'action'],

  parses: {
    date: (rec: unknown): unknown => {
      const date = (rec as any).date

      if (typeof date == 'object' && date) {
        return (date as Date).toLocaleDateString('id-ID')
      } else if (typeof date == 'string') {
        return (date as string).substring(0, 10)
      }
      return date
    },
  },

  components: {
    result(rec, idx) {
      return {
        idx,
        rec: rec as object,
        component: resultData,
      }
    },
    action(rec, idx) {
      return {
        idx,
        rec: rec as object,
        component: action,
      }
    },
    status(rec, idx) {
      return {
        idx,
        rec: rec as object,
        component: statusBadge,
      }
    },
  },
}
