import { useAjax } from '@/Hook/useAjax';
import { Button, Modal, Table, Tag } from 'antd';
import React, { useEffect, useState } from 'react';
import { DetailsTableConfig } from './tableConfig';
import { getCorpPhoneMsgAlarmDetailsListApi } from '../../API/alarmGl';

interface AlarmGlDetailsProps {
    data: any;
}

/**
 * 详情
 * @param param0 
 * @returns 
 */
const Details: React.FC<AlarmGlDetailsProps> = ({ data }) => {

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

    const getCorpPhoneMsgAlarmDetailsList = useAjax((params) => getCorpPhoneMsgAlarmDetailsListApi(params))
    /****************************************/

    useEffect(() => {
        if (visible) {
            getCorpPhoneMsgAlarmDetailsList.run({ ...queryForm, alarmId: data.id })
        }
    }, [visible, data, queryForm])

    return <>
        <Button type="link" style={{ padding: 0 }} onClick={() => setVisible(true)}>详情</Button>

        {visible && <Modal
            title="告警详情"
            open={visible}
            onCancel={() => setVisible(false)}
            footer={null}
            width={600}
        >
            <Table
                style={{ marginBottom: 1 }}
                dataSource={getCorpPhoneMsgAlarmDetailsList?.data?.data?.records}
                loading={getCorpPhoneMsgAlarmDetailsList?.loading}
                columns={DetailsTableConfig()}
                scroll={{ y: 500 }}
                rowKey={(s) => {
                    return s.id
                }}
                size='small'
                pagination={{
                    total: getCorpPhoneMsgAlarmDetailsList?.data?.data?.total,
                    showTotal: (total) => <Tag color="cyan">总共{total}数据</Tag>,
                    showSizeChanger: true,
                    showLessItems: true,
                    defaultCurrent: 1,
                    defaultPageSize: 20,//默认初始的每页条数
                    current: getCorpPhoneMsgAlarmDetailsList?.data?.data?.current || 1,
                    pageSize: getCorpPhoneMsgAlarmDetailsList?.data?.data?.size || 20,
                    onChange: (page, pageSize) => {
                        setQueryForm({ ...queryForm, pageNum: page, pageSize })
                    }
                }}
            />
        </Modal>}
    </>;
};

export default React.memo(Details);