import React, { useState } from 'react';
import PropTypes from 'prop-types';
import { VtxPageLayout, VtxSearch, VtxDatagrid, VtxDatePicker, VtxSelect } from '@vtx/components';
import { Form } from 'antd';
import { useAntdTable } from 'ahooks';
import { getAlarmForValveWellList } from './api';
import useSettings from '../vm-hooks/useSettings';
const { VtxRangePicker } = VtxDatePicker;
const { TableLayout } = VtxPageLayout;
const statusList = [
    {
        value: '',
        name: '全部',
    },
    {
        value: 'YCL',
        name: '已处理',
    },
    {
        value: 'WCL',
        name: '未处理',
    },
];
const HistoryList = ({ info }) => {
    const [form] = Form.useForm();
    const [dataSearch, setDataSearch] = useState({});
    const columns = [
        {
            title: '浓度值',
            dataIndex: 'gasConcentration',
        },
        {
            title: '阈值',
            dataIndex: 'threshold',
        },
        {
            title: '报警开始时间',
            dataIndex: 'alarmStartTime',
        },
        {
            title: '报警结束时间',
            dataIndex: 'alarmEndTime',
        },
        {
            title: '处理状态',
            dataIndex: 'statusStr',
            render: (text, record) => {
                return (
                    <span
                        style={{
                            color: `${
                                record.status === 'WCL'
                                    ? 'rgba(255, 118, 118, 1)'
                                    : 'rgba(85, 253, 255, 1)'
                            }`,
                        }}
                    >
                        {text}
                    </span>
                );
            },
        },
    ];
    const { refresh, search, tableProps } = useAntdTable(
        getAlarmForValveWellList(dataSearch, info.equipmentCodeWithId),
        {
            defaultPageSize: 10,
            form,
            refreshDeps: [dataSearch],
        },
    );
    const { submit, reset } = search;
    const { current, pageSize } = tableProps?.pagination;
    const datagridProps = {
        ...tableProps,
        columns,
        toolbarTilte: '查询结果',
        startIndex: (current - 1) * pageSize + 1,
        onRefresh: refresh,
        toolbar: false,
    };
    const { theme } = useSettings();
    return (
        <TableLayout.Page>
            <TableLayout.Search>
                <Form form={form}>
                    <VtxSearch
                        titles={['报警日期', '处理状态']}
                        gridWeight={[2, 1]}
                        onConfirm={submit}
                        onClear={reset}
                    >
                        <Form.Item>
                            <VtxRangePicker
                                dropdownClassName={theme}
                                onChange={(data, dataStr) => {
                                    setDataSearch({
                                        ...dataSearch,
                                        startTime: dataStr[0],
                                        endTime: dataStr[1],
                                    });
                                }}
                            />
                        </Form.Item>
                        <Form.Item name="status">
                            <VtxSelect dropdownClassName={theme}>
                                {statusList.map(item => (
                                    <VtxSelect.Option key={item.value}>
                                        {item.name}
                                    </VtxSelect.Option>
                                ))}
                            </VtxSelect>
                        </Form.Item>
                    </VtxSearch>
                </Form>
            </TableLayout.Search>
            <TableLayout.Content>
                {/* <TableLayout.Card>
                    <VtxStatisticsColumn>
                        <VtxStatisticsColumn.Item label="从业人员总数" value={total} />
                    </VtxStatisticsColumn>
                </TableLayout.Card> */}
                <TableLayout.Table>
                    <VtxDatagrid {...datagridProps} />
                </TableLayout.Table>
            </TableLayout.Content>
        </TableLayout.Page>
    );
};

HistoryList.propTypes = {
    id: PropTypes.string,
    info: PropTypes.object,
};

export default HistoryList;
