import { h } from 'vue'
import { ElTag } from 'element-plus'
import ArtButtonTable from '@/components/core/forms/art-button-table/index.vue'

export function createOperationRecordTableColumns({ t, handleView, handleDelete }) {
  return [
    {
      prop: 'namespace',
      label: t('pages.system.operationRecord.table.namespace'),
      minWidth: 180,
      showOverflowTooltip: true
    },
    {
      prop: 'url',
      label: t('pages.system.operationRecord.table.url'),
      minWidth: 240,
      showOverflowTooltip: true,
      formatter: (row) => row.url || '-'
    },
    {
      prop: 'userLabel',
      label: t('pages.system.operationRecord.table.user'),
      minWidth: 140,
      formatter: (row) => row.userLabel || '-'
    },
    {
      prop: 'clientIp',
      label: t('pages.system.operationRecord.table.clientIp'),
      minWidth: 140,
      formatter: (row) => row.clientIp || '-'
    },
    {
      prop: 'spendTime',
      label: t('pages.system.operationRecord.table.spendTime'),
      width: 110,
      formatter: (row) => row.spendTime ?? '-'
    },
    {
      prop: 'result',
      label: t('pages.system.operationRecord.table.result'),
      width: 100,
      formatter: (row) =>
        h(ElTag, { type: row.resultType, effect: 'light' }, () =>
          row.resultTextKey ? t(row.resultTextKey) : row.resultText || '-'
        )
    },
    {
      prop: 'timestampText',
      label: t('pages.system.operationRecord.table.timestamp'),
      minWidth: 180,
      formatter: (row) => row.timestampText || '-'
    },
    {
      prop: 'operation',
      label: t('table.operation'),
      width: handleDelete ? 120 : 70,
      align: 'center',
      formatter: (row) => {
        const buttons = [
          h(ArtButtonTable, {
            type: 'view',
            onClick: () => handleView(row)
          })
        ]

        if (handleDelete) {
          buttons.push(
            h(ArtButtonTable, {
              type: 'delete',
              onClick: () => handleDelete(row)
            })
          )
        }

        return h('div', { class: 'flex justify-center' }, buttons)
      }
    }
  ]
}