import { h } from 'vue'
import { Tag, Button, Dropdown, Message } from '@arco-design/web-vue'
import { IconEdit, IconDelete, IconMore, IconCheckCircle } from '@arco-design/web-vue/es/icon'

// 工单状态映射
const statusMap = {
  pending: { text: '待接单', color: 'blue' },
  accepted: { text: '已接单', color: 'cyan' },
  processing: { text: '处理中', color: 'orange' },
  suspended: { text: '已挂起', color: 'gray' },
  resolved: { text: '已解决', color: 'green' },
  closed: { text: '已关闭', color: 'red' },
  cancelled: { text: '已撤回', color: 'red' },
}

// 工单类型映射
const typeMap = {
  incident: { text: '故障', color: 'red' },
  request: { text: '请求', color: 'blue' },
  question: { text: '问题', color: 'orange' },
  other: { text: '其他', color: 'gray' },
}

// 优先级映射
const priorityMap = {
  low: { text: '低', color: 'gray' },
  medium: { text: '中', color: 'blue' },
  high: { text: '高', color: 'orange' },
  urgent: { text: '紧急', color: 'red' },
}

// 生成表格列配置
export const generateColumns = (
  tabType: 'my-created' | 'pending',
  handlers: {
    onDetail: (record: any) => void
    onEdit?: (record: any) => void
    onTransfer?: (record: any) => void
    onSuspend?: (record: any) => void
    onResume?: (record: any) => void
    onResolve?: (record: any) => void
    onCancel?: (record: any) => void
    onComment?: (record: any) => void
    onDelete?: (record: any) => void
    onClose?: (record: any) => void
  }
) => {
  const baseColumns = [
    {
      title: '序号',
      dataIndex: 'index',
      width: 80,
      render: ({ rowIndex }: { rowIndex: number }) => rowIndex + 1,
    },
    {
      title: '工单编号',
      dataIndex: 'ticket_no',
      width: 160,
    },
    {
      title: '工单标题',
      dataIndex: 'title',
      width: 200,
      ellipsis: true,
      tooltip: true,
    },
    {
      title: '工单类型',
      dataIndex: 'type',
      width: 100,
      render: ({ record }: { record: any }) => {
        const type = typeMap[record.type as keyof typeof typeMap] || typeMap.other
        return h(Tag, { color: type.color }, { default: () => type.text })
      },
    },
    {
      title: '工单状态',
      dataIndex: 'status',
      width: 100,
      render: ({ record }: { record: any }) => {
        const status = statusMap[record.status as keyof typeof statusMap] || { text: record.status, color: 'gray' }
        return h(Tag, { color: status.color }, { default: () => status.text })
      },
    },
    {
      title: '优先级',
      dataIndex: 'priority',
      width: 100,
      render: ({ record }: { record: any }) => {
        const priority = priorityMap[record.priority as keyof typeof priorityMap] || { text: record.priority, color: 'gray' }
        return h(Tag, { color: priority.color }, { default: () => priority.text })
      },
    },
    {
      title: '操作',
      dataIndex: 'action',
      width: tabType === 'pending' ? 280 : 300,
      fixed: 'right' as const,
      render: ({ record }: { record: any }) => {
        if (tabType === 'pending') {
          // 待处理选项卡的操作按钮
          return h(
            'div',
            { style: { display: 'flex', gap: '8px', flexWrap: 'wrap' } },
            [
              h(Button, { size: 'small', type: 'text', onClick: () => handlers.onDetail(record) }, { default: () => '详情' }),
              h(Button, { size: 'small', type: 'text', onClick: () => handlers.onTransfer?.(record) }, { default: () => '转交' }),
              h(Button, { size: 'small', type: 'text', onClick: () => handlers.onSuspend?.(record) }, { default: () => '挂起' }),
              record.status === 'suspended' &&
                h(Button, { size: 'small', type: 'text', onClick: () => handlers.onResume?.(record) }, { default: () => '重启' }),
              h(Button, { size: 'small', type: 'text', onClick: () => handlers.onResolve?.(record) }, { default: () => '解决' }),
              h(Button, { size: 'small', type: 'text', onClick: () => handlers.onClose?.(record) }, { default: () => '关闭' }),
            ]
          )
        } else {
          // 我创建的选项卡的操作按钮
          const isCompleted = ['resolved', 'closed'].includes(record.status)
          const isResolved = record.status === 'resolved'
          
          return h(
            'div',
            { style: { display: 'flex', gap: '8px', flexWrap: 'wrap' } },
            [
              h(Button, { size: 'small', type: 'text', onClick: () => handlers.onDetail(record) }, { default: () => '详情' }),
              !isCompleted &&
                h(Button, { size: 'small', type: 'text', onClick: () => handlers.onEdit?.(record) }, { default: () => '编辑' }),
              h(Button, { size: 'small', type: 'text', onClick: () => handlers.onCancel?.(record) }, { default: () => '撤回' }),
              isResolved && h(Button, { size: 'small', type: 'text', onClick: () => handlers.onComment?.(record) }, { default: () => '评论' }),
              h(Button, { size: 'small', type: 'text', status: 'danger', onClick: () => handlers.onDelete?.(record) }, { default: () => '删除' }),
              h(Button, { size: 'small', type: 'text', onClick: () => handlers.onClose?.(record) }, { default: () => '关闭' }),
            ]
          )
        }
      },
    },
  ]

  return baseColumns
}
