import { FnAjax, useAjax } from '@/Hook/useAjax'
import { ListData, } from '@/services/launchAdq'
import { createsysTargeting, getsysTargetingInfo, getsysTargetingList } from '@/services/launchAdq/targeting'
import { Col, Row, Input,  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;
    type?:'add'|'look'|'edit',
    dataInfo?:null
}

function Targeting() {
    // 变量
    const [modalConfig, setModalConfig] = useState<ModalConfig>({
        visible: false,
        type:'add'
    })
    const [oldsearchData, setOldsearchData] = useState<any>(null)
    // api方法
    const list: FnAjax<ListData<any>|any> = useAjax((params) => getsysTargetingList(params),{formatResult:true})
    const create = useAjax((params) => createsysTargeting(params))
    const targetingInfo = useAjax((params) => getsysTargetingInfo(params),{formatResult:true})
    // 初始获取列表
    useEffect(() => {
        getList({ pageSize: 20, pageNum: 1 })
    }, [])
    // 获取列表
    const getList = useCallback((arg: { pageSize: number, pageNum: number, targetingName?: string, promotedObjectType?: string }) => {
        Object.keys(arg).forEach(key => {
            !arg[key] && delete arg[key]
        })
        if (JSON.stringify(arg) !== JSON.stringify(oldsearchData)) {
            setOldsearchData(arg)
            list.run(arg)
        }
    }, [oldsearchData])

    // 设置变量
    const handleModalConfig = useCallback((arg: ModalConfig) => {
        setModalConfig({ ...modalConfig, ...arg })
    }, [modalConfig])
    // submit
    const submit = useCallback((arg: any) => {
        console.log(arg)
        create.run(arg).then(res => {
            if (res) {
                list.refresh()
                handleModalConfig({ visible: false,dataInfo:null,type:'add' })
            }
        })
    }, [list])
      // 获取详情
      const getInfo = useCallback((adgroupsId,type)=>{
        targetingInfo.run(adgroupsId).then((res: any)=>{
            setModalConfig({...modalConfig,visible:true,type,dataInfo:res.data})
        })
    },[modalConfig])
    // 回调
    const callback=useCallback((data,type)=>{
        getInfo(data.id,type)

    },[])
    return <div>
        <TableData
            columns={()=>tableConfig(callback)}
            ajax={list}
            dataSource={list?.data?.data?.records}
            loading={list?.loading}
            // scroll={{ y: 600 }}
            total={list?.data?.data?.total}
            page={list?.data?.data?.current}
            pageSize={list?.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, targetingName: value })
                            }}
                            onKeyDownCapture={(e: any) => {
                                let key = e.key
                                if (key === 'Enter') {
                                    let value = e.target.value
                                    getList({ pageNum: 1, pageSize: 20, targetingName: value })
                                }
                            }}
                            onChange={(e) => {
                                let value = e.target.value
                                if (!value) {
                                    getList({ pageNum: 1, pageSize: 20, targetingName: value })
                                }
                            }}
                        />
                    </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}  PupFn={handleModalConfig} callback={submit} confirmLoading={create.loading} type={modalConfig.type} dataInfo={modalConfig.dataInfo}/>}
    </div>
}
export default Targeting