import { ref, computed } from 'vue'
import type { FormSchema } from '@/types/form'
import type { TableColumn } from '@/types/table'
import { useTable } from '@/hooks/web/useTable'
import { ElTag, dayjs } from 'element-plus'
import { h } from 'vue'
import * as MessageApi from '@/api/new-ai/message'

export default function () {
  const searchParams = ref({})

  const schema = ref<FormSchema[]>([
    {
      field: 'text',
      component: 'Input',
      label: '内容',
      componentProps: {
        placeholder: '请输入内容查询'
      },
      colProps: {
        span: 6
      }
    },
    {
      field: 'username',
      component: 'Input',
      label: '用户名',
      componentProps: {
        placeholder: '请输入用户名查询'
      },
      colProps: {
        span: 6
      }
    },
    {
      field: 'role',
      component: 'Select',
      label: '对话角色',
      componentProps: {
        placeholder: '请选择对话角色查询',
        options: [
          {
            label: 'user',
            value: 'user'
          },
          {
            label: 'assistant',
            value: 'assistant'
          }
        ]
      },
      colProps: {
        span: 6
      }
    }
  ])

  const columns = ref<TableColumn[]>([
    {
      label: '用户名',
      field: 'username',
      align: 'center',
      width: 120
    },
    {
      label: '请求ip',
      field: 'ip',
      align: 'center',
      width: 120
    },
    {
      label: '对话角色',
      field: 'role',
      align: 'center',
      width: 100,
      formatter(row) {
        return h(
          ElTag,
          {
            type: row.role === 'user' ? 'success' : 'danger',
            size: 'small'
          },
          {
            default: () => row.role
          }
        )
      }
    },
    {
      label: '模型名称',
      field: 'model',
      align: 'center',
      width: 100
    },
    {
      label: 'Token消耗',
      field: 'tokens',
      align: 'center',
      width: 100
    },
    {
      label: '提示词Token消耗',
      field: 'promptTokens',
      align: 'center',
      width: 120
    },
    {
      label: '消息内容',
      field: 'message',
      formatter: (row: any) => {
        return String(row.message).replace(/```|\n/g, '')
      }
    },
    {
      label: '会话时间',
      field: 'createTime',
      width: 180,
      align: 'center',
      formatter: (row: any) => {
        return dayjs(row.createTime).format('YYYY-MM-DD HH:mm:ss')
      }
    },
    
  ])

  const { register, tableObject, methods } = useTable({
    getListApi: MessageApi.page,
    defaultParams: searchParams.value,
    delListApi: MessageApi.del
  })

  const handleSearch = (values: any) => {
    methods.setSearchParams(values)
    // methods.getList()
  }

  const pagination = computed(() => {
    return {
      total: tableObject.total,
      pageSize: tableObject.pageSize,
      currentPage: tableObject.currentPage
    }
  })

  const handleDel = async (id: string | number) => {
    try {
      await methods.delList(id, false)
    } catch (error) {
      console.error('Failed to delete message:', error)
    }
  }
  onMounted(() => {
    methods.getList()
  })
  return {
    schema,
    columns,
    register,
    handleSearch,
    methods,
    tableObject,
    pagination,
    handleDel
  }
}
