import useEcharts from "@/Hook/useEcharts"
import { Card, DatePicker, Radio, Space, Spin } from "antd"
import React, { useEffect, useRef, useState, useMemo } from "react"
import style from './index.less'
import './index1.less'
import { AllSurveyTotalDataProps, getAllSurveyLineDataApi } from "@/services/gameData/allSurvey"
import { useAjax } from "@/Hook/useAjax"
import moment from "moment"
import { getPresets } from "@/components/QueryForm/const"
let ranges = getPresets()

interface Props {
    height: number
    width: number
    queryForm: AllSurveyTotalDataProps
}
/**
 * 线图
 * @returns 
 */
const LineC: React.FC<Props> = (props) => {

    /******************/
    const { height = 0, width, queryForm } = props
    const { LineMonitor } = useEcharts()
    const ref = useRef(null);
    const [type, setType] = useState<string>('a')
    const [data, setData] = useState<any>({})
    const [beginDate, setBeginDate] = useState<string>()
    const [endDate, setEndDate] = useState<string>()
    /******************/

    const getAllSurveyLineData = useAjax((params) => getAllSurveyLineDataApi(params))

    useEffect(() => {
        getAllSurveyLineData.run({ ...queryForm, beginDate, endDate }).then(res => {
            let a1Data: any = { legendName: '消耗' }
            let a2Data: any = { legendName: '充值' }
            let b1Data: any = { legendName: '买量充值' }
            let b2Data: any = { legendName: '自然量充值' }
            let cData: any = { legendName: '首日ROI' }
            let d1Data: any = { legendName: '新增用户' }
            // 消耗 costLineList
            // 新增用户 userLineList
            /**
             * amountLineList
             * amount 充值
             * buyAmount 买量充值
             * natureAmount 自然量充值
             * todayFirstNewUserAmount 首日新用户充值
             * firstRoi 首日ROI
             */
            const { amountLineList = [], costLineList = [], userLineList = [] } = res
            amountLineList?.forEach((item: { amount: number, buyAmount: number, natureAmount: number, firstRoi: number, dt: string }) => {
                a2Data[item.dt] = item?.amount || 0
                b1Data[item.dt] = item?.buyAmount || 0
                b2Data[item.dt] = item?.natureAmount || 0
                cData[item.dt] = item?.firstRoi || 0
            })
            costLineList?.forEach((item: { dt: string, cost: number }) => {
                a1Data[item.dt] = item?.cost || 0
            })
            userLineList?.forEach((item: { dt: string, playerAccount: number }) => {
                d1Data[item.dt] = item?.playerAccount || 0
            })
            setData({
                a: [a1Data, a2Data],
                b: [b1Data, b2Data],
                c: [cData],
                d: [d1Data]
            })
        })
    }, [queryForm, beginDate, endDate])

    const Line = useMemo(() => {
        let lineData = data[type] || []
        return <LineMonitor style={{ width: '100%', height: '100%' }} series smooth data={JSON.parse(JSON.stringify(lineData))} />
    }, [type, data, width, height])

    return <div className={style.lineCont} ref={ref} style={{ height: `calc(100% - ${145.43 + height}px)` }}>
        <Spin wrapperClassName={'spin_100'} spinning={getAllSurveyLineData.loading}>
            <Card
                style={{ width: '100%', height: '100%', borderRadius: 8 }}
                title={<Space>
                    <Radio.Group value={type} buttonStyle="solid" onChange={(e) => setType(e.target.value)}>
                        <Radio.Button value="a">消耗&充值</Radio.Button>
                        <Radio.Button value="b">买量充值&自然量充值</Radio.Button>
                        <Radio.Button value="c">首日ROI</Radio.Button>
                        <Radio.Button value="d">新增用户</Radio.Button>
                    </Radio.Group>
                    <DatePicker.RangePicker
                        placeholder={['开始日期', '结束日期']}
                        ranges={ranges as any}
                        value={(beginDate && endDate) ? ([moment(beginDate), moment(endDate)] as any) : undefined}
                        onChange={(e) => {
                            if (e && e.length === 2) {
                                setBeginDate(moment(e[0]).format('YYYY-MM-DD'))
                                setEndDate(moment(e[1]).format('YYYY-MM-DD'))
                            } else {
                                setBeginDate(undefined)
                                setEndDate(undefined)
                            }
                        }}
                    />
                </Space>}
                bodyStyle={{ padding: '0 0 24px', height: 'calc(100% - 68px)' }}
            >
                {Line}
            </Card>
        </Spin>

    </div>
}

export default React.memo(LineC)