import { useAjax } from "@/Hook/useAjax"
import { syncAccountDayApi, syncAccountDayV3Api } from "@/services/launchAdq/adminSpecialUseConsume"
import { Button, Card, DatePicker, Form, FormProps, Input, message } from "antd"
import React from "react"
import moment from "moment"
import { RangePickerProps } from "antd/lib/date-picker"

/**
 * 管理员拉消耗专用
 * @returns 
 */
const AdminSpecialUseConsume: React.FC = () => {


    /*********************************/
    const [form] = Form.useForm()
    const syncAccountDay = useAjax((params) => syncAccountDayApi(params), { formatResult: true })
    const syncAccountDayV3 = useAjax((params) => syncAccountDayV3Api(params), { formatResult: true })
    /*********************************/

    const onFinish: FormProps<any>["onFinish"] = (values) => {
        const { accountIds, pullDate } = values
        let params: any = {}
        params.accountIds = accountIds.split(/[,，\s\n]+/);
        params.beginDate = moment(pullDate[0]).format('YYYY-MM-DD')
        params.endDate = moment(pullDate[1]).format('YYYY-MM-DD')
        console.log('Success:', params);
        syncAccountDay.run(params).then(res => {
            if (res?.data) {
                message.success('拉取成功')
                form.setFieldsValue({})
            }
        })
        syncAccountDayV3.run(params).then(res => {
            if (res?.data) {
                message.success('V3拉取成功')
                form.setFieldsValue({})
            }
        })
    };

    const disabledDate: RangePickerProps['disabledDate'] = (current) => {
        // Can not select days before today and today
        return current && current > moment().endOf('day');
    };

    return <Card
        title={<strong>管理员拉消耗专用</strong>}
        bodyStyle={{ height: 'calc(100vh - 155px)' }}
    >
        <Form
            name="asucBasic"
            layout="vertical"
            style={{ maxWidth: 600 }}
            onFinish={onFinish}
            autoComplete="off"
            form={form}
        >
            <Form.Item
                label={<strong>广告账号</strong>}
                name="accountIds"
                rules={[{ required: true, message: '请输入广告账号!' }]}
            >
                <Input.TextArea rows={6} placeholder="请输入广告账号（多个逗号，空格，换行）" />
            </Form.Item>

            <Form.Item
                label={<strong>日期区间</strong>}
                name="pullDate"
                rules={[{ required: true, message: '请选择日期!' }]}
            >
                <DatePicker.RangePicker disabledDate={disabledDate} />
            </Form.Item>

            <Form.Item wrapperCol={{ offset: 10, span: 14 }}>
                <Button type="primary" htmlType="submit" loading={syncAccountDay.loading}>
                    提交
                </Button>
            </Form.Item>
        </Form>
    </Card>
}

export default AdminSpecialUseConsume