import type { Config, RecComponent } from '~/components/pub/my-ui/data-table'
import { defineAsyncComponent } from 'vue'
import type { ProcedureRoomOrder } from '~/models/procedure-room-order'

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

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

  headers: [[
    { label: 'Tgl. Order' },
    { label: 'No. Order' },
    { label: 'Ruangan' },
    { label: 'Status' },
    { label: 'Resume' },
    { label: '' },
  ]],

  keys: ['date', 'number', 'room', 'status_code', 'resume', 'action'],

  delKeyNames: [
    { key: 'createdAt', label: 'Tgl. Order' },
    { key: 'id', label: 'No. Order' },
  ],

  parses: {
    date: (rec: any) => {
      const recX = rec as ProcedureRoomOrder
      return recX.createdAt ? recX.createdAt.substring(0, 10) : ''

    },
    number: (rec: any) => {
      const recX = rec as ProcedureRoomOrder
      return `ORT-${recX.id}`
    },
    room: (rec: any) => {
      const recX = rec as ProcedureRoomOrder
      let result = ''
      if (recX.items && recX.items.length > 0) {
        recX.items.forEach((item, idx) => {
          result += item.infra?.name ? `<div>${item.infra.name}</div>` : ''
        })
      }
      // recX.ite
      return ''
    },
  },

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

  htmls: {},
}
