import React, { useEffect, useState } from 'react'
import Chart from '@/subpackages/components/Chart'

export default (props) => {
  const { dataSource, xAxisDataRef } = props

  const [options, setOptions] = useState()

  useEffect(() => {
    if (xAxisDataRef.current) {
      const data = [[],[]];
      (dataSource || []).forEach((it) => {
        const dt = it.coordinate.length >= 10 ? it.coordinate.substring(5) : it.coordinate
  
        data[0].push(dt)
        data[1].push(it.customerNum)
      })
      setOptions({
        xAxis: {
          type: 'category',
          axisLabel: {
            rotate: 45, // 旋转 45 度
          },
          data: xAxisDataRef.current.map((x) => {
            const parts = x.split('-')

            if (parts.length === 3) {
              // 如果是天, 2006-03-04 那么会返回 03-04
              return `${parts[1]}-${parts[2]}`
            } else {
              // 如果是月 2006-03 那么会返回 3月
              return `${parts[1] - 0}月`
            }
          }),
        },
        yAxis: {
          type: 'value',
        },
        series: [{
          type: 'line',
          smooth: true,
          data: xAxisDataRef.current.map((dt) => {
            const it = (dataSource || []).filter(x => x.coordinate === dt)[0]
            return it ? it.customerNum : 0
          }),
        }],
        color: ['#5470c6'],
      });
    }
  }, [dataSource])

  return (
    <Chart options={options} />
  )
}
