
import React, { useCallback, useEffect, useState } from 'react'
import Tables from '@/components/Tables'
import columns from './tableConfig'
import './index.less'
import { Button, Card, DatePicker, Input, Popconfirm, Select, Space } from 'antd'
import { SearchOutlined } from '@ant-design/icons'
import moment from 'moment'
const { Option } = Select
import { adsPlanList } from '@/services/operating/adAuthorize'
import { useModel } from 'umi'
import AdLogin from '../../launchManage/components/adLogin'
/** 推广计划 */
function Plan() {
    const { getAdsPlan, delBatch } = useModel('useLaunch.useNewCreateAd')
    const [authData, setAuthData] = useState<{ base64: string, code: string }>({ base64: '', code: '' })
    const [queryForm, setQueryForm] = useState<adsPlanList>({ pageNum: 1, pageSize: 20 })
    const [selectedRowKeys, setSelectedRowKeys] = useState<any[]>([])
    // const [page, setPage] = useState<{ pageNum: number, pageSize: number }>({ pageNum: 1, pageSize: 20 })
    /**分页 */
    const pageChange = useCallback((page: string | number, pageSize?: string | number) => {
        setQueryForm({ ...queryForm, pageNum: page as number, pageSize: pageSize as number })
        getAdsPlan.run({ ...queryForm, pageNum: page as number, pageSize: pageSize as number })
    }, [queryForm])


    useEffect(() => {
        getAdsPlan.run(queryForm)
    }, [])
    /** 查询 */
    const fun = useCallback(() => {
        setQueryForm({ ...queryForm, pageNum: 1 })
        getAdsPlan.run({ ...queryForm, pageNum: 1 })
    }, [queryForm])

    const jumpPlan = useCallback((name: string, posType: number) => {
        sessionStorage.setItem('TASKNEW', JSON.stringify({ taskName: name, posType }))
        window.location.href = '/#/launchSystem/launchManageNew/weChatNew'
    }, [])

    // 结束日期不可选择日期
    const disabledEndDate = useCallback((current: any) => {
        if (queryForm.createStartTime) {
            return current && current < moment(queryForm.createStartTime) || current > moment()
        } else {
            return current && current > moment()
        }
    }, [queryForm.createStartTime])
    // 开始日期不可选择日期
    const disabledEndDate1 = useCallback((current: any) => {
        if (queryForm.createEndTime) {
            return current && current > moment(queryForm.createEndTime).endOf('day')
        } else {
            return current && current > moment()
        }
    }, [queryForm.createEndTime])

    // 删除
    const delHandle = (id: string) => {
        delBatch.run({ taskIds: id }).then(() => {
            getAdsPlan.refresh()
            setSelectedRowKeys([])
        })
    }
    // 批量删除
    const allDel = useCallback(() => {
        selectedRowKeys?.forEach((id, index) => {
            delBatch.run({ taskIds: id }).then(() => {
                if (index === selectedRowKeys?.length - 1) {
                    getAdsPlan.refresh()
                }
            })
        })
    }, [selectedRowKeys])
    return <Card>
        <Space style={{ marginBottom: 20 }} wrap={true}>
            <DatePicker style={{ width: 120 }} disabledDate={disabledEndDate1} onChange={(e: moment.Moment | null) => { setQueryForm({ ...queryForm, createStartTime: e ? moment(e).format('YYYY-MM-DD') + ' 00:00:00' : '' }) }} placeholder='创建时间' />
            <DatePicker style={{ width: 120 }} disabledDate={disabledEndDate} onChange={(e: moment.Moment | null) => { setQueryForm({ ...queryForm, createEndTime: e ? moment(e).format('YYYY-MM-DD') + ' 00:00:00' : '' }) }} placeholder='结束时间' />
            <Select mode="tags" value={queryForm?.createStatus} style={{ width: 200 }} onChange={(e) => { setQueryForm({ ...queryForm, createStatus: e }) }} placeholder="选择状态" allowClear>
                <Option value="-1">失败</Option>
                <Option value="0">创建中</Option>
                <Option value="1">部分成功</Option>
                <Option value="100">全部成功</Option>
            </Select>
            <Input placeholder="任务名称" value={queryForm?.taskName} onChange={(e) => { setQueryForm({ ...queryForm, taskName: e.target.value }) }} allowClear />
            <Button type='primary' onClick={fun}><SearchOutlined /> 查询</Button>
            <Popconfirm
                title="是否确定要删除选中的任务?"
                onConfirm={allDel}
                okText="是"
                cancelText="否"
                disabled={selectedRowKeys.length === 0}
            ><Button type="primary" danger  disabled={selectedRowKeys.length === 0}>批量删除</Button></Popconfirm>
        </Space>
        <Tables
            columns={columns(jumpPlan, delHandle)}
            dataSource={getAdsPlan?.data?.data?.records}
            rowSelection={{
                type: 'checkbox',
                selectedRowKeys,
                onChange: (keys: any) => {
                    setSelectedRowKeys(keys)
                }
            }}
            total={getAdsPlan?.data?.data?.total}
            loading={getAdsPlan?.loading}
            current={queryForm.pageNum}
            pageChange={pageChange}
            sizeChange={pageChange}
            size="small"
            scroll={{ x: 1600 }}
            bordered
        />
        {/* 授权登录 */}
        <AdLogin onClose={() => { setAuthData({ base64: '', code: '' }) }} value={authData} onChange={() => { setAuthData({ base64: '', code: '' }) }} />
    </Card>
}

export default Plan