import { FnAjax, useAjax } from '@/Hook/useAjax'
import { Data, ListData, SysAdgroupsDTO } from '@/services/launchAdq'
import { PromotedObjectType } from '@/services/launchAdq/enum'
import { createSysAdgroups, getSysAdgroupsList } from '@/services/launchAdq/localAd'
import { Col, Row, Input, Select, Button } from 'antd'
import React, { useEffect, useState, useCallback } from 'react'
import TableData from '../../../components/TableData'
import AdModal from './modal'
import tableConfig from './tableConfig'

export interface ModalConfig {
    visible: boolean;
    title?: string;
}

function Ad() {
    // 变量
    const [modalConfig, setModalConfig] = useState<ModalConfig>({
        visible: false,
        title: '新建'
    })
    const [oldsearchData, setOldsearchData] = useState<any>(null)
    // api方法
    const sysAdgroupsList: FnAjax<ListData<SysAdgroupsDTO> | any>  = useAjax((params) => getSysAdgroupsList(params),{formatResult:true})
    const createSysAdgroup = useAjax((params) => createSysAdgroups(params))
    // 初始获取列表
    useEffect(() => {
        getList({ pageSize: 20, pageNum: 1 })
    }, [])
    // 获取列表
    const getList = useCallback((arg: { pageSize: number, pageNum: number, adgroupName?: string, promotedObjectType?: string }) => {
        Object.keys(arg).forEach(key => {
            !arg[key] && delete arg[key]
        })
        if (JSON.stringify(arg) !== JSON.stringify(oldsearchData)) {
            setOldsearchData(arg)
            sysAdgroupsList.run(arg)
        }
    }, [oldsearchData])

    // 设置变量
    const handleModalConfig = useCallback((arg: ModalConfig) => {
        setModalConfig({ ...modalConfig, ...arg })
    }, [modalConfig])
    // submit
    const submit = useCallback((arg: any) => {
        console.log(arg)
        createSysAdgroup.run(arg).then(res => {
            if (res) {
                sysAdgroupsList.refresh()
                handleModalConfig({ visible: false })
            }
        })
    }, [sysAdgroupsList])
    console.log('sysAdgroupsList',sysAdgroupsList)
    return <div>
        <TableData
            columns={tableConfig}
            ajax={sysAdgroupsList}
            dataSource={sysAdgroupsList?.data?.data?.records}
            loading={sysAdgroupsList?.loading}
            scroll={{ y: 600 }}
            total={sysAdgroupsList?.data?.data?.total}
            page={sysAdgroupsList?.data?.data?.current}
            pageSize={sysAdgroupsList?.data?.data?.size}
            leftChild={<>
                <Row gutter={[10, 10]}>
                    <Col span={24}><Button type='primary' onClick={() => {
                        handleModalConfig({ visible: true })
                    }}>新建广告模板</Button></Col>
                    <Col>
                        <Input
                            placeholder='广告名称'
                            allowClear
                            onBlur={(e) => {
                                let value = e.target.value
                                getList({ pageNum: 1, pageSize: 20, adgroupName: value })
                            }}
                            onKeyDownCapture={(e: any) => {
                                let key = e.key
                                if (key === 'Enter') {
                                    let value = e.target.value
                                    getList({ pageNum: 1, pageSize: 20, adgroupName: value })
                                }
                            }}
                            onChange={(e) => {
                                let value = e.target.value
                                if (!value) {
                                    getList({ pageNum: 1, pageSize: 20, adgroupName: value })
                                }
                            }}
                        />
                    </Col>
                    <Col>
                        <Select placeholder='推广目标选择' style={{ minWidth: 200 }} showSearch filterOption={(input, option) =>
                            (option!.children as unknown as string).toLowerCase().includes(input.toLowerCase())
                        } allowClear onChange={(value) => {
                            getList({ pageNum: 1, pageSize: 20, promotedObjectType: value })
                        }}>
                            {
                                Object.keys(PromotedObjectType).map(key => {
                                    // let obj = JSON.parse(PromotedObjectType[key])
                                    return <Select.Option value={key} key={key}>{PromotedObjectType[key]}</Select.Option>
                                })
                            }
                        </Select>
                    </Col>
                </Row>
            </>}
            onChange={(props: any) => {
                let { sortData, pagination } = props
                let { current, pageSize } = pagination
                getList({pageNum:current,pageSize})
            }}
        // config={guanggao}
        // configName={'广告模板列表'}
        />
        {modalConfig.visible && <AdModal visible={modalConfig.visible} title={modalConfig.title} PupFn={handleModalConfig} callback={submit} confirmLoading={createSysAdgroup.loading} />}
    </div>
}
export default Ad