import { Button, Card, Flex } from 'antd'
import { ReactNode } from 'react'
import AppList, { AppListProps } from '@/components/AppList'
import ViewDataButtonModal from '../data/ViewMyDataButtonModal'
import { getChartComponentList } from '@/api/data'
import { useDeleteChart } from '@/hooks/useChartQuery'

const chartType: any = {
  1: '柱状图',
  2: '折线图',
  3: '饼状图',
  4: '雷达图',
  5: '散点图',
  6: '气泡图',
  7: '词云',
  8: '地图',
  9: '指标卡',
  10: '漏斗图',
  11: '直方图',
  12: '表格',
  13: '帕累托图',
  14: '矩形树图',
}

export default function DataWrap({
  title,
  buttons,
  type,
}: {
  type: string
  title: string
  buttons: ReactNode
  children?: ReactNode
}) {
  const { mutate } = useDeleteChart()
  const handleRemove = (record: any) => {
    mutate({ id: record.id })
  }

  const listOptions: AppListProps = {
    queryKey: ['chartComponentList', { type }],
    fetchApi: async (params) => {
      const { data } = await getChartComponentList({ ...params, type })
      return { ...data }
    },
    columns: [
      {
        title: '序号',
        key: 'index',
        render(_value, _record, index) {
          return index + 1
        },
        width: 62,
        align: 'center',
      },
      {
        title: '组件类型',
        dataIndex: 'type',
        align: 'center',
        render(value) {
          return chartType[value] || value
        },
      },
      { title: '组件名称', dataIndex: 'name', align: 'center' },
      { title: '创建人', dataIndex: 'created_operator_name', align: 'center' },
      { title: '创建时间', dataIndex: 'created_time', align: 'center' },
      { title: '更新时间', dataIndex: 'updated_time', align: 'center' },
      {
        title: '操作',
        key: 'x',
        width: 220,
        align: 'center',
        render(_value, record) {
          return (
            <>
              <Button color="primary" variant="text">
                查看
              </Button>
              <Button color="primary" variant="text">
                编辑
              </Button>
              <Button color="danger" variant="text" onClick={() => handleRemove(record)}>
                删除
              </Button>
            </>
          )
        },
      },
    ],
  }
  return (
    <Flex gap={20} style={{ height: '100%' }}>
      <Card className="app-card" title={title} style={{ flex: 1, overflowX: 'hidden' }}>
        <Flex justify="space-between" style={{ marginBottom: '20px' }}>
          <Flex wrap gap={10}>
            {buttons}
          </Flex>
          <ViewDataButtonModal></ViewDataButtonModal>
        </Flex>
        <AppList {...listOptions} />
      </Card>
    </Flex>
  )
}
