import { DatePicker, Form, Input, Modal, Select } from "antd";
import moment from "moment";
import React from "react";
import { useModel } from "umi";

interface Props {
    value?: any,
    visible?: boolean,
    onChange?: () => void,
    onClose?: () => void
}
function CheckAccount(props: Props) {
    const { value = {}, visible = false, onChange, onClose } = props
    const { userId } = useModel('useOperating.useUser', model => ({ userId: model.state.selectdUserId }))
    const { getResource, checkGdtAccountGdt } = useModel('useOperating.useAccountyyb')
    const [form] = Form.useForm()
    const handleOk = async () => {
        form.submit()
        let data = await form.validateFields()
        let { accountIds, resourceNames, ...data1 } = data
        let proms = { ...data1, beginTime: moment(data.beginTime).format('YYYY-MM-DD'), userId, gdtAccountIds: accountIds }
        checkGdtAccountGdt.run(proms).then(res => {
            if (res) {
                onChange && onChange()
            }
        })
    }

    // 搜索资源
    const handleSearch = (value: string) => {
        getResource.run({ resourceName: value, resourceType: 0})
    }

    return <Modal title={`${'GDT'}切号`} visible={visible} onOk={handleOk} onCancel={() => { onClose && onClose() }} confirmLoading={checkGdtAccountGdt.loading}>
        <Form
            name="basic"
            form={form}
            labelCol={{ span: 5 }}
            wrapperCol={{ span: 19 }}
            autoComplete="off"
            initialValues={{ ...value }}
        >
            <Form.Item label="账号ID" name="accountIds" rules={[{ type: 'string', required: true, message: '请输入账号!' }]}>
                <Input.TextArea autoSize placeholder="请输入账号ID（id1,id2,id3）" disabled />
            </Form.Item>
            <Form.Item label="当前投放信息" name="resourceNames">
                <Input.TextArea autoSize disabled />
            </Form.Item>
            <Form.Item label="投放信息" name="putResourceId" rules={[{ type: 'number', required: true, message: '请选择投放信息!' }]}>
                <Select
                    showSearch
                    placeholder="选择投放信息"
                    defaultActiveFirstOption={false}
                    showArrow={false}
                    filterOption={false}
                    onSearch={handleSearch}
                    notFoundContent={null}
                >
                    {getResource?.data?.map((item: { id: number, resourceName: string }) => <Select.Option key={item.id} value={item.id}>{item.resourceName}</Select.Option>)}
                </Select>
            </Form.Item>
            <Form.Item label="开始时间" name="beginTime" rules={[{ type: 'object' as const, required: true, message: '请选择时间!' }]}>
                <DatePicker />
            </Form.Item>
        </Form>
    </Modal>
}

export default React.memo(CheckAccount)