import { useAjax } from "@/Hook/useAjax"
import TableData from "@/pages/launchSystemNew/components/TableData"
import { GetAdWarningLogAdProps, getAdWarningLogAdListApi } from "@/services/adMonitor/earlyWarning"
import { Drawer, Input, Select, Space } from "antd"
import React, { useEffect, useState } from "react"
import { ruleAdLogTableConfig } from "./tableConfig"

const OperationType = [
    { label: '告警', value: 0 },
    { label: '暂停广告', value: 1 },
    { label: '广告置顶标黄', value: 5 },
    { label: '广告置顶标红', value: 6 }
]

interface Props {
    accountId: string
    adgroupName: string,
    adgroupId: string,
    onClose?: () => void
    visible?: boolean
}
/**
 * 通过规则获取日志
 * @returns 
 */
const RuleAccountLog: React.FC<Props> = ({ accountId, adgroupName, adgroupId, onClose, visible }) => {

    /****************************/
    const [queryForm, setQueryForm] = useState<GetAdWarningLogAdProps>({ pageNum: 1, pageSize: 20, adgroupId, accountId })
    const getAdWarningLogAdList = useAjax((params) => getAdWarningLogAdListApi(params))
    /****************************/

    useEffect(() => {
        getAdWarningLogAdList.run(queryForm)
    }, [queryForm])

    return <Drawer title={`${adgroupName} 操作日志`} placement="right" width={'70%'} onClose={onClose} open={visible}>
        <TableData
            size="small"
            isCard={false}
            columns={() => ruleAdLogTableConfig()}
            ajax={getAdWarningLogAdList}
            dataSource={getAdWarningLogAdList?.data?.records}
            loading={getAdWarningLogAdList?.loading}
            total={getAdWarningLogAdList?.data?.total}
            page={queryForm.pageNum}
            pageSize={queryForm.pageSize}
            onChange={({ pagination }: any) => {
                let { current, pageSize } = pagination
                let newQueryForm = JSON.parse(JSON.stringify(queryForm))
                newQueryForm.pageNum = current
                newQueryForm.pageSize = pageSize
                setQueryForm(newQueryForm)
            }}
            gutter={[0, 10]}
            scroll={{ x: 1200 }}
            leftChild={<Space>
                <Input placeholder="请输入规则ID" allowClear value={queryForm.ruleId} onChange={(e) => setQueryForm({ ...queryForm, ruleId: e.target.value, pageNum: 1 })} />
                <Select
                    style={{ width: 150 }}
                    showSearch
                    allowClear
                    placeholder="选择操作类型"
                    filterOption={(input, option) =>
                        ((option?.label ?? '') as any).toLowerCase().includes(input.toLowerCase())
                    }
                    value={queryForm.operationType}
                    onChange={(e) => setQueryForm({ ...queryForm, operationType: e, pageNum: 1 })}
                >
                    {OperationType.map((item, index) => <Select.Option value={item.value} key={item.value}>{item.label}</Select.Option>)}
                </Select>
            </Space>}
        />
    </Drawer>
}

export default React.memo(RuleAccountLog)