import { useDataQuery } from '@/hooks/useQuery'
import { Column, Line, Pie, Radar, Scatter, WordCloud, Gauge, Treemap, Funnel, Histogram } from '@ant-design/plots'

export default function Chart({ type = '1', ...props }) {
  const { data } = useDataQuery()

  switch (type) {
    case '1': // 柱状图
      return <Column data={data.list} {...props} />

    case '2': // 折线图
      return <Line data={data.list} point={{ shapeField: 'point', sizeField: 4 }} style={{ lineWidth: 2 }} {...props} />

    case '3': // 饼状图
      return <Pie data={data.list} angleField={props.yField} colorField={props.xField} {...props} />

    case '4': // 雷达图
      return <Radar data={data.list} {...props} />

    case '5': // 散点图
      return <Scatter data={data.list} {...props} />

    case '6': // 气泡图
      return <Scatter data={data.list} sizeField={props.sizeField || 'size'} {...props} />

    case '7': // 词云
      return <WordCloud data={data.list} {...props} />

    case '8': // 地图
      return <Column data={data.list} {...props} /> // 需要替换为地图组件

    case '9': // 指标卡
      return <Gauge data={data.list} percent={props.percent || 0.5} {...props} />

    case '10': // 漏斗图
      return <Funnel data={data.list} {...props} />

    case '11': // 直方图
      return <Histogram data={data.list} {...props} />

    case '12': // 表格
      return <Column data={data.list} {...props} /> // 需要替换为表格组件

    case '13': // 帕累托图
      return <Column data={data.list} {...props} /> // 需要替换为帕累托图组件

    case '14': // 矩形树图
      return <Treemap data={data.list} {...props} />

    default:
      return <Column data={data.list} {...props} />
  }
}
