import React, { useEffect, useState } from 'react';
import PropTypes from 'prop-types';
import BaseContent from './base';
import './style';
import { getInfo } from './api';
import BottleList from './bottleList';
import SiteList from './siteList';
import UserList from './userList';
import VmGasModal from '../vm-gas-modal';
import useModal from '../vm-hooks/useModal';
import StaffList from '../staff-list';
import { getUrlParam } from '@vtx/utils';

const TABS_BASE = 'gas-enterprise-base';
const TABS_STAFF = 'gas-enterprise-staff';
const TABS_CZ = 'gas-enterprise-cz';
const TABS_CPZ = 'gas-enterprise-cpz';
const TABS_GYZ = 'gas-enterprise-gyz';
const TABS_USER = 'gas-enterprise-user';
const TABS_BOTTLE = 'gas-enterprise-bottle';

const Modal = ({ id, urlHead, ...resetProps }) => {
    const [isShowBottle, setIsShowBottle] = useState(false);
    const [info, setInfo] = useState({});
    useEffect(() => {
        if (id) {
            getInfo(id, urlHead).then(data => {
                if (data.companyType?.includes('pzq')) {
                    setIsShowBottle(true);
                }
                setInfo(data);
            });
        }
    }, [id, urlHead]);

    const tabs = [
        {
            value: '企业信息',
            key: TABS_BASE,
            content: <BaseContent info={info} />,
        },
        {
            value: '从业人员档案',
            key: TABS_STAFF,
            content: <StaffList param={{ companyId: id, urlHead }} isShowSupplyStation={true} />,
        },
        {
            value: '场站档案',
            key: TABS_CZ,
            content: <SiteList id={id} code="gas_cz" urlHead={urlHead} />,
        },
        {
            value: '储配站档案',
            key: TABS_CPZ,
            content: <SiteList id={id} code="gas_cpz" urlHead={urlHead} />,
        },
        {
            value: '供应站档案',
            key: TABS_GYZ,
            content: <SiteList id={id} code="gas_gyz" urlHead={urlHead} />,
        },
        {
            value: '用户档案',
            key: TABS_USER,
            content: <UserList id={id} urlHead={urlHead} />,
        },
    ];

    if (getUrlParam().carqFlag == 'true') {
        tabs.splice(3, 2);
    }

    if (isShowBottle) {
        tabs.splice(1, 0, {
            value: '气瓶档案',
            key: TABS_BOTTLE,
            content: <BottleList id={id} urlHead={urlHead} />,
        });
    }

    return <VmGasModal tabs={tabs} title="燃气企业" {...resetProps} />;
};

const VtxGasEnterpriseModal = props => {
    const { label, id, urlHead } = props;
    const { showModal, ...modalProps } = useModal();

    return (
        <>
            {label ? (
                <a type="link" onClick={showModal}>
                    {label}
                </a>
            ) : (
                <span>-</span>
            )}
            {modalProps.visible && <Modal id={id} urlHead={urlHead} {...modalProps} />}
        </>
    );
};

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

VtxGasEnterpriseModal.propTypes = {
    id: PropTypes.string.isRequired,
    label: PropTypes.string.isRequired,
    urlHead: PropTypes.string,
};

VtxGasEnterpriseModal.Modal = Modal;

export default VtxGasEnterpriseModal;