import React, { useState } from 'react';
import PropTypes from 'prop-types';
import { VtxPageLayout, VtxSearch, VtxDatagrid, VtxDatePicker } from '@vtx/components';
import { Form } from 'antd';
import { useAntdTable } from 'ahooks';
import { getSecurityCheckRecordPage } from './api';
import VtxGasEnterpriseModal from '../vtx-gas-enterprise-modal';
import VtxGasSecurityCheckModal from '../vtx-gas-security-check-modal';
import VtxGasStaffModal from '../vtx-gas-staff-modal';
import useSettings from '../vm-hooks/useSettings';
import dayjs from 'dayjs';
const { TableLayout } = VtxPageLayout;
const { VtxRangePicker } = VtxDatePicker;
const SecurityCheckRecord = ({ id, urlHead }) => {
    const [form] = Form.useForm();
    const [dataSearch, setDataSearch] = useState({});
    const { refresh, search, tableProps } = useAntdTable(
        getSecurityCheckRecordPage(id, dataSearch, urlHead),
        {
            defaultPageSize: 10,
            form,
            refreshDeps: [id, urlHead],
        },
    );
    const { submit, reset } = search;
    const { current, pageSize } = tableProps?.pagination;
    const columns = [
        {
            title: '安检人员',
            dataIndex: 'gasStaffName',
            render: (text, record) => {
                const { gasStaffName, gasStaffId } = record;
                return <VtxGasStaffModal label={gasStaffName} id={gasStaffId} urlHead={urlHead} />;
            },
        },
        {
            title: '所属企业',
            dataIndex: 'gasCompanyName',
            render: (text, record) => {
                const { gasCompanyName, gasCompanyId } = record;
                return <VtxGasEnterpriseModal label={gasCompanyName} id={gasCompanyId} urlHead={urlHead} />;
            },
        },
        {
            title: '安检日期',
            dataIndex: 'checkDate',
        },
        {
            title: '结论',
            dataIndex: 'resultStr',
            render: (text, record) => {
                const { resultStr, id } = record;
                return <VtxGasSecurityCheckModal label={resultStr} id={id} urlHead={urlHead} />;
            },
        },
    ];
    const datagridProps = {
        ...tableProps,
        columns,
        toolbarTilte: '查询结果',
        startIndex: (current - 1) * pageSize + 1,
        onRefresh: refresh,
        toolbar: false,
    };
    const { theme } = useSettings();
    return (
        <TableLayout.Page>
            <TableLayout.Search>
                <VtxSearch titles={['日期']} gridWeight={[2]} onConfirm={submit} onClear={reset}>
                    <Form.Item>
                        <VtxRangePicker
                            dropdownClassName={theme}
                            onChange={(data, dataStr) => {
                                setDataSearch({
                                    ...dataSearch,
                                    checkDateStart: dayjs(dataStr[0]).format('YYYY-MM-DD 00:00:00'),
                                    checkDateEnd: dayjs(dataStr[1]).format('YYYY-MM-DD 23:59:59'),
                                });
                            }}
                        />
                    </Form.Item>
                </VtxSearch>
            </TableLayout.Search>
            <TableLayout.Content>
                <TableLayout.Table>
                    <VtxDatagrid {...datagridProps} />
                </TableLayout.Table>
            </TableLayout.Content>
        </TableLayout.Page>
    );
};

SecurityCheckRecord.propTypes = {
    id: PropTypes.string,
    urlHead: PropTypes.string,
};

export default SecurityCheckRecord;