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 { getStaffPageData } from './api';
import VtxGasStaffModal from '../vtx-gas-staff-modal';
import VtxGasSupplyStationModal from '../vtx-gas-supply-station-modal';
import VtxGasFillingStationModal from '../vtx-gas-filling-station-modal';
import useSettings from '../vm-hooks/useSettings';
const { TableLayout } = VtxPageLayout;
const { Option } = VtxSelect;
const StaffList = ({ param, isShowSupplyStation }) => {
    const [form] = Form.useForm();
    const columns = [
        {
            title: '姓名',
            dataIndex: 'name',
            render: (text, record) => {
                const { id, name } = record;
                return <VtxGasStaffModal id={id} label={name} urlHead={param.urlHead || null} />;
            },
        },
        {
            title: '岗位（角色）',
            dataIndex: 'jobStr',
        },
        {
            title: isShowSupplyStation ? '负责供应站' : '所属储配站',
            dataIndex: 'supplyStationName',
            render: (text, record) => {
                const {
                    supplyStationId,
                    supplyStationName,
                    storageAndDistributionStationId,
                    storageAndDistributionStationName,
                } = record;
                return isShowSupplyStation ? (
                    <VtxGasSupplyStationModal id={supplyStationId} label={supplyStationName} urlHead={param.urlHead || null} />
                ) : (
                    <VtxGasFillingStationModal
                        id={storageAndDistributionStationId}
                        label={storageAndDistributionStationName}
                        urlHead={param.urlHead || null}
                    />
                );
            },
        },
        {
            title: '人员状态',
            dataIndex: 'statusStr',
        },
    ];
    const { refresh, search, tableProps } = useAntdTable(getStaffPageData(param), {
        defaultPageSize: 10,
        form,
        refreshDeps: [param],
    });
    const { submit, reset } = search;
    const { current, pageSize } = tableProps?.pagination;
    const { theme } = useSettings();
    const datagridProps = {
        ...tableProps,
        columns,
        toolbar: false,
        toolbarTilte: '查询结果',
        startIndex: (current - 1) * pageSize + 1,
        onRefresh: refresh,
    };

    return (
        <TableLayout.Page>
            <TableLayout.Search>
                <Form form={form}>
                    <VtxSearch
                        titles={['人员状态']}
                        gridWeight={[1]}
                        onConfirm={submit}
                        onClear={reset}
                    >
                        <Form.Item name="status">
                            <VtxSelect dropdownClassName={theme}>
                                <Option key={1}>正常</Option>
                                <Option key={2}>注销</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>
    );
};

StaffList.propTypes = {
    param: PropTypes.object,
    isShowSupplyStation: PropTypes.bool,
};

export default StaffList;