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 { 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';

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

const UserFJMBaseContent = ({ info }) => {
    const { mapInfo } = useMapInfo();
    const { roleCode } = useRoleInfo();
    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();
    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} />
            </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={`/cloudFile/common/downloadFile?id=${item.id}`}
                        />
                    ))
                    : '--'}
            </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 : ''}
                    />
                </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={`/cloudFile/common/downloadFile?id=${item.id}`}
                                />
                            ))
                            : '--'}
                    </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={`/cloudFile/common/downloadFile?id=${item.id}`}
                                />
                            ))
                            : '--'}
                    </Descriptions.Item>
                    <Descriptions.Item label="备注">{info.remark || '--'}</Descriptions.Item>
                </Descriptions>
            </div>
        </VtxFormLayout>
    );
};

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

export default UserFJMBaseContent;
