import { defineAsyncComponent } from 'vue'

import { format } from 'date-fns'
import { id } from 'date-fns/locale'

import type { Config, RecComponent } from '~/components/pub/my-ui/data-table'
import type { ActionReportData } from '~/components/app/action-report/sample'
const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-d.vue'))

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

  headers: [
    [
      { label: 'TANGGAL LAPORAN' },
      { label: 'DPJP' },
      { label: 'OPERATOR' },
      { label: 'TANGGAL PEMBEDAHAN' },
      { label: 'JENIS OPERASI' },
      { label: 'KODE BILLING' },
      { label: 'SISTEM OPERASI' },
      { label: 'AKSI' },
    ],
  ],

  keys: ['reportAt', 'dpjp', 'operator', 'operationAt', 'operationType', 'billing', 'system', 'action'],

  delKeyNames: [
    { key: 'code', label: 'Kode' },
    { key: 'name', label: 'Nama' },
  ],

  parses: {
    reportAt: (rec: unknown): unknown => {
      const attr = (rec as ActionReportData).reportAt
      const result = format(new Date(attr), 'd MMMM yyyy, HH:mm', { locale: id })

      return result
    },
    operationAt: (rec: unknown): unknown => {
      const attr = (rec as ActionReportData).operationAt
      const result = format(new Date(attr), 'd MMMM yyyy', { locale: id })

      return result
    },
    system: (rec: unknown): unknown => {
      return 'Cito'
    },
    operator: (rec: unknown): unknown => {
      return 'dr. Dewi Arum Sawitri, Sp.An'
    },
    billing: (rec: unknown): unknown => {
      return 'General'
    },
    operationType: (rec: unknown): unknown => {
      return 'Besar'
    },
    dpjp: (rec: unknown): unknown => {
      return 'dr. Irwansyah Kurniawan Sp.Bo'
    },
    parent: (rec: unknown): unknown => {
      const recX = rec as any
      return recX.parent?.name || '-'
    },
  },

  components: {
    action(rec, idx) {
      const res: RecComponent = {
        idx,
        rec: rec as object,
        component: action,
      }
      return res
    },
  },

  htmls: {},
}
