import React, { forwardRef, useState, useEffect } from 'react';
import PropTypes from 'prop-types';
import { useSetState } from 'ahooks';
import VtxBaseModal from '../vtx-base-modal';
import BaseContent from './base';
import CollectContent from './collect';
import './style';
const TABS_BASE = 'construction-site-base';
const TABS_COLLECT = 'construction-site-collect';

const VtxConstructionSiteModal = forwardRef(props => {
    const { id, title, width, subTitle, visible, onCancel } = props;
    const [code, setCode] = useState(''); //存放基础设施类型code及基础设施code
    const [state, setState] = useSetState({
        tab: TABS_BASE,
        time: new Date().toString(),
    });
    useEffect(() => {
        if (visible) {
            setState({ time: new Date().toString() });
        }
    }, [visible]);
    return (
        <VtxBaseModal
            title={title}
            subTitle={subTitle}
            width={width}
            visible={visible}
            onCancel={onCancel}
            onTabsChange={tab => {
                setState({ tab });
            }}
            tabs={[
                { key: TABS_BASE, value: '基础信息' },
                { key: TABS_COLLECT, value: '收运信息' },
            ]}
            contents={[
                { key: TABS_BASE, content: <BaseContent id={id} setCode={setCode} /> },
                {
                    key: TABS_COLLECT,
                    content: <CollectContent id={id} code={code} seed={JSON.stringify(state)} />,
                },
            ]}
        />
    );
});

VtxConstructionSiteModal.propTypes = {
    id: PropTypes.string,
    title: PropTypes.string,
    width: PropTypes.number,
    subTitle: PropTypes.string,
    visible: PropTypes.bool,
    onCancel: PropTypes.func,
};
export default VtxConstructionSiteModal;