import { allPlanProps } from "@/services/adMonitor/adMonitor"
import { DownOutlined } from "@ant-design/icons"
import { DatePicker, Input, Popover, Space } from "antd"
import React from "react"
import style from './index.less'
import moment from "moment"


interface Props {
    queryFrom: allPlanProps,
    setQueryForm: React.Dispatch<React.SetStateAction<allPlanProps>>
}

const SearchSelect: React.FC<Props> = ({ queryFrom, setQueryForm }) => {

    /****************************************/

    /****************************************/
    // 设置创建时间
    const setUnix = ([str, end]: string[]) => {
        if (str && end) {
            setQueryForm({ ...queryFrom, pageNum: 1, createStartTime: moment(str).format('YYYY-MM-DD'), createEndTime: moment(end).format('YYYY-MM-DD') })
        } else {
            const { createStartTime, createEndTime, ...newQueyFor } = queryFrom
            setQueryForm({ ...newQueyFor, pageNum: 1 })
        }
    }

    return <div>
        <Popover placement="topRight" trigger={['click']} content={<Space wrap className={style.more}>
            <Input style={{ width: 160 }} placeholder="请输入计划名称或ID" allowClear value={queryFrom?.campaign} onChange={(e) => { setQueryForm({ ...queryFrom, pageNum: 1, campaign: e.target.value }) }} />
            <Input style={{ width: 160 }} placeholder="请输入广告名称或ID" allowClear value={queryFrom?.adgroup} onChange={(e) => { setQueryForm({ ...queryFrom, pageNum: 1, adgroup: e.target.value }) }} />
            <Input style={{ width: 160 }} placeholder="请输入创意ID" allowClear value={queryFrom?.creativeId} onChange={(e) => { setQueryForm({ ...queryFrom, pageNum: 1, creativeId: e.target.value }) }} />
            <DatePicker.RangePicker style={{ width: 245 }} placeholder={['数据开始日期', '数据结束日期']} onChange={(mo: any, str: string[]) => { setQueryForm({ ...queryFrom, pageNum: 1, dataStartTime: str[0], dataEndTime: str[1] }) }} value={(queryFrom?.dataStartTime && queryFrom?.dataEndTime ? [moment(queryFrom?.dataStartTime), moment(queryFrom?.dataEndTime)] : null) as any} />
            <DatePicker.RangePicker style={{ width: 245 }} placeholder={['创建开始日期', '创建结束日期']} onChange={(mo: any, str: string[]) => { setUnix(str) }} value={(queryFrom?.createStartTime && queryFrom?.createEndTime ? [moment(queryFrom?.createStartTime), moment(queryFrom?.createEndTime)] : null) as any} />
        </Space>}>
            <a onClick={(e) => e.preventDefault()}>
                <Space>更多<DownOutlined /></Space>
            </a>
        </Popover>
    </div>
}


export default React.memo(SearchSelect)