import DatePickePage from "@/components/DatePicker"
import useEcharts from "@/Hook/useEcharts"
import { SearchOutlined } from "@ant-design/icons"
import { useDebounce } from "ahooks"
import { Button, Input, Select, Space } from "antd"
import moment from "moment"
import React, { useCallback, useEffect, useState } from "react"
import { useModel } from "umi"

function Page() {
    const { Line } = useEcharts()
    const { state: { pitcher, channel }, dispatch, getBossSummary, getUserAjax, getAccAjax } = useModel('useData.useTableData')
    const [costData, setCostData] = useState<any[]>([])
    const { state: userState } = useModel('useOperating.useUser')
    const [type, setType] = useState<'MP' | 'GDT' | ''>()//投放位置
    const [stage, setStage] = useState<string>()//期数
    const [date, setDate] = useState<any>([moment().subtract(3, 'M').format('YYYY-MM-DD'), moment().format('YYYY-MM-DD')])
    const [value, setValue] = useState<string>('');
    const { currentUser }: any = useModel('@@initialState', model => ({ currentUser: model.initialState?.currentUser }))
    useEffect(() => {
        tableSubmut()
    }, [userState.selectdName])
    useEffect(() => {
        getUserAjax.run({ user_id: currentUser.userId })
    }, [currentUser.userId])

    const handleSearch = useCallback((value: string) => {
        setValue(value)
    }, [])
    const debouncedValue = useDebounce(value, { wait: 300 });
    useEffect(() => {
        getAccAjax.run({ user_id: currentUser.userId, name: debouncedValue })
    }, [debouncedValue, userState?.selectdUserId])

    const tableSubmut = useCallback(() => {
        let obj: any = {}
        pitcher && (obj['pitcher'] = pitcher)
        stage && (obj['stage'] = stage)
        date && (obj['start'] = date[0])
        date && (obj['end'] = date[1])
        type && (obj['type'] = type)
        channel && (obj['channel'] = channel)
        obj['user_id'] = currentUser.userId
        getBossSummary.run(obj).then((res) => {
            if (res?.data) {
                let cost_data = [{ legendName: '消耗' }, { legendName: '账面充值' }]
                res?.data?.reverse().forEach((item: { dt: string, order_amount: number, cost: number }) => {
                    cost_data[0][item.dt] = item.cost
                    cost_data[1][item.dt] = item.order_amount
                })
                console.log(cost_data);
                
                setCostData(cost_data)
            }
        })
    }, [pitcher, stage, date, type, channel])
    return <>
        <Space style={{ marginBottom: 15 }}>
            <Select
                style={{ width: 150 }}
                placeholder='请输投手名称'
                onChange={(value: any) => { dispatch({ type: 'setState', params: { pitcher: value } }) }}
                showArrow
                showSearch
                allowClear
                value={pitcher}
                >
                    {
                        getUserAjax?.data?.data?.map((list: any, eq: number) => {
                            return <Select.Option key={list?.user_id} value={list?.nick_name}>
                                {list?.nick_name}
                            </Select.Option>
                        })
                    })
            </Select>
            <Select
                style={{ width: 150 }}
                placeholder="输入搜索公众号"
                onChange={(value: any) => { dispatch({ type: 'channel', params: { channel: value as string } }) }}
                showSearch
                allowClear
                defaultActiveFirstOption={false}
                showArrow={false}
                filterOption={false}
                onSearch={handleSearch}
                value={channel || undefined}
                notFoundContent={null}
            >
                {
                    getAccAjax?.data?.data?.map((list: any, eq: number) => {
                        return <Select.Option key={list?.id} value={list?.nick_name}>
                            {list?.nick_name}
                        </Select.Option>
                    })
                })
            </Select>
            <Input placeholder='请输入期数名称' onChange={(e) => { setStage(e.target.value) }} allowClear style={{ width: 140 }} value={stage} />
            <Select value={type} placeholder='投放位置' onChange={(v) => setType(v)} allowClear style={{ minWidth: 100 }}>
                <Select.Option value='MP'>MP</Select.Option>
                <Select.Option value='GDT'>GDT</Select.Option>
                <Select.Option value='BYTEDANCE'>BYTEDANCE</Select.Option>
            </Select>
            {/*  */}
            <DatePickePage model='RangePicker' DatePickerChange={(a, b) => { setDate(b) }} allowClear date={date ? date : undefined} />
            <Button type='primary' onClick={() => tableSubmut()}><SearchOutlined />搜索</Button>
        </Space>
        <>
            {/* <h3>{userState.selectdName</h3>} */}
            <Line
                style={{ width: '100%', height: 'calc(100vh - 150px)', display: 'flex', justifyContent: 'center' }}
                data={costData}
                // areaStyle
                // color={['#009632','#d42700']}
                title={(pitcher || '全部') + '——整体概况'}
                series
                smooth
                markPoint={[
                    { type: 'max', name: '最大值', itemStyle: { color: '#d42700' } },
                    { type: 'min', name: '最小值', itemStyle: { color: '#009632' } }
                ]}
            />
        </>
    </>
}
export default Page