/*
|
* @Company: hugeInfo
|
* @Author: ldh
|
* @Date: 2022-08-10 08:42:39
|
* @LastEditTime: 2023-05-25 10:07:37
|
* @LastEditors: lwh
|
* @Version: 1.0.0
|
* @Description: 房间列表 - 房号模式
|
*/
|
import React, { useMemo } from 'react';
|
import { Button, Space } from 'dingtalk-design-mobile';
|
|
const RoomNumberGrid = ({ type, data = [], active, onClickRoom }) => {
|
const parentRef = React.useRef();
|
|
const datasource = useMemo(() => {
|
let arr = [];
|
let result = [];
|
data.forEach((x) => {
|
result.push({ unit: x.unit });
|
let list = x.housenumberList || [];
|
list.forEach((x, t) => {
|
if (t % 3 === 0) {
|
arr = [];
|
}
|
arr.push(x);
|
if (t % 3 === 2) {
|
result.push(arr);
|
}
|
});
|
if (list.length % 3 !== 0) {
|
let arr2 = [];
|
for (let i = list.length % 3; i >= 0; i--) {
|
arr2.push(list[list.length - i]);
|
}
|
result.push(arr2);
|
}
|
});
|
return result;
|
}, [data]);
|
|
let temp1 = data.filter((item) => !item.unit && !item.housenumber);//无单元无房号
|
let temp2 = data.filter((item) => item.housenumber );//有房号
|
let newData = temp1.concat(temp2);
|
|
console.log('newData', newData);
|
console.log('data', data);
|
return (
|
<>
|
<div ref={parentRef} style={{ height: '100%', width: '100%', overflowY: 'auto' }}>
|
{type === 'change' && <div style={{ padding: '12px 12px 4px' }}>选择房号</div>}
|
<div className='room-number-box'>
|
<div className='room-number-box-flex'>
|
{newData.map((x, t) => {
|
let value = x;
|
return (
|
!x.unit && !x.housenumber ?
|
<div key={t} className='room-number-box-flex-3'>
|
<div style={{ flex: '1 1 0%' }}>
|
<Button
|
onClick={() => !!onClickRoom && onClickRoom(value)}
|
type={active == value.id ? 'primary' : 'secondary'}
|
size="middle"
|
>
|
{x.houseaddress || '-'}
|
</Button>
|
</div>
|
<div style={{ width: '8px', backgroundColor: '#ffffff' }}></div>
|
</div> :
|
<div key={t} className='room-number-box-flex-1'>
|
<div style={{ flex: '1 1 0%' }}>
|
<Button
|
onClick={() => !!onClickRoom && onClickRoom(value)}
|
type={active == value.id ? 'primary' : 'secondary'}
|
size="middle"
|
>
|
{(`${x.unit ? `${x.unit}-` : ''}${x.housenumber}`).length < 10 ? (`${x.unit ? `${x.unit}-` : ''}${x.housenumber}`) : (`${x.unit ? `${x.unit}-` : ''}${x.housenumber}`).substr(0, 10) + "..."}
|
</Button>
|
</div>
|
<div style={{ width: '8px', backgroundColor: '#ffffff' }}></div>
|
</div>
|
);
|
})}
|
</div>
|
</div>
|
{type !== 'change' && <div className="room-number-bottom">已加载所有房间</div>}
|
</div>
|
</>
|
);
|
};
|
|
export default RoomNumberGrid;
|
