import React, { useEffect } from 'react';
import PropTypes from 'prop-types';
import { VtxFormLayout } from '@vtx/components';
import VtxGasEnterpriseModal from '../vtx-gas-enterprise-modal';
import { Descriptions, Image } from 'antd';
import useMapInfo from '../vm-hooks/useMapInfo';
import useRoleInfo from '../vm-hooks/useRoleInfo';
import { VtxMap } from '@vtx/map';
import useSettings from '../vm-hooks/useSettings';
import { EyeTwoTone, EyeInvisibleTwoTone } from '@ant-design/icons';
import { useSetState } from 'ahooks';
import { getUrlParam } from '@vtx/utils';
import { getImgUrl } from '../util';

function desensitizeIDNumber(id) {
    return id.replace(/(?<=\d{3})\d{12}(?=\d{2})/, '************');
}

const UserJMBaseContent = ({ info, urlHead }) => {
    const { mapInfo } = useMapInfo();
    const { roleCode } = useRoleInfo(urlHead);
    const [lng, lat] = info?.location?.lngLats?.split(',') || [];
    const [state, setState] = useSetState({
        idCard: info?.idCard ? desensitizeIDNumber(info?.idCard) : '',
    });
    const { theme } = useSettings();
    useEffect(() => {
        let wrapScroll = document.querySelector('.ant-modal-body');
        wrapScroll &&
            wrapScroll.addEventListener('scroll', () => {
                window.scrollY = wrapScroll.scrollTop;
            });
    }, []);
    return (
        <VtxFormLayout cols={2} mode="view">
            <VtxFormLayout.FormItem label="用户姓名">{info.name || '--'}</VtxFormLayout.FormItem>
            <VtxFormLayout.FormItem label="用户编号">{info.userNo || '--'}</VtxFormLayout.FormItem>
            <VtxFormLayout.FormItem label="联系电话">{info.phone || '--'}</VtxFormLayout.FormItem>
            <VtxFormLayout.FormItem label="行政区划">
                {info.regionName || '--'}
            </VtxFormLayout.FormItem>
            <VtxFormLayout.FormItem label="详细地址">{info.address || '--'}</VtxFormLayout.FormItem>
            <VtxFormLayout.FormItem label="供气企业">
                <VtxGasEnterpriseModal
                    id={info.supplyCompanyId}
                    label={info.supplyCompanyName}
                    urlHead={urlHead}
                />
            </VtxFormLayout.FormItem>
            <VtxFormLayout.FormItem label="所属小区">
                {info.villageName || '--'}
            </VtxFormLayout.FormItem>
            <VtxFormLayout.FormItem label="楼栋">{info.buildNo || '--'}</VtxFormLayout.FormItem>
            <VtxFormLayout.FormItem label="门牌号">{info.houseNo || '--'}</VtxFormLayout.FormItem>
            <VtxFormLayout.FormItem label="供气协议签订时间">
                {info.supplyProtocolSignDate || '--'}
            </VtxFormLayout.FormItem>
            <VtxFormLayout.FormItem label="供气协议到期时间">
                {info.supplyProtocolExpireDate || '--'}
            </VtxFormLayout.FormItem>

            <VtxFormLayout.FormItem label="供气协议">
                {info.supplyProtocolFileId
                    ? JSON.parse(info.supplyProtocolFileId).map((item, i) => (
                          <Image
                              width={100}
                              key={i}
                              src={getImgUrl(item.id).thumb}
                              preview={{
                                  src: getImgUrl(item.id).src,
                              }}
                          />
                      ))
                    : '--'}
            </VtxFormLayout.FormItem>
            <VtxFormLayout.FormItem label="位置">
                经度：{lng} 维度：{lat}
            </VtxFormLayout.FormItem>
            {lng && lat && (
                <div style={{ width: '100%', height: 200 }}>
                    <VtxMap
                        mapId="userJM"
                        mapType={mapInfo.mapType}
                        mapCenter={[lng, lat]}
                        mapZoomLevel={15}
                        mapPoints={[{ id: '1', longitude: lng, latitude: lat }]}
                        mapStyle={theme === 'dark' ? theme : ''}
                        setCenter={`${lng}${lat}`}
                    />
                </div>
            )}
            <div
                style={{
                    width: '100%',
                    marginTop: '20px',
                    padding: '20px',
                }}
            >
                <Descriptions bordered column={2}>
                    {getUrlParam().carqFlag == 'true' ? (
                        ''
                    ) : (
                        <>
                            <Descriptions.Item label="所属门店">
                                {info.storeId || '--'}
                            </Descriptions.Item>
                            <Descriptions.Item label="是否为租户">
                                {info.whetherTenant === true ? '是' : '否'}
                            </Descriptions.Item>
                            <Descriptions.Item label="户号">
                                {info.enterpriseNo || '--'}
                            </Descriptions.Item>
                        </>
                    )}
                    <Descriptions.Item label="身份证号">
                        {state.idCard ? (
                            <span>
                                {state.idCard}
                                {roleCode.includes('sfzhmck') &&
                                    (state.idCard.indexOf('*') > -1 ? (
                                        <EyeTwoTone
                                            style={{ marginLeft: 5 }}
                                            onClick={() =>
                                                setState({
                                                    idCard: info?.idCard,
                                                })
                                            }
                                        />
                                    ) : (
                                        <EyeInvisibleTwoTone
                                            style={{ marginLeft: 5 }}
                                            onClick={() =>
                                                setState({
                                                    idCard: info?.idCard
                                                        ? desensitizeIDNumber(info?.idCard)
                                                        : '',
                                                })
                                            }
                                        />
                                    ))}
                            </span>
                        ) : (
                            '--'
                        )}
                    </Descriptions.Item>
                    <Descriptions.Item label="供气协议状态">
                        {info.supplyProtocolStatus?.value || '--'}
                    </Descriptions.Item>
                    <Descriptions.Item label="备注">{info.remark || '--'}</Descriptions.Item>
                </Descriptions>
            </div>
        </VtxFormLayout>
    );
};

UserJMBaseContent.propTypes = {
    info: PropTypes.object,
    urlHead: PropTypes.object,
};

export default UserJMBaseContent;