help_user/src/my/SeekHelp.tsx

import React from "react";
import {Button, ButtonGroup, Col, Container, Image, ListGroup, Row} from "react-bootstrap";
import {SeekHelpState, User, VolunteerStatus} from "../entity";
import moment from "moment";
import Dialog from "@material-ui/core/Dialog";
import {CloseDialog} from "../ui/CloseDialog";
import {Paper, Tooltip} from "@material-ui/core";
import Draggable from "react-draggable";
import {MyDialog} from "../ui/MyDialog";
import {MyInfo} from "./MyInfo";
import {userObj} from "../ui/TestData";

const titleId="seek-help-dialog"

/**
 * 我的帮助
 */
export class SeekHelp extends React.Component<{ user:string },
    {
    data:Array<SeekHelpState>;
    open:boolean;
    status?:string;
    volunteerList?:Array<User>;
    openUserInfo:boolean;
    userId?:string;
    }>{


    constructor(props: Readonly<any>) {
        super(props);

        this.state={
            data:[],
            open:false,
            openUserInfo:false
        }
    }

    componentDidMount() {
        this.loadHelp()
    }

    /**
     * 加载我的求助信息
     */
    loadHelp(){
        this.setState({data:[
            {
                applyVolunteerList: [userObj,userObj],
                completeVolunteerList: [],
                joinVolunteerList: [],
                activityImg: "logo512.png",
                content: "活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容",
                time: new Date().getTime(),
                title:"活动标题",
                //活动Id
                activityId:123,
            },
            {
                applyVolunteerList: [],
                completeVolunteerList: [],
                joinVolunteerList: [],
                activityImg: "logo512.png",
                content: "活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容",
                time: new Date().getTime(),
                title:"活动标题",
                //活动Id
                activityId:123,
            },
            {
                applyVolunteerList: [],
                completeVolunteerList: [],
                joinVolunteerList: [],
                activityImg: "logo512.png",
                content: "活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容",
                time: new Date().getTime(),
                title:"活动标题",
                //活动Id
                activityId:123,
            }
        ]})

        console.debug(this.state)

    }

    getStatus(status:VolunteerStatus){
        switch (status) {
            case VolunteerStatus.apply:return "报名"
            case VolunteerStatus.join:return "参加"
            case VolunteerStatus.complete:return "完成"
        }
    }

    render() {
        return (
            <div className="overflow-auto seek-help-height">
                {this.state.data.map((help:SeekHelpState, index:number)=>
                    <div key={"list"+index} className="mt-3 mb-3 border-info border">
                        <Container>
                            <Row>
                                <Col xs={4}>
                                    <Image src={help.activityImg} className="activityImage"/>
                                </Col>
                                <Col>
                                    <h5>{help.title}</h5>
                                    <h6>{help.content}</h6>
                                </Col>
                            </Row>
                            <Row>
                                <Col xs={4} className="mt-auto mb-auto">
                                    <span>{moment(help.time).format("YYYY-MM-DD HH:mm:ss")}</span>
                                </Col>
                                <Col>
                                    <ButtonGroup>
                                        <Button variant={"primary"} disabled={help.applyVolunteerList.length===0} onClick={()=>this.setState({open:true,status:this.getStatus(VolunteerStatus.apply),volunteerList:help.applyVolunteerList})}>报名人数:{help.applyVolunteerList.length}</Button>
                                        <Button variant={"success"} disabled={help.joinVolunteerList.length===0} onClick={()=>this.setState({open:true,status:this.getStatus(VolunteerStatus.join),volunteerList:help.joinVolunteerList})}>参与人数:{help.joinVolunteerList.length}</Button>
                                        <Button variant={"light"} disabled={help.completeVolunteerList.length===0} onClick={()=>this.setState({open:true,status:this.getStatus(VolunteerStatus.complete),volunteerList:help.completeVolunteerList})}>完成人数:{help.completeVolunteerList.length}</Button>
                                    </ButtonGroup>
                                </Col>
                            </Row>
                        </Container>

                    </div>
                )}

                <Dialog hideBackdrop={true} open={this.state.open}
                        PaperComponent={(props)=>
                        <Draggable handle={"#"+titleId} cancel={'[class*="MuiDialogContent-root"]'}>
                            <Paper {...props} />
                        </Draggable>}
                        aria-labelledby={titleId}>
                    <CloseDialog menuName={this.state.status+"活动志愿者"} onClose={()=>this.setState({open:false})} titleId={titleId}/>
                    <ListGroup>
                        {(this.state.volunteerList||[]).map((user:User,index:number)=>
                            <ListGroup.Item key={"list"+index} className="d-flex justify-content-between" variant="info">
                                <span>{user.name}</span>
                                <Tooltip title="查看用户信息" placement="right">
                                <img src="user.svg" alt="查看用户信息" className="userIcon" onClick={()=>this.setState({openUserInfo:true,userId:user.userId})}/>
                                </Tooltip>
                            </ListGroup.Item>
                        )}
                    </ListGroup>
                </Dialog>

                <MyDialog titleId="view-user" menuName="用户信息"
                          content={<MyInfo isOwn={false} isMyFriend={false} isAdd={true} userId={this.state.userId?this.state.userId:""}/>}
                          open={this.state.openUserInfo} onClose={()=>this.setState({openUserInfo:false})}/>
            </div>
        )
    }
}