/* eslint-disable arrow-body-style */ /* eslint-disable no-useless-escape */ /* eslint-disable no-lonely-if */ /* eslint-disable no-unused-expressions */ /* eslint-disable prefer-template */ /* eslint-disable react/jsx-boolean-value */ import React, { useState, useEffect } from 'react'; import { Modal, Collapse, notification, Upload, Input, Empty, Tooltip } from 'antd'; import { GetImageOrderByFile, GetImageOrderByPath } from '@/services/integratedLogin/api'; import classnames from 'classnames'; import styles from './PreviewModal.less'; const { Panel } = Collapse; const PreviewModal = props => { const { callBackSubmit = () => {}, visible, onCancel, imageUrl, keepImgeUrl, type, imgDataList, } = props; const [imgData, setImgData] = useState([]); const [pickItem, setPickItem] = useState(''); const [chooseItem, setChooseItem] = useState(''); const [keepItem, setKeepItem] = useState(''); const [keepGroupName, setKeepGroupName] = useState([]); const [search, setSearch] = useState(''); const { Search } = Input; useEffect(() => { if (visible) { console.log(imageUrl); console.log(keepImgeUrl); setChooseItem(imageUrl); update(); } else { setPickItem(''); setKeepItem(''); setChooseItem(''); } }, [visible]); const update = () => { console.log(imgDataList); let bb = []; let aa = []; imgDataList.map((i, a) => { if (i.files.length > 0) { bb.push(i); aa.push(i.groupName); } }); setKeepGroupName(aa); console.log(bb); setImgData(bb); imgDataList.map(i => { i.files.map((j, index) => { if (keepImgeUrl) { if (j.path == keepImgeUrl) { setKeepItem(i.name); setPickItem(index); setChooseItem(j.path); } } else { if (chooseItem == j.path) { setKeepItem(i.name); setPickItem(index); setChooseItem(j.path); } } }); }); }; // 提交 const onSubmit = () => { console.log(keepItem); if (keepItem) { console.log(chooseItem); callBackSubmit(chooseItem); } onCancel(); }; const handleCollapseChange = key => { setKeepGroupName(key); }; return ( <Modal title="图片库" style={{ top: '100px' }} width="1000px" destroyOnClose maskClosable={false} cancelText="取消" okText="确认" {...props} onOk={() => onSubmit()} forceRender={true} getContainer={false} > {imgData.length > 0 ? ( <Collapse style={{ height: '600px', overflow: 'scroll', marginTop: '20px' }} bordered={false} activeKey={keepGroupName} onChange={handleCollapseChange} > {imgData.map((i, j) => { return ( <Panel header={i.groupName} key={i.groupName} style={{ marginBottom: '24px', overflow: 'hidden', border: '0px', background: '#f7f7f7', borderRadius: '2px', }} > {i.files && i.files.map((k, index) => { return ( <div className={styles.divItem} key={index}> <img src={window.location.origin + `/${k.path}`} className={classnames({ [styles.imgHidden]: k.path !== chooseItem, [styles.imgItem]: k.path == chooseItem, })} height="80px" width="80px" alt="集成登录默认" onClick={e => { setPickItem(index); setKeepItem(i.groupName); setChooseItem(k.path); }} /> <div style={{ textAlign: 'center', width: '100px', }} > <Tooltip title={k.name}> <p style={{ height: '22px', overflow: 'hidden', whiteSpace: 'nowrap', textOverflow: 'ellipsis', }} > {k.name} </p> </Tooltip> </div> </div> ); })} </Panel> ); })} </Collapse> ) : ( <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description="暂无数据" style={{ height: '600px', margin: '20px auto 0px auto', paddingTop: '50px' }} /> )} </Modal> ); }; export default PreviewModal;