import React 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';

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

const UserJMBaseContent = ({ info }) => {
    const { mapInfo } = useMapInfo();
    const { roleCode } = useRoleInfo();
    const [lng, lat] = info?.location?.lngLats?.split(',') || [];
    const [state, setState] = useSetState({
        idCard: info?.idCard ? desensitizeIDNumber(info?.idCard) : ''
    });
    const { theme } = useSettings();
    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} />
            </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={`/cloudFile/common/downloadFile?id=${item.id}`}
                        />
                    ))
                    : '--'}
            </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 : ''}
                    />
                </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,
};

export default UserJMBaseContent;
