~liuwh/gzDyh.git

			@@ -6,110 +6,153 @@
			* @FilePath: \gzDyh\gz-customerSystem\src\components\personCard\index.jsx
			* @Description: 来访登记当事人卡片
			*/
			import React from 'react';
			import React, { Fragment, useState } from 'react';
			import PropTypes from 'prop-types';
			import { Typography, Row, Col, Space, Tooltip } from 'antd';
			import { Modal } from '@arco-design/web-react';
			import { del, add } from '../../assets/images';
			import DetailDialog from "./DetailDialog";

			const { Link, Text } = Typography;
			/**
			* isCheck, // 是否无操作
			* data, // 当事人数据
			* handleCheckParty, // 点击查看详情
			* handleDeleteParty, // 删除当事人
			*/
			const PersonCard = ({ isCheck, data, handleCheckParty, handleDeleteParty, handleAdd }) => {
			let isAgent = false
			const typeList = data.map(item => {
			return item.partyType
			})//获取有多少申请人和被申请人
			if (typeList.indexOf(0) != -1 && typeList.indexOf(1) != -1) {
			isAgent = true
			}
			return (
			<Row gutter={[24, 16]}>
			{data.map((x, t) => (
			<Col span={7} key={t}>
			<div className="public-personCard" style={{ cursor: 'pointer' }}>
			<div
			className={`public-personCard-card public-personCard-card-${x.partyType === 0 ? 'blue' : 'orange'}`}
			onClick={() => handleCheckParty(x)}
			>
			{x.trueName.substr(0, 1)}
			<div className="public-personCard-card-check">查看</div>
			<img
			src={del}
			alt=''
			style={{ width: '16px', height: '16px', position: 'absolute', top: '-8px', left: '56px' }}
			onClick={(event) => { handleDeleteParty(event, x) }}
			/>
			</div>
			<div className="public-personCard-content">
			<div className="public-personCard-title">
			<Text style={{ maxWidth: '80%', paddingRight: '8px' }} ellipsis={{ tooltip: x.trueName }}>
			{x.trueName}
			</Text>
			<Text ellipsis={{ tooltip: x.perClassName }} className={`public-personCard-tag public-personCard-tag-${x.partyType === 0 ? 'blue' : 'orange'}`}>
			{x.perClassName}
			</Text>
			</div>
			{
			x.perClass === '09_01001-1' &&
			<>
			<div>证件号码：{x.mobile}</div>
			<div>联系方式：{x.personNumber}</div>
			</>
			}
			{
			x.perClass === '09_01001-2' &&
			<>
			<div>统一社会信用代码：{x.mobile}</div>
			<div>法定代表人：{x.companyName}</div>
			</>
			}
			{
			x.perClass === '09_01001-3' &&
			<>
			<div>组织机构代码：{x.mobile}</div>
			<div>机构代表人：{x.companyName}</div>
			</>
			}
			<Space style={{ display: 'flex', flexWrap: 'wrap' }}>
			{x.remark?.map((item, index) => (
			<div key={index} style={{ lineHeight: '22px', padding: '0px 8px', backgroundColor: `${item.color}`, width: 'fit-content', borderRadius: '4px', marginTop: '4px', color: '#fff' }}>{item.label}</div>
			))}
			</Space>
			</div>
			</div>
			</Col>
			))}
			<Col span={3}>
			<div className="dataSync-addBtn">
			<Tooltip
			title={(<Space direction='vertical '>
			<div className="dataSync-btnApply" style={{ backgroundColor: '#1A6FB8' }} onClick={() => { handleAdd(0) }}>申请方</div>
			<div className="dataSync-btnApply" style={{ backgroundColor: '#FA8C16' }} onClick={() => { handleAdd(1) }}>被申请方</div>
			{isAgent && <div className="dataSync-btnApply" style={{ backgroundColor: '#3491FA' }} onClick={() => { handleAdd(2) }}>代理人</div>}
			</Space>)}
			placement={data.length !== 0 && data.length % 3 === 0 ? 'left' : "right"}
			color='#ffff'
			overlayStyle={{}}
			>
			<div style={{ backgroundColor: '#f2f3f5', borderRadius: '50%', width: '64px', height: '64px' }}>
			<img src={add} alt="添加" style={{ width: '32px', margin: '16px' }} />
			</div>
			</Tooltip>
			const PersonCard = ({ isCheck, data, handleDeleteParty, handleAdd, handleEdit }) => {
			const [editData, setEditData] = useState(null);
			const [detailVisabled, setDetailVisabled] = useState(false);//查看信息弹窗控制
			const [dialogType, setDialogType] = useState(0);//添加当事人的类型

			const peopleMap = {
			'15_020008-1': '申请方',
			'15_020008-2': '被申请方',
			'24_00006-1': '申请方代理人',
			'24_00006-2': '被申请方代理人'
			}
			let isAgent = false
			let isAgentFor = false
			const typeList = data?.map(item => {
			return item.perType
			})//获取有多少申请人和被申请人
			if (typeList.indexOf('15_020008-1') != -1) {
			isAgent = true
			}
			if (typeList.indexOf('15_020008-2') != -1) {
			isAgentFor = true
			}

			const handleCheckParty = (value) => {
			setDialogType(value.perType)
			setEditData(value)
			setDetailVisabled(true)
			}

			return (
			<Fragment>
			<Row gutter={[24, 16]}>
			{data.map((x, t) => (
			<Col span={7} key={t}>
			<div className="public-personCard" style={{ cursor: 'pointer' }}>
			<div
			className={`public-personCard-card public-personCard-card-${(x.perType === '15_020008-1' \|\| x.perType === '24_00006-1') ? 'blue' : 'orange'}`}
			onClick={() => handleCheckParty(x)}
			>
			{x.trueName.substr(0, 1)}
			<div className="public-personCard-card-check">查看</div>
			{isCheck && <img
			src={del}
			alt=''
			style={{ width: '16px', height: '16px', position: 'absolute', top: '-8px', left: '56px' }}
			onClick={(event) => { handleDeleteParty(event, x) }}
			/>}
			</div>
			<div className="public-personCard-content">
			<div className="public-personCard-title">
			<Text style={{ maxWidth: '80%', paddingRight: '8px' }} ellipsis={{ tooltip: x.trueName }}>
			{x.trueName}
			</Text>
			<Text onClick={() => { handleEdit(x) }} ellipsis={{ tooltip: x.perTypeName }} className={`public-personCard-tag public-personCard-tag-${(x.perType === '15_020008-1' \|\| x.perType === '24_00006-1') ? 'blue' : 'orange'}`}>
			{x.perTypeName}
			</Text>
			</div>
			</Col>
			</Row>
			);
			{
			(x.perClass === '09_01001-1' \|\| !x.perClass) &&
			<>
			<div>证件号码：{x.certiNo}</div>
			<div>联系方式：{x.mobile}</div>
			</>
			}
			{
			x.perClass === '09_01001-2' &&
			<>
			<div>统一社会信用代码：{x.orgaCode}</div>
			<div>法定代表人：{x.deputy}</div>
			</>
			}
			{
			x.perClass === '09_01001-3' &&
			<>
			<div>组织机构代码：{x.orgaCode}</div>
			<div>机构代表人：{x.deputy}</div>
			</>
			}
			<Space style={{ display: 'flex', flexWrap: 'wrap' }}>
			{x.remark?.map((item, index) => (
			<div key={index} style={{ lineHeight: '22px', padding: '0px 8px', backgroundColor: `${item.color}`, width: 'fit-content', borderRadius: '4px', marginTop: '4px', color: '#fff' }}>{item.label}</div>
			))}
			</Space>
			</div>
			</div>
			</Col>
			))}
			{isCheck &&
			<Col span={3}>
			<div className="dataSync-addBtn">
			<Tooltip
			title={(<Space direction='vertical '>
			<div className="dataSync-btnApply" style={{ backgroundColor: '#1A6FB8' }} onClick={() => { handleAdd('15_020008-1') }}>申请方当事人</div>
			{isAgent && <div className="dataSync-btnApply" style={{ backgroundColor: '#3491FA' }} onClick={() => { handleAdd('24_00006-1') }}>申请方代理人</div>}
			<div className="dataSync-btnApply" style={{ backgroundColor: '#EF6C24' }} onClick={() => { handleAdd('15_020008-2') }}>被申请方当事人</div>
			{isAgentFor && <div className="dataSync-btnApply" style={{ backgroundColor: '#FA8C16' }} onClick={() => { handleAdd('24_00006-2') }}>被申请方代理人</div>}
			</Space>)}
			placement={data.length !== 0 && data.length % 3 === 0 ? 'left' : "right"}
			color='#ffff'
			overlayStyle={{}}
			>
			<div style={{ backgroundColor: '#f2f3f5', borderRadius: '50%', width: '64px', height: '64px' }}>
			<img src={add} alt="添加" style={{ width: '32px', margin: '16px' }} />
			</div>
			</Tooltip>
			</div>
			</Col>
			}
			</Row>
			<Modal
			title={'查看' + peopleMap[dialogType]}
			visible={detailVisabled}
			onOk={() => setDetailVisabled(false)}
			onCancel={() => {
			setDetailVisabled(false)
			setEditData(null)
			}}
			autoFocus={false}
			focusLock={true}
			footer={null}
			unmountOnExit={true}
			maskClosable={false}
			>
			<DetailDialog editData={editData} personData={data} />
			</Modal>
			</Fragment>
			);
			};

			PersonCard.propTypes = {
			isCheck: PropTypes.bool,
			data: PropTypes.array,
			handleCheckParty: PropTypes.func,
			handleDeleteParty: PropTypes.func,
			isCheck: PropTypes.bool,
			data: PropTypes.array,
			handleCheckParty: PropTypes.func,
			handleDeleteParty: PropTypes.func,
			};

			export default PersonCard;