import type { Config, RecComponent } from '~/components/pub/my-ui/data-table'
import type { DeviceOrder } from '~/models/device-order'
import type { DeviceOrderItem } from '~/models/device-order-item'

const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-dsd.vue'))

export const config: Config = {
  cols: [{ width: 120 }, { }, { }, { }, { width: 50 }],
  headers: [[
    { label: 'Tanggal' },
    { label: 'DPJP' },
    { label: 'Alat Kesehatan' },
    { label: 'Status' },
    { label: '' }]],
  keys: ['createdAt', 'doctor.employee.person.name', 'items', 'status_code', 'action'],
  delKeyNames: [
    { key: 'code', label: 'Kode' },
    { key: 'name', label: 'Nama' },
  ],
  skeletonSize: 10,
  htmls: {
    items: (rec: unknown): unknown => {
      const recX = rec as DeviceOrder
      if (recX.items?.length > 0) {
        let output = '<table><tbody>'
        recX.items.forEach((item: DeviceOrderItem) => {
          output += '' +
            '<tr>'+
              `<td class="pe-10">${item.device?.name}</td>` +
              '<td class="w-4">:</td>' +
              `<td class="w-10">${item.quantity}</td>` +
            '</tr>'
        })
        output += '</tbody></table>'
        return output
      } else {
        return '-'
      }
    },
  },
  parses: {
    createdAt: (rec: unknown): unknown => {
      const recX = rec as DeviceOrder
      return recX.createdAt ? new Date(recX.createdAt).toLocaleDateString() : '-'
    },
    // parent: (rec: unknown): unknown => {
    //   const recX = rec as SmallDetailDto
    //   return recX.parent?.name || '-'
    // },
  },
  components: {
    action(rec, idx) {
      const res: RecComponent = {
        idx,
        rec: rec as object,
        component: action,
        props: {
          size: 'sm',
        },
      }
      return res
    },
  }
}

