/* 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 } 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 } = 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(() => { console.log(imageUrl); console.log(keepImgeUrl); if (visible) { setChooseItem(imageUrl); update(); } else { setPickItem(''); setKeepItem(''); setChooseItem(''); } }, [visible]); const update = () => { GetImageOrderByFile({ maxLength: 279.1525423728813, path: 'assets/images/caseCenter/events', }) .then(resdata => { if (resdata.code === 0) { let bb = []; let aa = []; resdata.data.map((i, a) => { if (i.list.length > 0) { bb.push(i); aa.push(i.text); } }); setKeepGroupName(aa); setImgData(bb); resdata.data.map(i => { i.list.map((j, index) => { if (keepImgeUrl) { if (j.value == keepImgeUrl) { setKeepItem(i.text); setPickItem(index); setChooseItem(j.value); } } else { if (chooseItem == j.value) { setKeepItem(i.text); setPickItem(index); setChooseItem(j.value); } } }); }); } else { notification.error({ message: '获取失败', description: resdata.msg, }); } }) .catch(err => { console.error(err); }); }; // 提交 const onSubmit = () => { if (keepItem) { let aa = imgData.find(i => i.text === keepItem); callBackSubmit(chooseItem); } onCancel(); }; const handleCollapseChange = key => { setKeepGroupName(key); }; const onSearch = e => { setSearch(e.target.value); }; const submitSearch = () => { GetImageOrderByPath({ maxLength: 279.1525423728813, path: 'assets/images/caseCenter/events', fileName: search, }) .then(resdata => { if (resdata.code === 0) { let bb = []; let aa = []; resdata.data.map((i, a) => { if (i.list.length > 0) { bb.push(i); aa.push(i.text); } }); setKeepGroupName(aa); setImgData(bb); resdata.data.map(i => { i.list.map((j, index) => { console.log(j.value); console.log(chooseItem); if (`/${chooseItem}` == j.value) { setKeepItem(i.text); setPickItem(index); console.log(j.value); setChooseItem(j.value); console.log(i.text); console.log(index); } }); }); } else { notification.error({ message: '获取失败', description: resdata.msg, }); } }) .catch(err => { console.error(err); }); }; return ( <Modal title="图片库" style={{ top: '100px' }} width="1000px" destroyOnClose maskClosable={false} cancelText="取消" okText="确认" {...props} onOk={() => onSubmit()} forceRender={true} getContainer={false} > <Search placeholder="搜索图库" // size="middle" value={search} enterButton style={{ width: '50%' }} onChange={e => onSearch(e)} onSearch={submitSearch} allowClear /> {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.text} key={i.text} style={{ marginBottom: '24px', overflow: 'hidden', border: '0px', background: '#f7f7f7', borderRadius: '2px', }} > {i.list && i.list.map((k, index) => { return ( <div className={styles.divItem} key={index}> <img src={window.location.origin + `/${k.value}`} className={classnames({ [styles.imgHidden]: k.value !== chooseItem, [styles.imgItem]: k.value == chooseItem, })} height="80px" width="80px" alt="集成登录默认" onClick={e => { setPickItem(index); setKeepItem(i.text); setChooseItem(k.value); }} /> <div style={{ textAlign: 'center' }}> <p>{k.text}</p> </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;