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 { VtxMap } from '@vtx/map';
import useMapInfo from '../vm-hooks/useMapInfo';
import useRoleInfo from '../vm-hooks/useRoleInfo';
import useSettings from '../vm-hooks/useSettings';
import { EyeTwoTone, EyeInvisibleTwoTone } from '@ant-design/icons';
import { useSetState } from 'ahooks';
import { getImgUrl } from '../util';

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

const UserFJMBaseContent = ({ info, urlHead }) => {
    const { mapInfo } = useMapInfo();
    const { roleCode } = useRoleInfo(urlHead);
    const [lng, lat] = info?.location?.lngLats?.split(',') || [];
    const [state, setState] = useSetState({
        legalPersonIdCard: info?.legalPersonIdCard
            ? desensitizeIDNumber(info?.legalPersonIdCard)
            : '',
        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={3} mode="view">
            <VtxFormLayout.FormItem label="注册登记名称">
                {info.shopName || '--'}
            </VtxFormLayout.FormItem>
            <VtxFormLayout.FormItem label="用户编号">{info.userNo || '--'}</VtxFormLayout.FormItem>
            <VtxFormLayout.FormItem label="经营状态">
                {info.businessStatus?.value || '--'}
            </VtxFormLayout.FormItem>
            <VtxFormLayout.FormItem label="供气企业">
                <VtxGasEnterpriseModal
                    id={info.supplyCompanyId}
                    label={info.supplyCompanyName}
                    urlHead={urlHead}
                />
            </VtxFormLayout.FormItem>
            <VtxFormLayout.FormItem label="签订时间">
                {info.supplyProtocolSignDate || '--'}
            </VtxFormLayout.FormItem>
            <VtxFormLayout.FormItem label="行政区划">
                {info.regionName || '--'}
            </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.address || '--'}</VtxFormLayout.FormItem>
            <VtxFormLayout.FormItem label="供气企业类型">
                {info.supplyCompanyTypeValue ? info.supplyCompanyTypeValue : '--'}
            </VtxFormLayout.FormItem>
            <VtxFormLayout.FormItem label="协议有效期">
                {info.supplyProtocolExpireDate || '--'}
            </VtxFormLayout.FormItem>
            <VtxFormLayout.FormItem label="协议状态">
                {info.supplyProtocolStatus?.value || '--'}
            </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="userFJM"
                        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}>
                    <Descriptions.Item label="非居用户类型">
                        {' '}
                        {info.fjUserType?.value || '--'}
                    </Descriptions.Item>
                    <Descriptions.Item label="非居用户性质">
                        {info.fjUserProperty?.value || '--'}
                    </Descriptions.Item>
                    <Descriptions.Item label="非居用户单位电话">
                        {info.fjCompanyPhone || '--'}
                    </Descriptions.Item>
                    <Descriptions.Item label="注册登记地址">
                        {info.registerAddress || '--'}
                    </Descriptions.Item>
                    <Descriptions.Item label="统一社会信用代码">
                        {info.socialCreditCode || '--'}
                    </Descriptions.Item>
                    <Descriptions.Item label="工商营业执照">
                        {info.licenseFileId
                            ? JSON.parse(info.licenseFileId).map((item, i) => (
                                  <Image
                                      width={100}
                                      key={i}
                                      src={getImgUrl(item.id).thumb}
                                      preview={{
                                          src: getImgUrl(item.id).src,
                                      }}
                                  />
                              ))
                            : '--'}
                    </Descriptions.Item>
                    <Descriptions.Item label="法人姓名（身份证号）">
                        {info.legalPersonName || '--'}
                        {state.legalPersonIdCard ? (
                            <span>
                                ({state.legalPersonIdCard})
                                {roleCode.includes('sfzhmck') &&
                                    (state.legalPersonIdCard.indexOf('*') > -1 ? (
                                        <EyeTwoTone
                                            style={{ marginLeft: 5 }}
                                            onClick={() =>
                                                setState({
                                                    legalPersonIdCard: info?.legalPersonIdCard,
                                                })
                                            }
                                        />
                                    ) : (
                                        <EyeInvisibleTwoTone
                                            style={{ marginLeft: 5 }}
                                            onClick={() =>
                                                setState({
                                                    legalPersonIdCard: info?.legalPersonIdCard
                                                        ? desensitizeIDNumber(
                                                              info?.legalPersonIdCard,
                                                          )
                                                        : '',
                                                })
                                            }
                                        />
                                    ))}
                            </span>
                        ) : (
                            '--'
                        )}
                    </Descriptions.Item>
                    <Descriptions.Item label="法人联系方式">
                        {info.legalPersonPhone || '--'}
                    </Descriptions.Item>
                    <Descriptions.Item label="经营者姓名（身份证号）">
                        {info.businessmanName || '--'}
                        {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.phone || '--'}
                    </Descriptions.Item>
                    <Descriptions.Item label="户号">{info.accountNo || '--'}</Descriptions.Item>
                    <Descriptions.Item label="照片">
                        {info.pictureFileId
                            ? JSON.parse(info.pictureFileId).map((item, i) => (
                                  <Image
                                      width={100}
                                      key={i}
                                      src={getImgUrl(item.id).thumb}
                                      preview={{
                                          src: getImgUrl(item.id).src,
                                      }}
                                  />
                              ))
                            : '--'}
                    </Descriptions.Item>
                    <Descriptions.Item label="备注">{info.remark || '--'}</Descriptions.Item>
                </Descriptions>
            </div>
        </VtxFormLayout>
    );
};

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

export default UserFJMBaseContent;