import { Form, Input, message, Modal, Radio, Select } from "antd"
import React, { useState, useEffect } from "react"

type Props = {
    visible: boolean,
    hide: () => void,
    userList?: any[],
    userInfo?: any,
    addConfig: (values: any) => void,
    actionCallbackList?: any
}
function CallBackModel(props: Props) {
    let { visible, hide, userList, userInfo, addConfig, actionCallbackList } = props
    const [params, setParams] = useState<any>({
        id: '',
        amountLimit: undefined,
        callBackCount: undefined,
        callBackSkip: undefined,
        callBackType: 1,
        mpAppId: '',
        mpAppName: '',
        userId: userInfo?.userId,
        userName: userInfo?.name,
        onlyFirstOrder: 1,// 0 : 否, 1 : 是
        regLimitType: 0,//0 : 关注当天, 1 : 关注后
        regAfterHour: null,
        aHour: null,
        bHour: null
    })
    // 编辑回填
    useEffect(() => {
        if (actionCallbackList) {
            setParams({
                ...params,
                id: actionCallbackList.id,
                amountLimit: actionCallbackList.amountLimit,
                callBackCount: actionCallbackList.callBackCount,
                callBackSkip: actionCallbackList.callBackSkip,
                callBackType: actionCallbackList.callBackType,
                mpAppId: actionCallbackList.mpAppId,
                mpAppName: actionCallbackList.mpAppName,
                onlyFirstOrder: actionCallbackList?.onlyFirstOrder,
                regLimitType: actionCallbackList?.regLimitType,
                regAfterHour: actionCallbackList?.regAfterHour,
                aHour:actionCallbackList?.regLimitType === 0 ? actionCallbackList?.regAfterHour : null,
                bHour:actionCallbackList?.regLimitType === 1 ? actionCallbackList?.regAfterHour : null,
            })
        }
    }, [actionCallbackList])

    return <Modal
        visible={visible}
        title='回传配置'
        onCancel={hide}
        width={650}
        onOk={() => addConfig(params)}
    >
        <Form labelCol={{ span: 5 }}>
            <Form.Item label='是否仅首充' >
                <Radio.Group onChange={(e) => {
                    let value = e.target.value
                    setParams({ ...params, onlyFirstOrder: value !== '' ? Number(value) : '' })
                }} value={params.onlyFirstOrder}>
                    <Radio value={1}>是</Radio>
                    <Radio value={0}>否</Radio>
                </Radio.Group>
            </Form.Item>
            <Form.Item label='时间限制' >
                <Radio.Group onChange={(e) => {
                    let value = e.target.value
                    let {aHour,bHour,regAfterHour,...param} = params
                    setParams({ ...param, regLimitType: value !== '' ? Number(value) : '',aHour:null,bHour:null,regAfterHour:null })
                }} value={params.regLimitType}>
                    <Radio value={0}>关注当天<Input style={{ width: 50 }} size='small' value={params.aHour} onChange={(e) => {
                        let value = e.target.value
                        if (value.match(/^[1-9]\d*$/) || value === '') {
                            let {aHour,regAfterHour,...param} = params
                            setParams({ ...param, aHour: value ? Number(value) : null,regAfterHour:null })
                        } else {
                            message.error('请输入正整数')
                        }
                    }} />小时内<span style={{ color: 'red' }}>(不填则认为当天自然日内都符合条件)</span></Radio>
                    <Radio value={1} style={{ marginTop: 10 }}>关注后<Input style={{ width: 50 }} size='small' value={params.bHour} onChange={(e) => {
                        let value = e.target.value
                        if (value.match(/^[1-9]\d*$/) || value === '') {
                            let {bHour,regAfterHour,...param} = params
                            setParams({ ...param, bHour: value ? Number(value) : null ,regAfterHour:null})
                        } else {
                            message.error('请输入正整数')
                        }
                    }} />小时内</Radio>
                </Radio.Group>
            </Form.Item>
            <Form.Item label='金额限制' >
                <Input value={params.amountLimit}
                    allowClear
                    onChange={(e) => {
                        let value = e.target.value
                        if (value.match(/^[1-9]\d*$/) || value === '') {
                            setParams({ ...params, amountLimit: value ? Number(value) : '' })
                        } else {
                            message.error('请输入正整数')
                        }
                    }}
                />
            </Form.Item>
            <Form.Item label='回传类型' >
                <Radio.Group onChange={(e) => {
                    let value = e.target.value
                    setParams({ ...params, callBackType: value !== '' ? Number(value) : '' })
                }} value={params.callBackType}>
                    <Radio value={1}>全量回传</Radio>
                    <Radio value={2}>按比例回传</Radio>
                    <Radio value={0}>不回传</Radio>
                </Radio.Group>
            </Form.Item>
            {
                params.callBackType === 2 && <>
                    <Form.Item label='回传量' >
                        <Input value={params.callBackCount}
                            allowClear
                            onChange={(e) => {
                                let value = e.target.value
                                if (value.match(/^[1-9]\d*$/) || value === '') {
                                    setParams({ ...params, callBackCount: value ? Number(value) : '' })
                                } else {
                                    message.error('请输入正整数')
                                }
                            }}
                        />
                    </Form.Item>
                    <Form.Item label='漏单量' >
                        <Input
                            value={params.callBackSkip}
                            allowClear
                            onChange={(e) => {
                                let value = e.target.value
                                if (value.match(/^[1-9]\d*$/) || value === '') {
                                    setParams({ ...params, callBackSkip: value ? Number(value) : '' })
                                } else {
                                    message.error('请输入正整数')
                                }
                            }}
                        />
                    </Form.Item>
                </>
            }
            <Form.Item label='公众号'>
                <Select
                    style={{ minWidth: 200 }}
                    allowClear
                    onChange={(value) => {
                        let item = userList?.filter(i => i.appid === value)[0]
                        setParams({ ...params, mpAppId: value, mpAppName: item?.nickName })
                    }}
                    value={params.mpAppId}
                    showSearch
                    filterOption={(input, option: any) =>
                        option?.children?.toLowerCase()?.indexOf(input?.toLowerCase()) >= 0
                    }
                    placeholder='选择公众号'
                >
                    {
                        userList?.map(user => {
                            return <Select.Option key={user?.appid} value={user?.appid}>{user?.nickName}</Select.Option>
                        })
                    }
                </Select>
            </Form.Item>
        </Form>
    </Modal>
}
export default CallBackModel