import React, { useState } from 'react';
import PropTypes from 'prop-types';
import { VtxPageLayout, VtxSearch, VtxDatagrid, VtxSelect, VtxDatePicker } from '@vtx/components';
import { Form } from 'antd';
import { useAntdTable } from 'ahooks';
import { getBottleOperateLogPage } from './api';
import useGasEnumList from '../vm-hooks/useGasEnumList';
import VtxGasCylinderFileModal from '../vtx-gas-cylinder-file-modal';
import VtxGasEnterpriseModal from '../vtx-gas-enterprise-modal';
import VtxGasUserModal from '../vtx-gas-user-modal';
import useSettings from '../vm-hooks/useSettings';
const { TableLayout } = VtxPageLayout;
const { Option } = VtxSelect;
const { VtxRangePicker } = VtxDatePicker;
const BottleOperateLog = ({ id, operateTypes, urlHead }) => {
    const [form] = Form.useForm();
    const [dataSearch, setDataSearch] = useState({});
    const { refresh, search, tableProps } = useAntdTable(
        getBottleOperateLogPage(id, operateTypes, dataSearch, urlHead),
        {
            defaultPageSize: 10,
            form,
            refreshDeps: [id],
        },
    );

    const { enumList } = useGasEnumList('BottleOperateType');

    const { submit, reset } = search;
    const { current, pageSize } = tableProps?.pagination;
    let columns = [
        {
            title: '气瓶条码号',
            dataIndex: 'bottleNo',
            render: (text, record) => {
                const { bottleInfoId, bottleNo } = record;
                return <VtxGasCylinderFileModal id={bottleInfoId} label={bottleNo} urlHead={urlHead} />;
            },
        },
        {
            title: '操作类型',
            dataIndex: 'operateTypeValue',
        },
        {
            title: '负责企业',
            dataIndex: 'companyName',
            render: (text, record) => {
                const { gasCompanyId, companyName } = record;
                return <VtxGasEnterpriseModal id={gasCompanyId} label={companyName} urlHead={urlHead} />;
            },
        },
        {
            title: '操作时间',
            dataIndex: 'operateTime',
        },
        {
            title: '用气户',
            dataIndex: 'gasUserName',
            render: (text, record) => {
                const { gasUserId, gasUserName } = record;
                return <VtxGasUserModal id={gasUserId} label={gasUserName} urlHead={urlHead} />;
            },
        },
        {},
    ];
    if (operateTypes === 'OPERATE_1,OPERATE_2,OPERATE_3') {
        columns = [
            columns[0],
            columns[1],
            columns[3],
            {
                title: '详细内容',
                dataIndex: 'content',
            },
        ];
    }
    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="operateType">
                            <VtxSelect dropdownClassName={theme}>
                                {enumList.map(item => (
                                    <Option key={item.id}>{item.name}</Option>
                                ))}
                            </VtxSelect>
                        </Form.Item>
                    </VtxSearch>
                </Form>
            </TableLayout.Search>
            <TableLayout.Content>
                <TableLayout.Table>
                    <VtxDatagrid {...datagridProps} />
                </TableLayout.Table>
            </TableLayout.Content>
        </TableLayout.Page>
    );
};

BottleOperateLog.propTypes = {
    id: PropTypes.string,
    type: PropTypes.string,
    operateTypes: PropTypes.string,
    urlHead: PropTypes.string,
};

export default BottleOperateLog;