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 VtxGasFillingStationModal from '../vtx-gas-filling-station-modal';
import { getFieIds, getInfo } from './api';
import { VtxMap } from '@vtx/map';
import useMapInfo from '../vm-hooks/useMapInfo';
import useSettings from '../vm-hooks/useSettings';
import * as mapStyle from './mapStyle';
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, geometryInfo } = info;
    const { theme } = useSettings();
    let [lng, lat] = [];
    if (geometryInfo) {
        [lng, lat] = geometryInfo?.lngLats.split(',');
    }
    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="地址">{address || '--'}</VtxFormLayout.FormItem>
                    {geometryInfo && (
                        <div style={{ width: '100%', height: 200 }}>
                            <VtxMap
                                mapId="station"
                                mapType={mapInfo.mapType}
                                mapCenter={[lng, lat]}
                                mapZoomLevel={15}
                                mapPoints={[{ id: '1', longitude: lng, latitude: lat }]}
                                mapStyle={theme === 'dark' ? mapStyle.customStyle : ''}
                                setCenter={`${lng}${lat}`}
                            />
                        </div>
                    )}
                    {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
                                    style={{ width: '200px', height: '200px' }}
                                    {...getImgUrl(id)}
                                />
                            ) : (
                                '--'
                            );
                        }
                        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="station1"
                                        mapType={mapInfo.mapType}
                                        mapCenter={[lng, lat]}
                                        mapZoomLevel={15}
                                        mapPoints={[{ id: '1', longitude: lng, latitude: lat }]}
                                        mapStyle={theme === 'dark' ? mapStyle.customStyle : ''}
                                        setCenter={`${lng}${lat}`}
                                    />
                                </div>
                            );
                        }
                        if (showName.includes('企业')) {
                            element = (
                                <VtxGasEnterpriseModal
                                    label={element}
                                    id={dataJson && dataJson[key]}
                                    urlHead={urlHead}
                                />
                            );
                        } else if (showName.includes('储配站')) {
                            element = (
                                <VtxGasFillingStationModal
                                    label={element}
                                    id={dataJson && dataJson[key]}
                                    urlHead={urlHead}
                                />
                            );
                        }
                        return (
                            <VtxFormLayout.FormItem
                                label={showName}
                                key={showKey}
                                weights={type === 'MAP' ? 3 : 1}
                            >
                                {element || '--'}
                            </VtxFormLayout.FormItem>
                        );
                    })}
                </VtxFormLayout.Pane>
            </VtxFormLayout>
        </Form>
    );
};

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

export default BaseContent;