import React, { useEffect, useState, useCallback } from 'react'; import { FullscreenExitOutlined, FullscreenOutlined } from '@ant-design/icons'; import { notification } from 'antd'; import classnames from 'classnames'; import { getAccountPageListSite } from '@/api/service/cloud'; import { connect } from 'react-redux'; import useFullScreen from '../iframe/useFullScreen'; import styles from './index.less'; const PrevieView = props => { const params = Object.assign({}, props.params, { fullscreen: props.params !== undefined && props.params.fullscreen === 'true', canScroll: props.params !== undefined && props.params.longImg === 'true', }); const { imgName, accountName, fullscreen, canScroll } = params; const [ref, isFullscreen, handleFullScreen, handleExitFullScreen] = useFullScreen(fullscreen); const [imgUrl, setImgUrl] = useState(''); const { userInfo = {} } = props.global; const getImgUrl = useCallback(() => { getAccountPageListSite( { pageIndex: 1, pageSize: 5, sortFields: '录入时间', direction: 'desc', info: imgName, accountName, ignoreSite: true, }, props.global, userInfo.site, ) .then(res => { const configData = JSON.parse(res.data.jsonData || '[]'); if (configData.length > 0 && configData[0]['演示图片']) { const url = `${window.location.origin}/PandaWorkFlow/WorkFlow/AccountManage/DownloadFiles?filePath=${ configData[0]['演示图片'] }&_site=${userInfo.site}`; setImgUrl(url); } }) .catch(err => { // notification.error({ message: '提示', duration: 3, description: '获取图片信息错误' }); }); }, [accountName, imgName, props.global, userInfo.site]); useEffect(() => { getImgUrl(); }, [getImgUrl]); return ( <div className={classnames(styles['tab-preview'], canScroll ? styles['long-img'] : styles['normal-img'])} ref={ref}> <div className={styles['oper-wrap']}> <div className={styles['oper-btn']}> {isFullscreen ? ( <FullscreenExitOutlined className={styles['btn-fullscreen_exit']} onClick={handleExitFullScreen} /> ) : ( <FullscreenOutlined className={styles['btn-fullscreen']} onClick={handleFullScreen} /> )} </div> </div> {imgUrl && <img src={imgUrl} display="block" position="relative" alt="演示图片" />} </div> ); }; const mapStateToProps = state => ({ global: state.getIn(['global', 'globalConfig']), }); export default connect(mapStateToProps)(PrevieView);