import "../css/Signinstatistics.css"
import React,{ Component } from "react";
import { Row, Col,Select,Table,Pagination } from 'antd';
import axios from 'axios';
import LoadingSpin from "../../../../common/LoadingSpin";
import NoneDatas from "../component/NoneDatas";
const { Option } = Select;

class Signedinlist extends Component {

  constructor(props) {
    super(props)
    this.state={
      limit:5,
      page:1,
      loading:false,
      attendanceslist:[],
      data:null,
      group_ids:[],
      members_count:0,
      attendance_status:undefined,
      state:[
        {id:undefined,name:"全部状态"},
        {id:"NORMAL",name:"正常签到"},
        {id:"LEAVE",name:"请 假"},
        {id:"ABSENCE",name:this.props.defaultActiveKey ==="2"?"旷 课":"未签到"},
      ],
      newstate:[
        {id:"NORMAL",name:"正常签到"},
        {id:"LEAVE",name:"请 假"},
        {id:"ABSENCE",name:this.props.defaultActiveKey ==="2"?"旷 课":"未签到"},
      ],
      course_members_count:'--',
      attendance_count:'--',
    }
  }

  componentDidMount() {
    this.getdatas(this.props&&this.props.switattendance_id,1,[],undefined)
    // this.getpath()
  }
  componentDidUpdate(prevProps, prevState) {
    if(prevProps.headdata!=this.props.headdata){

      if(this.props.headdata){
        let listattendanceslist=[];
        listattendanceslist.push({id:undefined,name:"全部分班"})
        if(this.props.headdata.course_groups){

          if(this.props.headdata.course_groups.length>0){
            this.props.headdata.course_groups.map((item,key)=>{
              listattendanceslist.push(item)
            })
          }
        }
        this.setState({
          attendanceslist:listattendanceslist,
          data:this.props.headdata,
          course_members_count:this.props.headdata.normal_count,
          attendance_count:this.props.headdata.all_count
        })
      }


    }
  }
  getdatas=(id,page,group_ids,attendance_status)=>{
    this.setState({
      loading:true,
      member_attendances:[],
    })
    let that=this;
    let url=`/weapps/course_member_attendances.json`;
    axios.get(url,{params:{
        group_ids:group_ids,
        attendance_id:id,
        attendance_status:attendance_status,
        page:page,
        limit:5,
      }
    }).then((response) => {

      if(response){
        this.setState({
          member_attendances:response.data.member_attendances,
          members_count:response.data.members_count,

        })

      }
      this.setState({
				loading:false
			})
    }).catch((error) => {
      that.setState({
        loading:false
      })

    });
  }
  handleChangegroup_ids=(value)=>{
    let neval
    if(!value){
      if(value===0){
        neval=[0]
        this.setState({
          group_ids: [0],
          page:1
        })
      }else{
        neval=[]
        this.setState({
          group_ids: [],
          page:1
        })
      }

    }else{
      neval=[value]
      this.setState({
        group_ids: [value],
        page:1
      })
    }

    let {page,attendance_status}=this.state;
    this.getdatas(this.props&&this.props.switattendance_id,1,neval,attendance_status)
    if(this.props.defaultActiveKey==="1"){
      this.getpath(value)
    }

  }
  getpath=(id)=>{
    let listattendanceslist=[]
    let url=`/weapps/attendances/${this.props&&this.props.switattendance_id}.json`;
    axios.get(url).then((response) => {
      if(response.data){
        listattendanceslist.push({id:undefined,name:"全部分班"})
        if(response.data.course_groups.length>0){
          response.data.course_groups.map((item,key)=>{
            listattendanceslist.push(item)
          })
        }
        if(id){
          response.data.course_groups.map((item,key)=>{
            if(item.id===id){
              this.setState({
                course_members_count:item.course_members_count,
                attendance_count: item.attendance_count
              })
            }

          })
        }else{
          this.setState({
            course_members_count:response.data.normal_count,
            attendance_count: response.data.all_count
          })
        }
        this.setState({
          attendanceslist:listattendanceslist,
          data:response.data
        })

      }

    })
  }
  handleChangestate=(value)=>{
    let neval
    if(!value){
      neval=undefined
      this.setState({
        attendance_status:undefined,
        page:1
      })
    }else{
      neval=value
      this.setState({
        attendance_status: value,
        page:1
      })
    }

    let {page,group_ids}=this.state;
    this.getdatas(this.props&&this.props.switattendance_id,1,group_ids,neval)
  }
  paginationonChange = (pageNumber) => {
    this.setState({
      page: pageNumber,
    })
    let {group_ids,attendance_status}=this.state;
    this.getdatas(this.props&&this.props.switattendance_id,pageNumber,group_ids,attendance_status)

  }

  handleChange=(attendance_status,value)=>{

    let {member_attendances}=this.state;
    let newmember_attendances=member_attendances;

    newmember_attendances.map((item,key)=>{
      if(item.user_id===value){
        item.attendance_status=attendance_status
      }
    })


    let url=`/weapps/course_member_attendances/update_status.json`;

    axios.post(url, {
      attendance_id:this.props.switattendance_id,
      attendance_status:attendance_status,
      course_id:this.props.match.params.coursesId,
      user_id: value,
    })
      .then((response) => {
        if (response.data.status == 0) {
          this.props.showNotification(`修改状态成功`);
          this.setState({
            member_attendances:newmember_attendances
          })
          this.props.mygetdatas()
        }
      })
      .catch(function (error) {
        console.log(error);
      });



  }
  render() {
   let {attendanceslist,state,data,member_attendances,newstate,attendance_status}=this.state;

    const columns = [
      {
        title: '序号',
        dataIndex: 'index',
        key: 'index',
        width:'25%',
        className: "textcenter",
      },
      {
        title: '姓名',
        dataIndex: 'user_name',
        key: 'user_name',
        width:'25%',
        className: "textcenter",
        render: (text, record) => (
          <span>{record.user_name===null?"--":record.user_name}</span>
        )
      },
      {
        title: '学号',
        dataIndex: 'student_id',
        key: 'student_id',
        width:'25%',
        className: "textcenter",
        render: (text, record) => (
          <span>{record.student_id===null?"--":record.student_id}</span>
        )
      },
      {
        title: '状态',
        key: 'attendance_status',
        width:'25%',
        dataIndex: 'attendance_status',
        className: "textcenter",
        render: (text, record) => (
          <span>

            <Select key={record.index} defaultValue={record.attendance_status}
                    // className={"Signedinlistbox"}
                    className={record.attendance_status==="NORMAL"?"color26C7C9 Signedinlistbox sginboxcolor26C7C9 marginleft10":record.attendance_status==="LEAVE"?"colorEAAE4E Signedinlistbox sginboxcolorEAAE4E marginleft10":record.attendance_status==="ABSENCE"?this.props.defaultActiveKey==="2"?"colorFF835C Signedinlistbox sginboxcolorFF835C marginleft10":"color909399 Signedinlistbox sginboxcolor909399 marginleft10":"Signedinlistbox"}

                    style={{ width: 167 }} onChange={(e)=>this.handleChange(e,record.user_id)}>
                  {
                    newstate&&newstate.map((item,key)=>{
                      return(
                        <Option value={item.id} key={key}
                                className={item.name==="正常签到"?"color26C7C9 sginbox":item.name==="请 假"?"colorEAAE4E sginbox":item.name==="旷 课"?"colorFF835C sginbox": item.name ==="未签到"?"color909399 sginbox":""}>{item.name}</Option>
                      )
                    })
                  }
                </Select>
          </span>
        ),
      },
    ];

    return(
      <React.Fragment>
        <Row className={"mt20"}>
          <Col span={12}>
            <Row gutter={[{ xs: 8, sm: 16, md: 24, lg: 32 }, 20]}>

              <Col className="gutter-row" span={9}>

                <Select defaultValue="全部分班" className={"Signedinlistbox"} style={{ width: 167 }} onChange={this.handleChangegroup_ids}>
                  {attendanceslist&&attendanceslist.map((item,key)=>{
                    return(
                      <Option value={item.id} key={key}>{item.name}</Option>
                    )
                  })}

                </Select>

              </Col>

              <Col className="gutter-row ml20" span={6}>

                <Select defaultValue="全部状态"
                         className={"Signedinlistbox"}
                        //className={attendance_status&&attendance_status==="NORMAL"?"color26C7C9 Signedinlistbox sginboxcolor26C7C9":attendance_status&&attendance_status==="LEAVE"?"colorEAAE4E Signedinlistbox sginboxcolorEAAE4E":attendance_status&&attendance_status==="ABSENCE"?"colorFF835C Signedinlistbox sginboxcolorFF835C":"Signedinlistbox"}
                        style={{ width: 167 }} onChange={this.handleChangestate}>
                  {
                    state&&state.map((item,key)=>{
                      return(
                        <Option value={item.id} key={key}
                                //className={item.name==="正常签到"?"color26C7C9":item.name==="请假"?"colorEAAE4E":item.name==="旷课"?"colorFF835C":""}
                        >
                          {item.name}
                        </Option>
                      )
                    })
                  }
                </Select>

              </Col>

            </Row>

          </Col>
          <Col span={12}>

            <Row type="flex" justify="end">

              {this.props.defaultActiveKey==="2"?<Col className={"Signedintextright mr5"}>
                <span className={"color26C7C9 mr20"}>正常签到：{data&&data.normal_count}</span>
                <span className={"colorEAAE4E mr20"}>请假：{data&&data.leave_count}</span>
                <span className={"colorFF835C"}>旷课：{data&&data.absence_count}</span>
              </Col>:<Col className={"Signedintextright  mr5"}>
                <span className={"mr20"}>已签到：<span className={"color1890FF"}>{this.state.course_members_count}</span></span>
                <span>应签到：<span className={"color1890FF"}>{this.state.attendance_count}</span></span>
              </Col>}

            </Row>

          </Col>
        </Row>
        <style>
          {
            `
                .marginleft10{
                    margin-left: 10px !important;
                }
             `
          }
        </style>
        <div className={"backfff mt10"}>
					{
						this.state.loading===true?
							<div style={{
								minHeight:"400px",
							}}>
								<LoadingSpin></LoadingSpin>
							</div>
							:
						member_attendances&&member_attendances.length===0?
							<div style={{
								minHeight:"400px",
							}}>
							{/*<LoadingSpin></LoadingSpin>*/}
								<NoneDatas></NoneDatas>
							</div>

							:
							// loading={this.state.loading}
							<Table columns={columns} dataSource={member_attendances} pagination={false} />

					}

        </div>

        <div className="mb30 clearfix educontent mt40 intermediatecenter">
					{
						member_attendances&&member_attendances.length>0?
							<Pagination showQuickJumper current={this.state.page} onChange={this.paginationonChange}
													pageSize={this.state.limit}
													total={this.state.members_count}></Pagination>
							:""
				}

        </div>
      </React.Fragment>

    )
  }

}


export default Signedinlist
