ad-manage/src/components/EarlyWarning/expandedRowTable.tsx

import { useAjax } from "@/Hook/useAjax"
import { delAdSysWarningRuleApi, delAdSysWarningRuleBlackApi, DelAdSysWarningRuleProps, getSysWarningRuleApi, removeAccountApi } from "@/services/adMonitor/earlyWarning"
import { SyncOutlined } from "@ant-design/icons"
import { Drawer, message, Space, Table } from "antd"
import React, { useEffect, useState } from "react"
import columns, { columnsAccount, columnsBlack } from "./expandedColumns"

interface Props {
    data: any,
    onClose?: () => void
    onChange?: () => void
    visible?: boolean
}
const ExpandedRowTable: React.FC<Props> = ({ data, visible, onChange, onClose }) => {

    /*****************************/
    const [adgroupList, setAdgroupList] = useState<any[]>([])
    const [accountList, setAccountList] = useState<any[]>([])
    const [blackAdgroupList, setBlackAdgroupList] = useState<any[]>([])
    const getSysWarningRule = useAjax((params) => getSysWarningRuleApi(params), { formatResult: true })
    const delAdSysWarningRule = useAjax((params) => delAdSysWarningRuleApi(params))
    const delAdSysWarningRuleBlack = useAjax((params) => delAdSysWarningRuleBlackApi(params))
    const removeAccount = useAjax((params) => removeAccountApi(params))
    /*****************************/

    useEffect(() => {
        if (data?.id) {
            getList()
        }
    }, [])

    const getList = () => {
        getSysWarningRule.run(data.id).then(res => {
            console.log(res)
            if (res?.data) {
                setAdgroupList(res?.data?.adgroupList)
                setAccountList(res?.data?.accountList)
                setBlackAdgroupList(res?.data?.blackAdgroupList)
            }
        })
    }


    const delAdgroup = (value: DelAdSysWarningRuleProps) => {
        let { accountId, adgroupId } = value
        delAdSysWarningRule.run({ accountId, adgroupId, ruleId: data.id }).then(res => {
            message.success('删除成功')
            getList()
        })
    }

    const delAccount = (value: any) => {
        let { accountId } = value
        removeAccount.run({ accountId, ruleId: data.id }).then(res => {
            message.success('删除成功')
            getList()
        })
    }

    const delBlack = (value: DelAdSysWarningRuleProps) => {
        let { accountId, adgroupId } = value
        delAdSysWarningRuleBlack.run({ accountId, adgroupId, ruleId: data.id }).then(res => {
            message.success('删除成功')
            getList()
        })
    }

    return <Drawer
        title="详情"
        visible={visible}
        onClose={onClose}
        width={'70%'}
        extra={<a onClick={() => getList()}><SyncOutlined />刷新</a>}
    >
        <Space style={{ width: '100%' }} direction="vertical">
            <Table
                size="small"
                bordered
                columns={columns(delAdgroup)}
                loading={getSysWarningRule.loading}
                dataSource={adgroupList}
                rowKey={'adgroupId'}
                title={() => <div style={{ fontWeight: 700, color: '#1890ff' }}>
                    <span>广告列表</span>
                </div>}
            />
            <Table
                size="small"
                bordered
                columns={columnsAccount(delAccount)}
                loading={getSysWarningRule.loading}
                dataSource={accountList}
                rowKey={'accountId'}
                title={() => <div style={{ fontWeight: 700, color: '#1890ff' }}>
                    <span>广告账号列表</span>
                </div>}
            />
            <Table
                size="small"
                bordered
                columns={columnsBlack(delBlack)}
                loading={getSysWarningRule.loading}
                dataSource={blackAdgroupList}
                rowKey={'adgroupId'}
                title={() => <div style={{ fontWeight: 700, color: '#1890ff' }}>
                    <span>广告黑名单列表</span>
                </div>}
            />
        </Space>
    </Drawer>;
}

export default React.memo(ExpandedRowTable)