import { useAjax } from "@/Hook/useAjax"
import { GetAdColumnTrendProps, getAdColumnTrendApi, getAdV3ColumnTrendApi } from "@/services/adMonitor/adMonitor"
import { DatePicker, Modal, Select, Space, Spin } from "antd"
import React, { useEffect, useState } from "react"
import moment from "moment"
import { LineField } from "./config"
import useEcharts from "@/Hook/useEcharts"


interface Props {
    data: any
    visible?: boolean
    onClose?: () => void
}
const ColumnTrend: React.FC<Props> = ({ data: { field, dataTimeMin, dataTimeMax, ...pageParams }, visible, onClose }) => {

    /*********************************/
    const { LineMonitor } = useEcharts()
    const [lineDis, setLineDis] = useState<any[]>([])
    const [queryParams, setQueryParams] = useState<GetAdColumnTrendProps>({ timeUnit: 'day', pageParams, trendColumns: [field], dataTimeMin, dataTimeMax })
    const getAdColumnTrend = useAjax((params) => getAdV3ColumnTrendApi(params), { formatResult: true })
    /*********************************/

    useEffect(() => {
        getList()
    }, [queryParams])

    const getList = () => {
        getAdColumnTrend.run(queryParams).then(res => {
            if (res?.data) {
                let trendColumns = queryParams.trendColumns
                let data = trendColumns.map((field) => {
                    let value: any = { legendName: LineField[field as keyof typeof LineField] }
                    res?.data?.forEach((item: any) => {
                        value[item?.trend_unit] = item?.[field] || 0
                    });
                    return value
                })
                setLineDis(() => data)
            }
        }).catch(() => {
            setLineDis([])
        })
    }

    return <Modal
        title={'趋势图'}
        open={visible}
        onCancel={onClose}
        footer={null}
        width={1200}
        bodyStyle={{ padding: 0 }}
    >
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 8, padding: '24px 24px 0' }}>
            <Space>
                <Select
                    showSearch
                    mode='multiple'
                    maxTagCount={2}
                    value={queryParams.trendColumns}
                    style={{ minWidth: 200 }}
                    allowClear
                    placeholder="请选择图表字段"
                    onChange={(value: string[]) => {
                        setQueryParams({ ...queryParams, trendColumns: value?.length ? value : ['cost'] })
                    }}
                >
                    {Object.keys(LineField).map((key) => <Select.Option value={key} key={key}>
                        {LineField[key as keyof typeof LineField]}
                    </Select.Option>)}
                </Select>
                <DatePicker.RangePicker
                    placeholder={['数据时间筛选(起始)', '数据时间筛选(结束)']}
                    value={(queryParams?.dataTimeMin && queryParams?.dataTimeMax) ? [moment(queryParams.dataTimeMin), moment(queryParams.dataTimeMax)] : undefined as any}
                    style={{ width: 320 }}
                    onChange={(_, o) => {
                        setQueryParams({ ...queryParams, dataTimeMin: o[0], dataTimeMax: o[1] })
                    }}
                />
                <Select
                    value={queryParams.timeUnit}
                    style={{ width: 78 }}
                    onChange={(e) => {
                        setQueryParams({ ...queryParams, timeUnit: e })
                    }}
                >
                    <Select.Option value="day">天</Select.Option>
                    <Select.Option value="hour">小时</Select.Option>
                </Select>
            </Space>
            <Space align="center">
                <span style={{ fontSize: 10, color: '#999' }}>刷新时间:{getAdColumnTrend?.data?.reqTime}</span>
                <a onClick={() => getList()} style={{ fontSize: 14 }}>刷新</a>
            </Space>
        </div>
        <div style={{ width: '100%', height: 400, textAlign: 'center' }}>
            {getAdColumnTrend?.loading ? <div style={{ width: '100%', height: 400, display: 'flex', justifyContent: 'center', alignItems: 'center' }}><Spin /> </div> : <LineMonitor style={{ width: '100%', height: 400 }} series smooth data={lineDis} />}
        </div>
    </Modal>
}

export default React.memo(ColumnTrend)