import { VtxFormLayout, VtxImage } from '@vtx/components';
import { Form } from 'antd';
import React, { useEffect, useState } from 'react';
import PropTypes from 'prop-types';
import VtxGasEnterpriseModal from '../vtx-gas-enterprise-modal';
import { getFieIds, getInfo } from './api';
import { VtxMap } from '@vtx/map';
import useMapInfo from '../vm-hooks/useMapInfo';
import useSettings from '../vm-hooks/useSettings';
import { getImgUrl } from '../util';

const BaseContent = props => {
    const { id, urlHead } = props;
    const [info, setInfo] = useState({});
    const [fieIds, setFieIds] = useState([]);
    const { mapInfo } = useMapInfo();
    useEffect(() => {
        getFieIds().then(data => {
            setFieIds(data);
        });
        if (id) {
            getInfo(id).then(data => {
                setInfo(data);
            });
        }
    }, [id]);
    const { name, address, divisionName, dataJson, buildDate, description } = info;
    const { theme } = useSettings();
    useEffect(() => {
        let wrapScroll = document.querySelector('.ant-modal-body');
        wrapScroll &&
            wrapScroll.addEventListener('scroll', () => {
                window.scrollY = wrapScroll.scrollTop;
            });
    }, []);
    return (
        <Form layout="inline">
            <VtxFormLayout mode="view" cols={3}>
                <VtxFormLayout.Pane title="基本信息">
                    <VtxFormLayout.FormItem label="储配站名称">
                        {name || '--'}
                    </VtxFormLayout.FormItem>
                    <VtxFormLayout.FormItem label="行政区划">
                        {divisionName || '--'}
                    </VtxFormLayout.FormItem>
                    <VtxFormLayout.FormItem label="建站时间">
                        {buildDate || '--'}
                    </VtxFormLayout.FormItem>
                    <VtxFormLayout.FormItem label="地址">{address || '--'}</VtxFormLayout.FormItem>
                    {fieIds.map(fieId => {
                        const {
                            showName,
                            showKey,
                            key,
                            component: { type },
                        } = fieId;
                        let element = dataJson && dataJson[showKey];
                        if (type === 'IMAGE') {
                            let id = '';
                            if (dataJson && dataJson[showKey]) {
                                id = JSON.parse(dataJson[showKey])[0]?.id;
                            }
                            element = id ? (
                                <VtxImage
                                    {...getImgUrl(id)}
                                    style={{ width: '200px', height: '200px' }}
                                />
                            ) : (
                                '--'
                            );
                        }
                        if (type === 'MAP') {
                            let [lng, lat] = [];
                            if (dataJson && dataJson[showKey]?.lngLats) {
                                [lng, lat] = dataJson[showKey]?.lngLats.split(',');
                            }
                            element = lng && lat && (
                                <div style={{ width: '100%', height: 200 }}>
                                    <VtxMap
                                        mapId="fillingStation"
                                        mapType={mapInfo.mapType}
                                        mapCenter={[lng, lat]}
                                        mapZoomLevel={15}
                                        mapPoints={[{ id: '1', longitude: lng, latitude: lat }]}
                                        mapStyle={theme === 'dark' ? theme : ''}
                                        setCenter={`${lng}${lat}`}
                                    />
                                </div>
                            );
                        }
                        if (showName.includes('企业')) {
                            element = (
                                <VtxGasEnterpriseModal
                                    label={element}
                                    id={dataJson && dataJson[key]}
                                    urlHead={urlHead}
                                />
                            );
                        }
                        return (
                            <VtxFormLayout.FormItem
                                label={showName}
                                key={showKey}
                                weights={type === 'MAP' ? 3 : 1}
                            >
                                {element || '--'}
                            </VtxFormLayout.FormItem>
                        );
                    })}
                    <VtxFormLayout.FormItem label="备注" weights={3}>
                        {description}
                    </VtxFormLayout.FormItem>
                </VtxFormLayout.Pane>
            </VtxFormLayout>
        </Form>
    );
};

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

export default BaseContent;