import { useParams } from 'react-router'
import { useViewLargeScreen } from '../query'
import Chart from '@/components/chart/Chart'
import { Card } from 'antd'

export default function LargeScreenView() {
  const { id } = useParams()
  const { data } = useViewLargeScreen(id || '')

  if (!data) return null

  const components = data.component.map((item: any) => {
    try {
      const { config } = JSON.parse(item.content)
      return { ...item, config }
    } catch (error) {
      console.log(error)
    }
    return item
  })

  try {
    const { form } = JSON.parse(data.content)
    const getBackground = () => {
      switch (form.bg) {
        case 'default':
          return '#f0f2f5'
        case 'color':
          return form.bgColor || '#ffffff'
        case 'image':
          return form.bgImage ? `url(${form.bgImage?.url})` : '#ffffff'
        default:
          return '#ffffff'
      }
    }

    return (
      <div
        style={{
          width: '100vw',
          minHeight: '100%',
          background: getBackground(),
          backgroundSize: form.bg === 'image' ? 'cover' : 'auto',
          backgroundPosition: form.bg === 'image' ? 'center' : 'auto',
        }}>
        <div style={{ padding: 20 }}>
          <h2
            style={{
              fontSize: `${form.titleStyle.fontSize}px`,
              color: form.titleStyle.color,
              fontWeight: form.titleStyle.bold ? 'bold' : 'normal',
              fontStyle: form.titleStyle.italic ? 'italic' : 'normal',
              textAlign: form.titleStyle.align,
              marginBottom: '20px',
            }}>
            {form.title}
          </h2>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(400px, 1fr))', gap: '20px' }}>
            {components.map((item: any) => (
              <Card title={item.name} key={item.id}>
                <Chart type={item.type} {...item.config} />
              </Card>
            ))}
          </div>
        </div>
      </div>
    )
  } catch (e) {
    console.error('解析数据失败:', e)
    return null
  }
}
