import React from 'react';
import PropTypes from 'prop-types';
import { Form } from 'antd';
import { VtxPageLayout, VtxDatagrid } from '@vtx/components';
import { useAntdTable } from 'ahooks';
import { getSiteList } from './api';
import VtxGasSupplyStationModal from '../vtx-gas-supply-station-modal';
import VtxGasFillingStationModal from '../vtx-gas-filling-station-modal';
const { TableLayout } = VtxPageLayout;

const SiteList = ({ id, code, urlHead }) => {
    const [form] = Form.useForm();
    const columns = [
        {
            title: '名称',
            dataIndex: 'name',
            render: (text, record) => {
                if (code === 'gas_gyz') {
                    return <VtxGasSupplyStationModal id={record.id} label={text} urlHead={urlHead} />;
                } else if (code === 'gas_cpz') {
                    return <VtxGasFillingStationModal id={record.id} label={text} urlHead={urlHead} />;
                }
                return text;
            },
        },
        {
            title: '站点负责人',
            dataIndex: 'chargePerson',
            render: (text, record) => {
                return record?.dataJson?.chargePerson;
            },
        },
        {
            title: '联系方式',
            dataIndex: 'chargePersonTel',
            render: (text, record) => {
                return record?.dataJson?.chargePersonTel;
            },
        },
    ];
    const { refresh, tableProps } = useAntdTable(getSiteList(id, code), {
        defaultPageSize: 10,
        form,
        refreshDeps: [id, code],
    });
    const { current, pageSize } = tableProps?.pagination;
    const datagridProps = {
        ...tableProps,
        columns,
        toolbarTilte: '查询结果',
        startIndex: (current - 1) * pageSize + 1,
        onRefresh: refresh,
        toolbar: false,
    };
    return (
        <TableLayout.Page>
            <TableLayout.Content style={{ top: '16px' }}>
                <TableLayout.Table>
                    <VtxDatagrid {...datagridProps} />
                </TableLayout.Table>
            </TableLayout.Content>
        </TableLayout.Page>
    );
};

SiteList.propTypes = {
    id: PropTypes.string.isRequired,
    code: PropTypes.string.isRequired,
    urlHead: PropTypes.string,
};

export default SiteList;