import React from "react";
import {Panel} from "../../components/panel";
import {AppList} from "../../components/AppList";
import {AppModel, EventDataModel, EventModel} from "../../../model";
import {appList, appEventList, appEventDataList} from "../../service/api.app";
import './style.scss'
import {Space, Table} from "@douyinfe/semi-ui";
import {formatDate} from "../../../utils/date";
import {useInterval} from "ahooks";

export const DashboardIndex: React.FC = () => {
    // 数据
    const [apps, setApps] = React.useState<AppModel[]>([]);
    const [currentAppID, setCurrentAppID] = React.useState<number>(0);
    const [events, setEvents] = React.useState<EventModel[]>([]);
    const [eventDataList, setEventDataList] = React.useState<EventDataModel[]>([]);
    const [page, setPage] = React.useState<number>(1);
    const [dataTotal, setDataTotal] = React.useState<number>(0);

    const eventDataColumns = [
        {
            title: '编号',
            dataIndex: 'id',
            width: 60
        },
        {
            title: '事件',
            dataIndex: 'title',
            width: 80
        },
        {
            title: '路径',
            dataIndex: 'path',
            width: 120
        },
        {
            title: '访问者浏览器',
            ellipsis: true,
            dataIndex: 'browser'
        },
        {
            title: '来源',
            dataIndex: 'ip',
            width: 80
        },
        {
            title: '分辨率',
            dataIndex: 'resolution',
            width: 120
        },
        {
            title: '日期',
            dataIndex: 'create_time',
            render: (text: string) => formatDate(text),
            width: 180
        },
    ]
    // 加载应用所有的事件
    const getAppEvents = () => {
        appEventList(currentAppID).then(list => setEvents(list))
    }

    // 加载引用所有事件上报的数据
    const loadAppEventsAndDataList = (page = 1) => {
        if (currentAppID < 1) return;
        appEventDataList({
            appId: currentAppID,
            pageSize: 10,
            page
        }).then(list => {
            setEventDataList(list)
            setPage(page)
        })
    }

    const getAppEventAndData = () => {
        if (currentAppID > 0) {
            getAppEvents()
            loadAppEventsAndDataList()
        }
    }
    // 10s 自动刷新
    useInterval(loadAppEventsAndDataList, 10000)

    React.useEffect(() => {
        appList().then(list => setApps(list))
    }, [])
    React.useEffect(getAppEventAndData, [currentAppID])


    return (
        <div className="dashboard container">
            <div>
                <h1 className="page-title">Dashboard</h1>
            </div>

            <Panel title="我的应用" noPadding>
                <AppList
                    list={apps}
                    onItemClick={(it) => setCurrentAppID(it.id)}
                />
            </Panel>
            {currentAppID > 0 && <>
                <Panel title="事件列表" noPadding>
                    <div className="app-list-wrapper">
                        {events.map(it => (
                            <div key={it.id} className="list-link-item flex space-between">
                                <Space className="space">
                                    <span>{it.id}</span>
                                    <span>{it.title}</span>
                                </Space>
                                <span>查看</span>
                            </div>
                        ))}
                    </div>
                </Panel>
                <Panel title="事件数据" noPadding>
                    <Table columns={eventDataColumns} dataSource={eventDataList} pagination={{
                        currentPage: page,
                        pageSize: 10,
                        total: dataTotal,
                        onPageChange: loadAppEventsAndDataList,
                        hideOnSinglePage: true
                    }}/>
                </Panel>
            </>}
        </div>
    );
};