import { useAjax } from '@/Hook/useAjax';
import { getLocalCsgroupDayIndexListApi } from '@/services/adqV3/monitorEWList';
import { Modal, Statistic, Table } from 'antd';
import React, { useEffect, useState } from 'react';
import '../tencentAdPutIn/index.less';

interface AstraGroupHourProps {
    localCsgroupName: string;
    data: {
        day: string;
        localCsgroupId: number;
    }
}
const AstraGroupIndexEle: React.FC<AstraGroupHourProps> = ({ localCsgroupName, data }) => {

    /***************************************/
    const [visible, setVisible] = useState<boolean>(false);
    const [queryParamsNew, setQueryParamsNew] = useState<{ pageNum: number, pageSize: number }>({ pageNum: 1, pageSize: 20 });

    const getLocalCsgroupDayIndexList = useAjax((params) => getLocalCsgroupDayIndexListApi(params))
    /***************************************/

    useEffect(() => {
        if (visible) {
            getLocalCsgroupDayIndexList.run({ ...data, ...queryParamsNew })
        }
    }, [data, visible, queryParamsNew]);

    return <div>
        <a style={{ fontSize: 12 }} onClick={() => setVisible(true)}>索引数据</a>
        {visible && <Modal
            title={<strong>{data.day}_{localCsgroupName} 索引数据</strong>}
            open={visible}
            onCancel={() => setVisible(false)}
            footer={null}
            className='modalResetCss'
            width={1000}
        >
            <Table
                dataSource={getLocalCsgroupDayIndexList?.data?.records}
                columns={[
                    {
                        title: '日期',
                        dataIndex: 'day',
                        key: 'day',
                        width: 80,
                        ellipsis: true,
                        align: 'center',
                        render(value) {
                            return <span style={{ fontSize: 12 }}>{value}</span>
                        },
                    },
                    {
                        title: '更新序列号',
                        dataIndex: 'index',
                        key: 'index',
                        width: 80,
                        ellipsis: true,
                        align: 'center',
                        render(value) {
                            return <span style={{ fontSize: 12 }}>{value}</span>
                        },
                    },
                    {
                        title: '消耗',
                        dataIndex: 'cost',
                        key: 'cost',
                        width: 80,
                        sorter: true,
                        align: 'right',
                        render(value) {
                            return <Statistic value={value || 0} />
                        },
                    },
                    {
                        title: '加粉次数(广告)',
                        dataIndex: 'scanFollowCount',
                        key: 'scanFollowCount',
                        width: 80,
                        sorter: true,
                        align: 'right',
                        render(value) {
                            return <span style={{ fontSize: 12 }}>{value}</span>
                        },
                    },
                    {
                        title: '加粉人数(广告)',
                        dataIndex: 'scanFollowUserCount',
                        key: 'scanFollowUserCount',
                        width: 80,
                        sorter: true,
                        align: 'right',
                        render(value) {
                            return <span style={{ fontSize: 12 }}>{value}</span>
                        },
                    },
                    {
                        title: '加粉人数',
                        dataIndex: 'addUserCount',
                        key: 'addUserCount',
                        width: 80,
                        sorter: true,
                        align: 'right',
                        render(value) {
                            return <span style={{ fontSize: 12 }}>{value}</span>
                        },
                    },
                    {
                        title: '开始时间',
                        dataIndex: 'beginTime',
                        key: 'beginTime',
                        width: 140,
                        ellipsis: true,
                        align: 'center',
                        render(value) {
                            return <span style={{ fontSize: 12 }}>{value || '--'}</span>
                        },
                    },
                    {
                        title: '数据更新时间',
                        dataIndex: 'dataTime',
                        key: 'dataTime',
                        width: 140,
                        ellipsis: true,
                        align: 'center',
                        render(value) {
                            return <span style={{ fontSize: 12 }}>{value}</span>
                        },
                    }
                ]}
                size='small'
                bordered
                rowKey={'id'}
                loading={getLocalCsgroupDayIndexList.loading}
                scroll={{ x: 950 }}
                pagination={{
                    total: getLocalCsgroupDayIndexList.data?.total,
                    defaultPageSize: 20,
                    current: queryParamsNew.pageNum,
                    pageSize: queryParamsNew.pageSize,
                }}
                onChange={(pagination, _, sorter: any) => {
                    const { current, pageSize } = pagination
                    const newQueryFormNew = JSON.parse(JSON.stringify(queryParamsNew))
                    if (sorter && sorter?.order) {
                        newQueryFormNew['sortAsc'] = sorter?.order === 'ascend' ? true : false
                        newQueryFormNew['sortFiled'] = sorter?.field
                    } else {
                        delete newQueryFormNew['sortAsc']
                        delete newQueryFormNew['sortFiled']
                    }
                    newQueryFormNew.pageNum = current || newQueryFormNew.pageNum
                    newQueryFormNew.pageSize = pageSize || newQueryFormNew.pageSize
                    setQueryParamsNew({ ...newQueryFormNew })
                }}
            />
        </Modal>}
    </div>;
};

export default React.memo(AstraGroupIndexEle);