import { VtxFormLayout } from '@vtx/components';
import { Form } from 'antd';
import React, { useEffect } from 'react';
import PropTypes from 'prop-types';
import { VtxMap } from '@vtx/map';
import useMapInfo from '../vm-hooks/useMapInfo';
import useSettings from '../vm-hooks/useSettings';
import { getUrlParam } from '@vtx/utils';
import * as mapStyle from './mapStyle';

const BaseContent = props => {
    const { info } = props;
    const { mapInfo } = useMapInfo();
    const [lng, lat] = info?.location?.lngLats?.split(',') || [];
    const {
        name,
        address,
        creditCode,
        regionStr,
        remark,
        legalPersonName,
        legalPersonPhone,
        contactPersonName,
        legalPersonIdCard,
        contactPersonIdCard,
        safeHeader,
        safeHeaderPhone,
        safeHeaderIdCard,
        techHeader,
        techHeaderPhone,
        techHeaderIdCard,
        license,
        licenseValidityPeriodStart,
        contactPersonPhone,
        licenseValidityPeriodEnd,
        gasStaffCount,
        companyTypeStr,
        gasBottleCount,
        storageAndDistributionStationsCount,
        supplyStationCount,
        gasUserCount,
        stationCount,
    } = 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">
                <VtxFormLayout.Pane title="基本信息">
                    <VtxFormLayout.FormItem label="企业名称">{name || '--'}</VtxFormLayout.FormItem>
                    <VtxFormLayout.FormItem label="企业类型">
                        {companyTypeStr || '--'}
                    </VtxFormLayout.FormItem>
                    <VtxFormLayout.FormItem label="行政区划" name="workCode">
                        {regionStr || '--'}
                    </VtxFormLayout.FormItem>{' '}
                    <VtxFormLayout.FormItem label="详细地址">
                        {address || '--'}
                    </VtxFormLayout.FormItem>
                    <VtxFormLayout.FormItem label="统一社会信用代码">
                        {creditCode || '--'}
                    </VtxFormLayout.FormItem>
                    <VtxFormLayout.FormItem
                        label="法人代表"
                        name="storageAndDistributionStationName"
                    >
                        {legalPersonName || '--'}
                    </VtxFormLayout.FormItem>
                    <VtxFormLayout.FormItem label="法人联系电话">
                        {legalPersonPhone || '--'}
                    </VtxFormLayout.FormItem>
                    <VtxFormLayout.FormItem label="法人代表身份证号码">
                        {legalPersonIdCard || '--'}
                    </VtxFormLayout.FormItem>
                    <VtxFormLayout.FormItem label="联系人">
                        {contactPersonName || '--'}
                    </VtxFormLayout.FormItem>
                    <VtxFormLayout.FormItem label="联系人电话">
                        {contactPersonPhone || '--'}
                    </VtxFormLayout.FormItem>
                    <VtxFormLayout.FormItem label="联系人身份证号码">
                        {contactPersonIdCard || '--'}
                    </VtxFormLayout.FormItem>
                    {getUrlParam().carqFlag == 'true' ? (
                        <>
                            <VtxFormLayout.FormItem label="安全负责人">
                                {safeHeader || '--'}
                            </VtxFormLayout.FormItem>
                            <VtxFormLayout.FormItem label="安全负责人电话">
                                {safeHeaderPhone || '--'}
                            </VtxFormLayout.FormItem>
                            <VtxFormLayout.FormItem label="安全负责人身份证号">
                                {safeHeaderIdCard || '--'}
                            </VtxFormLayout.FormItem>
                            <VtxFormLayout.FormItem label="技术负责人">
                                {techHeader || '--'}
                            </VtxFormLayout.FormItem>
                            <VtxFormLayout.FormItem label="技术负责人电话">
                                {techHeaderPhone || '--'}
                            </VtxFormLayout.FormItem>
                            <VtxFormLayout.FormItem label="技术负责人身份证号">
                                {techHeaderIdCard || '--'}
                            </VtxFormLayout.FormItem>
                        </>
                    ) : (
                        ''
                    )}
                    {getUrlParam().gas2Flag == 'true' ? (
                        ''
                    ) : (
                        <>
                            <VtxFormLayout.FormItem label="许可证编号">
                                {license || '--'}
                            </VtxFormLayout.FormItem>
                            <VtxFormLayout.FormItem label="许可证有效期">
                                {licenseValidityPeriodStart && licenseValidityPeriodEnd
                                    ? `${licenseValidityPeriodStart}~${licenseValidityPeriodEnd}`
                                    : '--'}
                            </VtxFormLayout.FormItem>
                        </>
                    )}
                    <VtxFormLayout.FormItem label="备注" weights={2}>
                        {remark || '--'}
                    </VtxFormLayout.FormItem>
                    {lng && lat && (
                        <div style={{ width: '100%', height: 200 }}>
                            <VtxMap
                                mapId="enterprise"
                                mapType={mapInfo.mapType}
                                mapCenter={[lng, lat]}
                                mapZoomLevel={15}
                                mapPoints={[{ id: '1', longitude: lng, latitude: lat }]}
                                mapStyle={theme === 'dark' ? mapStyle.customStyle : ''}
                                setCenter={`${lng}${lat}`}
                            />
                        </div>
                    )}
                </VtxFormLayout.Pane>
                <VtxFormLayout.Divider />
                <VtxFormLayout.Pane title="档案信息">
                    <VtxFormLayout.FormItem label="气瓶数量">
                        {gasBottleCount}
                    </VtxFormLayout.FormItem>
                    {/* <VtxFormLayout.FormItem label="车辆数量">{carCount}</VtxFormLayout.FormItem> */}
                    <VtxFormLayout.FormItem label="从业人员数量">
                        {gasStaffCount}
                    </VtxFormLayout.FormItem>
                    <VtxFormLayout.FormItem label="场站数量">{stationCount}</VtxFormLayout.FormItem>
                    {getUrlParam().carqFlag == 'true' ? (
                        ''
                    ) : (
                        <>
                            <VtxFormLayout.FormItem label="储配站数量">
                                {storageAndDistributionStationsCount}
                            </VtxFormLayout.FormItem>
                            <VtxFormLayout.FormItem label="供应站数量">
                                {supplyStationCount}
                            </VtxFormLayout.FormItem>
                        </>
                    )}
                    <VtxFormLayout.FormItem label="用户数量">{gasUserCount}</VtxFormLayout.FormItem>
                </VtxFormLayout.Pane>
            </VtxFormLayout>
        </Form>
    );
};

BaseContent.propTypes = {
    info: PropTypes.object.isRequired,
};

export default BaseContent;