import React, { PureComponent } from 'react'; import moment from 'moment'; import { Table, Pagination, Select, Input } from 'antd'; import AXVideoPlayer from '../../../components/AXVideoPlayer/index'; import styles from './VideoPlayList.less'; export default class VideoPlayList extends PureComponent { constructor(props) { super(props); this.state = { currentPlayingIndex: 0, searchSelectKey: 'code', searchInputValue: '', }; } componentWillReceiveProps(nextProps) { const { dataSource } = nextProps; if (dataSource && dataSource.length) { this.setState({ currentPlayingIndex: 0 }); } } handleOnRowClick = (index) => { this.setState({ currentPlayingIndex: index }); }; handleSearchSelectChange = (value) => { this.setState({ searchSelectKey: value }); }; handleInputChange = (e) => { this.setState({ searchInputValue: e.target.value }); }; handleFilterOperation = (params) => { const { pageSize, pageNo, onFilterClick } = this.props; const { searchSelectKey, searchInputValue } = this.state; onFilterClick({ pageNo, pageSize, [searchSelectKey]: searchInputValue, ...params, }); }; handleSearchBtnClick = () => { this.handleFilterOperation(); }; handleTablePageChange = (page, pageSize) => { this.handleFilterOperation({ pageSize, pageNo: page, }); }; handleTablePageSizeChange = (current, size) => { this.handleFilterOperation({ pageSize: size, pageNo: current, }); }; render() { const { dataSource, loading, totalSize, pageSize, pageNo } = this.props; const renderQuality = (quality) => { if (quality === 'high') { return '高清'; } else { return '标清'; } }; const renderItem = (data) => { return (

编号: {`${data.code}`}

名称: {`${data.name}`}

格式: {`${renderQuality(data.quality)}[${data.format}]`}

时间: {`${moment(data.gmtModified).format('YYYY-MM-DD HH:mm:ss')}`}

); }; const renderVideoPlayer = () => { if (dataSource.length) { const videoItem = dataSource[this.state.currentPlayingIndex]; return ( ); } return null; }; const columns = [{ title: '名称/编号/状态/格式/质量/日期', key: 1, dataIndex: 'cn', render: (_, record) => renderItem(record), }]; const paginationProps = { pageSize, total: totalSize, current: pageNo, simple: true, showTotal: total => `共 ${total} 条`, onChange: this.handleTablePageChange, onShowSizeChange: this.handleTablePageSizeChange, }; const selectOptions = [{ field: 'code', name: '编号', }, { field: 'name', name: '名称', }]; const onRowClick = (_, index) => { return { onClick: () => this.handleOnRowClick(index), }; }; const renderHeader = () => { return ( {selectOptions.map(item => ( {item.name} ))} } placeholder="请输入" enterButton onChange={this.handleInputChange} onSearch={this.handleSearchBtnClick} /> ); }; return (
renderHeader()} footer={() => } columns={columns} pagination={false} onRow={onRowClick} rowKey={record => record.key} className={styles.table} rowClassName={(_, index) => (index === this.state.currentPlayingIndex ? styles.rowChecked : null) } loading={loading} dataSource={dataSource} />
{renderVideoPlayer()}
); } }