import type { Config, RecComponent } from '~/components/pub/my-ui/data-table'
import { defineAsyncComponent } from 'vue'
import type { DivisionPosition } from '~/models/division-position'

type SmallDetailDto = any

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

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

  headers: [
    [
      { label: '#' },
      { label: 'Kode Jabatan' },
      { label: 'Nama Jabatan' },
      { label: 'Pengisi Jabatan' },
      { label: 'Status Kepala' },
      { label: '' },
    ],
  ],

  keys: ['index', 'code', 'name', 'employee', 'head', 'action'],

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

  parses: {
    division: (rec: unknown): unknown => {
      const recX = rec as SmallDetailDto
      return recX.division?.name || '-'
    },
    employee: (rec: unknown): unknown => {
      const recX = rec as DivisionPosition
      const fullName = [recX.employee?.person.frontTitle, recX.employee?.person.name, recX.employee?.person.endTitle]
        .filter(Boolean)
        .join(' ')
        .trim()

      return fullName || '-'
    },
    head: (rec: unknown): unknown => {
      const recX = rec as SmallDetailDto
      return recX.headStatus ? 'Ya' : 'Tidak'
    },
  },

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

  htmls: {},
}
