smartschool-platform/frontend/wechat-web/src/modules/homework/AssignmentDetailPage.js

/**
 * Created by Arison on 2018/11/6.
 */
import React from 'react';
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap/dist/css/bootstrap.min.css'
import './AssignmentDetailPage.css'
import '../../style/css/app-gloal.css'
import {List, Input, Button} from 'antd';
import {fetchPost, fetchGet} from '../../utils/fetchRequest';
import {API, _baseURL} from '../../configs/api.config';
import {getIntValue, getSearchParams, getStrValue, isObjEmpty} from '../../utils/common';
import ImagesViewer from "../../components/imagesVIewer/ImagesViewer";
import {Toast} from 'antd-mobile'
import {Avatar} from 'antd'
import leave_img from '../../style/imgs/leave_messages.png';
import {connect} from 'react-redux'
import {saveListState} from "../../redux/actions/listState";

/**
 * 作业详情
 * Created by Arison on 17:49.
 */


class AssignmentDetailPage extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            id: this.props.match.params.id,
            role: this.props.match.params.role,
            name: 'AssignmentDetailPage',
            previewVisible: false,
            teachName: "",
            endTime: "",
            headerUrl: "",
            title: "",
            content: "",
            messageContent: null,
            files: [],
            data: []
        };
    }

    componentWillMount() {
        document.title = "作业详情";
    }

    componentDidMount() {
        this.searchParams = getSearchParams(this.props.location.search)
        this.stuId = this.props.userInfo.user.student.stuId
        this.parentId = this.props.userInfo.user.userFunId
        if (this.searchParams) {
            if (this.searchParams.stuId) {
                this.stuId = this.searchParams.stuId
            }
            if (this.searchParams.parentId) {
                this.parentId = this.searchParams.parentId
            }
        }
        Toast.show('', 0)
        this.getHomeworkDetail()
    }

    componentWillUnmount() {
        Toast.hide()
    }

    onClickImage() {
        this.setState({
            previewVisible: true
        })
    }

    getHomeworkDetail = () => {
        fetchPost(API.HOMEWORK_DETAIL, {
            taskId: this.state.id,
            stuId: this.stuId
        }).then((response) => {
            Toast.hide()
            if (response && response.data) {
                let images = [];
                if (response.data.taskFiles) {
                    let temps = JSON.parse(response.data.taskFiles);
                    for (let i = 0; i < temps.length; i++) {
                        images.push(temps[i]);
                    }
                }
                if (response.data.taskContext) {
                    response.data.taskContext = response.data.taskContext.replace(/\r\n/g, '<br/>');
                }

                const taskReplyDOs = response.data.taskReplyDOs
                if (this.state.data) {
                    this.state.data.length = 0
                }
                if (taskReplyDOs) {
                    for (let i = 0; i < taskReplyDOs.length; i++) {
                        let model = {
                            name: taskReplyDOs[i].stuName,
                            content: taskReplyDOs[i].replyContext
                        }
                        this.state.data.push(model);
                    }
                }

                this.setState({
                    teachName: response.data.teacherName,
                    endTime: response.data.endDate,
                    headerUrl: response.data.teacherPhoto,
                    title: response.data.taskTitle,
                    content: response.data.taskContext,
                    files: images,
                    data: this.state.data
                })
            }
        }).catch((error) => {
            Toast.hide()

            if (typeof error === 'string') {
                Toast.fail(error, 2)
            } else {
                Toast.fail('请求异常', 2)
            }
        })
    }

    refreshListData = () => {
        if (this.props.listState.itemIndex >= 0) {
            const homeWorkCache = this.props.listState.listData[this.props.listState.itemIndex]
            if ("teacher" == this.state.role) {
                homeWorkCache.readStatus = ''
                homeWorkCache.taskStatus = 2
            } else {
                homeWorkCache.readStatus = '已回复'
                homeWorkCache.taskStatus = 2
            }
            this.props.listState.listData[this.props.listState.itemIndex] = homeWorkCache
        }
        saveListState({
            listData: this.props.listState.listData,
        })()
    }

    onMessageSend = () => {
        if (isObjEmpty(this.state.messageContent)) {
            Toast.info("请输入留言内容")
            return;
        }

        const params = {
            taskId: this.state.id,
            replyTitle: '这是作业的回复',
            replyContext: this.state.messageContent,
            parentId: this.parentId,
            stuId: this.stuId
        }
        fetchPost(API.HOMEWORK_REPLY, {
            taskRepayString: JSON.stringify(params)
        }).then((response) => {
            console.log("response:" + JSON.stringify(response));
            if (response.success) {
                Toast.info("留言成功！");
                this.setState({
                    messageContent: ""
                });
                this.refreshListData()
                this.getHomeworkDetail()
            }
        }).catch((error) => {
            Toast.hide()

            if (typeof error === 'string') {
                Toast.fail(error, 2)
            } else {
                Toast.fail('请求异常', 2)
            }
        })

    }

    onChangeMessage = (event) => {
        let msg = event.target.value;
        this.setState({
            messageContent: msg
        })
    }

    handleCancel = () => this.setState({previewVisible: false})

    render() {
        const {userInfo} = this.props

        return <div className="class-page-layout">
            <div style={{flex: '1'}}>
                <div className="homework-detail-top-layout common-flex-row">
                    {isObjEmpty(userInfo.userAvatar) ?
                        <Avatar size={55} icon='user'/> :
                        <img className="img-circle"
                             src={userInfo.userAvatar}
                             width={55} height={55}/>
                    }
                    <div className='common-flex-column-y-center' style={{paddingLeft: '14px'}}>
                        <div className="homework-detail-top-name">{this.state.teachName}老师</div>
                        <div className='homework-detail-top-time'>
                            <span>截止时间：</span>
                            <span>{this.state.endTime}</span>
                        </div>
                    </div>
                </div>
                <div className="homework-detail-title">{this.state.title} </div>
                <div className="homework-detail-content"
                     dangerouslySetInnerHTML={{__html: this.state.content.replaceAll('\n', '<br/>')}}></div>
                <div className="margin_top_bottom_10 flex_center">
                    {this.state.previewVisible ?
                        <ImagesViewer onClose={this.handleCancel} urls={this.state.files}
                                      index={0}
                                      needPoint={this.state.files.length <= 9}/> : ""}
                    {this.state.files.length != 0 ? (<img onClick={this.onClickImage.bind(this)}
                                                          style={{margin: "0px"}}
                                                          src={this.state.files[0]}
                                                          height={130}/>) : ("")}

                </div>
                <div className="margin_top_bottom_10 homework-detail-leave-caption">
                    <img src={leave_img} style={{height: 18, width: 21, marginRight: 10}}/>
                    {this.state.data.length != 0 ? (
                        <span>
                        ({this.state.data.length}条)
                    </span>) : (<div></div>)}</div>
                <div id="page_horizontal_line"></div>
            </div>

            <div className='homework-detail-leave-layout'
                 style={{paddingBottom: this.state.role === "teacher" ? '0' : '50px'}}>
                <List
                    locale={{emptyText: '暂无留言'}}
                    dataSource={this.state.data}
                    renderItem={item => (
                        <div style={{display: 'flex', paddingTop: 5, paddingBottom: 5}}>
                            <div className="homework-detail-leave-name">{item.name}:</div>
                            <div className='homework-detail-leave-content'>{item.content}</div>
                        </div>
                    )}/>
            </div>
            {this.state.role === "teacher" ? "" :
                <div className="footer flex padding_10" style={{background: '#F2F2F2', alignItems: 'center'}}>
                    <img src={require('imgs/ic_edit.png')} width={28} height={28}/>
                    <input ref={ref => this.input_content = ref} value={this.state.messageContent}
                           onChange={this.onChangeMessage} placeholder="留言"
                           className='homework-detail-leave-input'></input>
                    <span onClick={this.onMessageSend} className="homework-detail-leave-send">发送</span>
                </div>}
        </div>
    }
}

let mapStateToProps = (state) => ({
    userInfo: {...state.redUserInfo},
    listState: {...state.redListState}
})

let mapDispatchToProps = (dispatch) => ({})

export default connect(mapStateToProps, mapDispatchToProps)(AssignmentDetailPage)