/*
|
* @Author: dminyi 1301963064@qq.com
|
* @Date: 2023-10-30 09:41:38
|
* @LastEditors: lwh
|
* @LastEditTime: 2024-11-28 17:40:45
|
* @FilePath: \hztSsim\mobile\src\components\cityData\index.jsx
|
* @Description: 地区分块
|
*/
|
import React, { useEffect, useState } from 'react';
|
import { Popover } from "dingtalk-design-mobile";
|
import "./index.less";
|
import { return_1 } from '../../assets/img';
|
|
|
|
|
|
const CityData = ({ cityData, onClick, onClickPopList, upList, emptyToast }) => {
|
|
const [tooltipVisible, setTooltipVisible] = useState({})
|
const [visible, setVisible] = useState(false)
|
const handleVisibleChange = () => {
|
setVisible(visible);
|
};
|
|
|
|
function truncateText(text, maxLength) {
|
// if (text.length > maxLength) {
|
// return text.slice(0, maxLength) + '...';
|
// }
|
// return text;
|
};
|
|
|
return (
|
<div>
|
{cityData?.map((oneData, i) => (
|
<>
|
{oneData.areaName !== '海口市' &&
|
<div className='public-color' style={{ marginBottom: '16px', display: 'flex', alignItems: 'center' }} >
|
<img
|
style={{ width: '16px', height: '16px' }}
|
src={return_1}
|
alt=""
|
srcset=""
|
/><div onClick={() => { upList(oneData.areaCode) }}>上一级</div></div>
|
}
|
<div key={`one${i}`} className='search-searchBar-grid' onClick={() => { oneData.areaName !== '海口市' && onClick(oneData.areaCode, oneData.areaName, oneData.num) }}>
|
{/* <div style={{ textAlign: 'center' }}>{oneData.areaName}</div> */}
|
<div>{oneData.num !== 0 ? (
|
<Popover
|
dark
|
visible={tooltipVisible[`${oneData.areaName}`] || false}
|
onVisibleChange={(v) => { setTooltipVisible({ [`${oneData.areaName}`]: !tooltipVisible[`${oneData.areaName}`] }) }}
|
overlay={
|
<div style={{ display: 'flex' }}>
|
{/* <div onClick={() => {
|
onClick(oneData.areaCode)
|
setTooltipVisible({ [`${oneData.areaName}`]: false })
|
}}>进入</div> | */}
|
<div onClick={() => {
|
onClickPopList(oneData.areaName, oneData.areaCode);
|
setTooltipVisible({ [`${oneData.areaName}`]: false })
|
}}>查看</div>
|
</div>
|
}
|
placement="top"
|
>
|
<div onClick={() => { setTooltipVisible({ [`${oneData.areaName}`]: true }) }} className='search-searchBar-grid-box-title'>
|
<div style={{ paddingLeft: '5px' }}>{oneData.areaName}</div>
|
<div>{oneData.num || '-'}</div>
|
</div>
|
</Popover >
|
) : (
|
<div onClick={() => { setTooltipVisible({ [`${oneData.areaName}`]: true }); emptyToast(oneData.num, oneData.areaName) }} className='search-searchBar-grid-box-title'>
|
<div style={{ paddingLeft: '5px' }}>{oneData.areaName}</div>
|
<div>{oneData.num || '-'}</div>
|
</div>
|
)
|
}</div>
|
</div>
|
{
|
oneData.areaName === '海口市' ?
|
<>
|
{
|
oneData.children?.map((twoData, idx) => (
|
<div key={`two${idx}`} className='search-searchBar-grid-box' >
|
{twoData.num !== 0 ? (
|
<Popover
|
dark
|
visible={tooltipVisible[`${twoData.areaName}`] || false}
|
onVisibleChange={(v) => { setTooltipVisible({ [`${twoData.areaName}`]: !tooltipVisible[`${twoData.areaName}`] }) }}
|
overlay={
|
<div style={{ display: 'flex' }}>
|
<div onClick={() => {
|
onClick(twoData.areaCode)
|
setTooltipVisible({ [`${twoData.areaName}`]: false })
|
}}>进入</div> |
|
<div onClick={() => {
|
onClickPopList(twoData.areaName, twoData.areaCode);
|
setTooltipVisible({ [`${twoData.areaName}`]: false })
|
}}>查看</div>
|
</div>
|
}
|
placement="top"
|
>
|
<div onClick={() => { setTooltipVisible({ [`${twoData.areaName}`]: true }) }} className='search-searchBar-grid-box-title'>
|
<div style={{ paddingLeft: '5px' }}>{twoData.areaName}</div>
|
<div>{twoData.num || '-'}</div>
|
</div>
|
</Popover >
|
) : (
|
<div onClick={() => { setTooltipVisible({ [`${twoData.areaName}`]: true }); emptyToast(twoData.num, twoData.areaName) }} className='search-searchBar-grid-box-title'>
|
<div style={{ paddingLeft: '5px' }}>{twoData.areaName}</div>
|
<div>{twoData.num || '-'}</div>
|
</div>
|
|
)
|
}
|
<div style={{ flex: 1 }}>
|
<div style={{ display: 'flex', flexWrap: 'wrap', gap: '8px', marginLeft: '8px' }}>
|
{/* {oneData.children.slice(0, maxStreets).map((street, streetIndex) => { */}
|
{twoData.children?.map((threeData, index) => (
|
|
<div key={`three${index}`} className='search-searchBar-grid-box-value' >
|
{/* className='search-searchBar-grid-box-label' */}
|
{threeData.num !== 0 ? (
|
<Popover
|
dark
|
visible={tooltipVisible[`${threeData.areaName}`] || false}
|
onVisibleChange={(v) => { setTooltipVisible({ [`${threeData.areaName}`]: !tooltipVisible[`${threeData.areaName}`] }) }}
|
overlay={
|
<div style={{ display: 'flex' }}>
|
<div onClick={() => {
|
onClick(threeData.areaCode);
|
setTooltipVisible(false)
|
}}>进入</div> |
|
<div onClick={() => {
|
onClickPopList(threeData.areaName, threeData.areaCode);
|
setTooltipVisible(false)
|
}}>查看</div>
|
</div>
|
}
|
placement="topLeft"
|
>
|
<div onClick={() => { setTooltipVisible({ [`${threeData.areaName}`]: true }) }}>
|
<div style={{ width: '69px', textAlign: 'center', lineHeight: '22px' }}>{threeData.areaName}</div>
|
{/* <div className='search-searchBar-grid-box-label'>{truncateText(threeData.label, 4)}</div> */}
|
<div className='search-searchBar-grid-box-number'>{threeData.num || '-'}</div>
|
</div>
|
</Popover>
|
|
) : (
|
<div onClick={() => { setTooltipVisible({ [`${threeData.areaName}`]: true }); emptyToast(threeData.num, threeData.areaName) }}>
|
<div style={{ width: '69px', textAlign: 'center', lineHeight: '22px' }}>{threeData.areaName}</div>
|
{/* <div className='search-searchBar-grid-box-label'>{truncateText(threeData.label, 4)}</div> */}
|
<div className='search-searchBar-grid-box-number'>{threeData.num || '-'}</div>
|
</div>
|
|
)}
|
|
</div>
|
))}
|
</div>
|
</div>
|
</div>
|
))
|
}
|
</> :
|
<div style={{ display: 'flex', flexWrap: 'wrap', gap: '8px', }} >
|
{
|
oneData.children?.map((twoData, idx) => (
|
<div key={`four${idx}`} >
|
{twoData.num !== 0 ? (
|
<Popover
|
dark
|
visible={tooltipVisible[`${twoData.areaName}`] || false}
|
onVisibleChange={(v) => { setTooltipVisible({ [`${twoData.areaName}`]: !tooltipVisible[`${twoData.areaName}`] }) }}
|
overlay={
|
<div style={{ display: 'flex' }}>
|
<div onClick={() => {
|
onClick(twoData.areaCode);
|
setTooltipVisible({ [`${twoData.areaName}`]: false })
|
}}>进入</div> |
|
<div onClick={() => {
|
onClickPopList(twoData.areaName, twoData.areaCode);
|
setTooltipVisible({ [`${twoData.areaName}`]: false })
|
}}>查看</div>
|
</div>
|
}
|
placement="top"
|
>
|
<div className='search-searchBar-grid-box-value' onClick={() => { setTooltipVisible({ [`${twoData.areaName}`]: true }) }} >
|
<div style={{ width: '69px', textAlign: 'center', lineHeight: '22px' }}>{twoData.areaName}</div>
|
<div className='search-searchBar-grid-box-number'>{twoData.num || '-'}</div>
|
</div>
|
</Popover >
|
|
) : (
|
<div className='search-searchBar-grid-box-value' onClick={() => { setTooltipVisible({ [`${twoData.areaName}`]: true }); emptyToast(twoData.num, twoData.areaName) }} >
|
<div style={{ width: '69px', textAlign: 'center', lineHeight: '22px' }}>{twoData.areaName}</div>
|
<div className='search-searchBar-grid-box-number'>{twoData.num || '-'}</div>
|
</div>
|
|
)}
|
|
{/* {twoData.children?.map((threeData, index) => (
|
<div key={`three${index}`} className='search-searchBar-grid-box-value' >
|
<div className='search-searchBar-grid-box-label'>{threeData.label}</div>
|
<div className='search-searchBar-grid-box-number'>{threeData.number || '-'}</div>
|
</div>
|
))} */}
|
</div >
|
))
|
}
|
</div>
|
|
}
|
<div>
|
|
</div>
|
|
</>
|
))
|
}
|
</div >
|
)
|
|
};
|
|
export default CityData;
|
