import React, {Component} from 'react'
|
import PropTypes from 'prop-types'
|
import { is, fromJS } from 'immutable'
|
import { Input, Form, Row, Col, Pagination } from 'antd'
|
|
import asyncComponent from '@/utils/asyncComponent'
|
import './index.scss'
|
|
const { TextArea } = Input
|
const { Search } = Input
|
const FileUpload = asyncComponent(() => import('@/tabviews/zshare/fileupload'))
|
const Video = asyncComponent(() => import('@/menu/picturecontroller/video'))
|
const Image = asyncComponent(() => import('@/components/Image'))
|
|
class PopSource extends Component {
|
static propTpyes = {
|
btnlog: PropTypes.array,
|
handlelog: PropTypes.func
|
}
|
|
state = {
|
url: '',
|
originlist: [],
|
list: [],
|
pagelist: [],
|
fileList: [],
|
searchKey: '',
|
pageSize: 12,
|
pageIndex: 1
|
}
|
|
UNSAFE_componentWillMount () {
|
this.init()
|
}
|
|
shouldComponentUpdate (nextProps, nextState) {
|
return !is(fromJS(this.state), fromJS(nextState))
|
}
|
|
init = () => {
|
const { type } = this.props
|
|
let originlist = []
|
if (type === 'video') {
|
let videos = sessionStorage.getItem('app_videos')
|
try {
|
originlist = JSON.parse(videos)
|
} catch {
|
originlist = []
|
}
|
} else {
|
let pictures = sessionStorage.getItem('app_pictures')
|
try {
|
originlist = JSON.parse(pictures)
|
} catch {
|
originlist = []
|
}
|
}
|
|
let list = originlist
|
let pagelist = list.filter((item, index) => index < this.state.pageSize)
|
|
this.setState({originlist, list, url: '', searchKey: '', pageIndex: 1, fileList: [], pagelist})
|
}
|
|
changeSearch = () => {
|
const { originlist, pageSize, searchKey } = this.state
|
let list = originlist.filter(item => item.remark.indexOf(searchKey) > -1)
|
let pagelist = list.filter((item, index) => index < pageSize)
|
|
this.setState({list, pagelist, pageIndex: 1})
|
}
|
|
changeValue = (e) => {
|
this.setState({url: e.target.value})
|
}
|
|
changeSize = (page) => {
|
const { list, pageSize } = this.state
|
let pagelist = list.filter((item, index) => index < pageSize * page && index >= pageSize * (page - 1))
|
this.setState({pageIndex: page, pagelist})
|
}
|
|
changeFile = (vals) => {
|
this.setState({fileList: vals})
|
|
if (vals && vals[0] && vals[0].status === 'done' && vals[0].response) {
|
this.setState({url: vals[0].response})
|
}
|
}
|
|
selectItem = (item) => {
|
if (item.linkurl) {
|
this.setState({url: item.linkurl})
|
}
|
}
|
|
render () {
|
const { type } = this.props
|
const { list, url, pagelist, fileList, searchKey, pageIndex, pageSize } = this.state
|
|
return (
|
<div className="mk-source-pop-wrap">
|
<Form.Item label="地址" labelCol={{xs: { span: 24 }, sm: { span: 3 }}} wrapperCol={{xs: { span: 24 }, sm: { span: 21 }}}>
|
<TextArea value={url} rows={2} onChange={this.changeValue}/>
|
</Form.Item>
|
<Form.Item label="上传" labelCol={{xs: { span: 24 }, sm: { span: 3 }}} wrapperCol={{xs: { span: 24 }, sm: { span: 21 }}}>
|
<FileUpload value={fileList} onChange={this.changeFile} accept={type === 'video' ? '.mp4,.webm,.ogg' : '.jpg,.png,.gif,.pjp,.pjpeg,.jpeg,.jfif,.webp'} maxFile={1} fileType={'text'} />
|
</Form.Item>
|
{list.length ? <Form.Item label="系统" labelCol={{xs: { span: 24 }, sm: { span: 3 }}} wrapperCol={{xs: { span: 24 }, sm: { span: 21 }}}>
|
<Search value={searchKey} placeholder="" onChange={(e) => this.setState({searchKey: e.target.value})} onSearch={this.changeSearch}/>
|
<Row gutter={10}>
|
{pagelist.map(item => (
|
<Col span={4} key={item.id}>
|
<div className="image-video-box" onClick={() => this.selectItem(item)}>
|
<div className="image-video-box-body">
|
{type !== 'video' ? <Image url={item.linkurl} /> : null}
|
{type === 'video' ? <Video value={item.linkurl} /> : null}
|
</div>
|
</div>
|
</Col>
|
))}
|
</Row>
|
{list.length > pageSize ? <Pagination size="small" current={pageIndex} pageSize={pageSize} onChange={this.changeSize} total={list.length} /> : null}
|
</Form.Item> : null}
|
</div>
|
)
|
}
|
}
|
|
export default PopSource
|
