import React from 'react';
import PropTypes from 'prop-types';
import { VtxPageLayout, VtxSearch, VtxDatagrid, VtxSelect } from '@vtx/components';
import { Form } from 'antd';
import { useAntdTable } from 'ahooks';
import { getUserPageData } from './api';
import DivisionTreeSelect from '../division-tree-select';
import VtxGasUserModal from '../vtx-gas-user-modal';
import useGasEnumList from '../vm-hooks/useGasEnumList';
import useSettings from '../vm-hooks/useSettings';
const { TableLayout } = VtxPageLayout;
const { Option } = VtxSelect;
const UserList = ({ id, urlHead }) => {
    const [form] = Form.useForm();
    const { enumList: userTypeEnum } = useGasEnumList('GasUserTypeEnum');
    const columns = [
        {
            title: '用户名',
            dataIndex: 'name',
            render: (text, record) => {
                const { id, name } = record;
                return <VtxGasUserModal id={id} label={name} urlHead={urlHead} />;
            },
        },
        {
            title: '用户类别',
            dataIndex: 'type',
            render: text => {
                const userType = (userTypeEnum || []).find(item => item.id === text);
                return userType?.name;
            },
        },
        {
            title: '联系方式',
            dataIndex: 'phone',
        },
        {
            title: '行政区划',
            dataIndex: 'regionName',
        },
    ];
    const { refresh, search, tableProps } = useAntdTable(getUserPageData(id, urlHead), {
        defaultPageSize: 10,
        form,
        refreshDeps: [id, urlHead],
    });
    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={[1]}
                        onConfirm={submit}
                        onClear={reset}
                    >
                        <Form.Item name="type">
                            <VtxSelect dropdownClassName={theme}>
                                {userTypeEnum &&
                                    userTypeEnum.map(item => (
                                        <Option key={item.id}>{item.name}</Option>
                                    ))}
                            </VtxSelect>
                        </Form.Item>
                        <Form.Item
                            name="regionId"
                            getValueFromEvent={({ keys }) => {
                                return keys[0];
                            }}
                        >
                            <DivisionTreeSelect />
                        </Form.Item>
                    </VtxSearch>
                </Form>
            </TableLayout.Search>
            <TableLayout.Content>
                <TableLayout.Table>
                    <VtxDatagrid {...datagridProps} />
                </TableLayout.Table>
            </TableLayout.Content>
        </TableLayout.Page>
    );
};

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

export default UserList;