import React, {Component} from "react";
import axios from 'axios';
import moment from 'moment';
import {Link} from 'react-router-dom';
import 'moment/locale/zh-cn';
import delay from '../../../images/delay.png'
import invalid from '../../../images/invalid.png'
import {
    Form,
    Select,
    Input,
    Button,
    Checkbox,
    Upload,
    Icon,
    message,
    Modal,
    Table,
    Divider,
    InputNumber,
    Tag,
    DatePicker,
    Radio,
    Tooltip
} from "antd";
import '../css/members.css'
import "../common/formCommon.css"
import '../css/Courses.css'
import './style.css'
import ShixunModal from "../coursesPublic/ShixunModal";

class TraineetraininginformationModal extends Component {
    constructor(props) {
        super(props);
        this.setState({
            props: this.props,
            userids: this.props.userids,
            game_list:this.props.game_list,
            experience:this.props.experience,

        })
       // console.log("TraineetraininginformationModal")
       // console.log(this.props)
    }


    Cancel = () => {
        this.props.Cancel()
    }
    componentDidMount() {
        // this.seacthdata();

    }
  // componentWillReceiveProps(nextProps) {
  //   // console.log("46");
  //   // console.log(nextProps);
  //   // console.log(this.props);
  //   if (nextProps.boolgalist != this.props.boolgalist) {
  //     // console.log("50");
  //     // console.log(nextProps.user);
  //     if (nextProps.boolgalist !== undefined) {
  //       // console.log("53");
  //       // console.log(nextProps.user);
  //       this.setState({
  //         boolgalist: nextProps.boolgalist,
  //       })
  //     }
  //
  //
  //   }
  //
  //
  // }
  LimitNumber=(txt)=> {
    var str = txt;
    if(str.length>25){
      str = str.substring(0,25)+"......"
    }
    return str;
  }
    render() {
      console.log(83);
      console.log(this.props.boolgalist);
      const  columns = [
          {
            title: '关卡',
            dataIndex: 'number',
            key: 'number',
            width: 92,
            align: "center",
            render: (text, record) => (
              <span>
            <a style={{"color": '#07111B', "text-align": "center"}}>{record.number}</a>
            </span>
            ),
          },
          {
            title: '完成时间',
            dataIndex: 'name',
            key: 'name',
            width: 178,
            align: "center",
            render: (text, record) => (
              <span>
             <a style={{
               "color": '#989898',
               "text-align": "center"
             }}>{record.name === 'Invalid date' ? "--" : record.name}</a>
        </span>
            ),
          },
          {
            title: '',
            dataIndex: 'complete_status',
            key: 'complete_status',
            width: 100,
            align: "center",
            render: (text, record) => (
              <span>
               {record.complete_status === 2 ? <img src={delay}/> : record.complete_status === 3 ?
                 <img src={invalid}/> : ""}

        </span>
            ),
          },
          {
            title: '耗时',
            dataIndex: 'stduynumber',
            key: 'stduynumber',
            width: 92,
            align: "center",
            render: (text, record) => (
              <span>
             <a style={{"color": '#989898', "text-align": "center"}}>{record.stduynumber}</a>
        </span>
            ),
          },
          {
            title: '经验值',
            key: 'classroom',
            width: 92,
            dataIndex: 'classroom',
            align: "center",
            render: (text, record) => (
              <span>
             <a style={{"color": '#29BD8B', "text-align": "center"}}>{record.classroom}</a>
        </span>
            ),
          }
        ]

      const columnss = [
            {
              title: '关卡',
              dataIndex: 'number',
              key: 'number',
              align: "center",
              width: "117px",
              render: (text, record) => (
                <span >
            <a style={{"color":'#07111B', "text-align": "center"}}>{record.number}</a>
            </span>
              ),
            },
            {
              title: '完成时间',
              dataIndex: 'name',
              key: 'name',
              width: "203px",
              align: "center",
              render: (text, record) => (
                <span >
             <a style={{"color":'#989898', "text-align": "center"}} >{record.name==='Invalid date'?"--":record.name}</a>
        </span>
              ),
            },
            {
              title: '耗时',
              dataIndex: 'stduynumber',
              key: 'stduynumber',
              align: "center",
              width: "117px",
              render: (text, record) => (
                <span>
             <a style={{"color":'#989898', "text-align": "center"}}>{record.stduynumber}</a>
        </span>
              ),
            },
            {
              title: '经验值',
              key: 'classroom',
              dataIndex: 'classroom',
              align: "center",
              width: "117px",
              render: (text, record) => (
                <span>
             <a style={{"color":'#29BD8B', "text-align": "center"}}>{record.classroom}</a>
        </span>
              ),
            }
          ]

        return (
            <div>
                <Modal
                    keyboard={false}
                    className="HomeworkModal"
                    title={"学员实训信息"}
                    visible={this.props.visible}
                    footer={null}
                    onCancel={this.Cancel}
                >
                    <div style={{width:"100%" }}className="login_register_content"  >
                    <div style={{"width": "100%","text-align": "left","clear": "both"}}>
                        <div className="mt5 fl" >
                            <span style={{"text-align": "left"}}>{this.props.viewtrainingdata === undefined ? "" :  this.LimitNumber(this.props.viewtrainingdata.shixun_name)}</span>
                          <span className="ml10  "  style={{"text-align": "left","color":'#29BD8B'}} >经验值：<span style={{"color":'#29BD8B'}}> {this.props.experience=== undefined?"0" :this.props.experience}/</span><span style={{"color":'#29BD8B'}}>{this.props.viewtrainingdata === undefined ? "" : this.props.viewtrainingdata.shixun_score}</span></span>
                        </div>
                        {/*<Button type="primary" className="ml30"  >实训报告</Button>*/}
                        <Button  type="primary" className="lh38 fr" style={{"text-align": "center","width": "100px",color: "#fff"}} href={`/courses/${this.props.coursesId}/shixun_homeworks/${this.props.viewtrainingdata.work_id}/shixun_work_report`}>
                            实训报告
                        </Button>
                        {/*这里到时候要做判断*/}
                    </div>

                    </div>
                    <div className=" bor-bottom-greyE mt45 "></div>

                    <div style={{"clear": "both"}}>
                    <div className="fl edu-back-white ml10 ">
                            <img alt="头像" className="radius mt10" height="70" id="nh_user_logo" name="avatar_image"
                                 src={this.props.viewtrainingdata === undefined ? "" : "https://www.educoder.net/images/" + `${this.props.viewtrainingdata.image_url}`}
                                 width="70"/>
                    </div>
                        <div className="fl  edu-back-white ml20  mt15">
                            <li>{this.props.viewtrainingdata === undefined ? "" :this.props.viewtrainingdata.username}<span style={{"color":"#323232"}}> 通关：</span><span style={{"color": '#FF6800'}}>{this.props.viewtrainingdata === undefined ? "" :this.props.viewtrainingdata.complete_count}/{this.props.viewtrainingdata === undefined ? "" :this.props.viewtrainingdata.challenges_count}</span></li>
                            <li><span   style={{"color":"#989898"}} >完成效率：</span><span  style={{"color":"#4C4C4C"}}>{this.props.viewtrainingdata === undefined ? "" :this.props.viewtrainingdata.efficiency}</span></li>
                            <li><span style={{"color":"#989898"}}>通关时间：</span> <span style={{"color":"#4C4C4C"}}>{this.props.viewtrainingdata === undefined ? "":moment(this.props.viewtrainingdata.passed_time).format('YYYY-MM-DD HH:mm')==="Invalid date"?"--":moment(this.props.viewtrainingdata.passed_time).format('YYYY-MM-DD HH:mm')}</span> </li>
                        </div>
                        <div className="fl  edu-back-white ml20  mt15">
                            <li className="mt20"> <span style={{"color":"#989898"}}>课堂最高完成效率：</span> <span style={{"color":"#4C4C4C"}}>{this.props.viewtrainingdata === undefined ? "" :this.props.viewtrainingdata.max_efficiency} </span> </li>
                            <li><span style={{"color":"#989898"}}>总耗时:</span>  <span style={{"color":"#4C4C4C"}}> {this.props.viewtrainingdata === undefined ? "" :this.props.viewtrainingdata.total_spend_time}</span> </li>

                        </div>
                    </div>
                  {this.props.boolgalist === false?
                     <div>
                       {
                         this.props.game_list === undefined?"" : this.props.game_list.length<4?
                           <div className="edu-table edu-back-white ">
                             <style>
                               {
                                 `  .ant-table-body{
                                 overflow: hidden !important; 
                                  }`
                               }

                             </style>
                             <div className={"both"}></div>
                             {this.props.game_list === undefined ? "" : <Table
                               className="mt20"
                               dataSource={this.props.game_list}
                               columns={columns}
                               loading={false}
                               pagination={false}
                               onChange={this.TablePagination}
                             />}
                           </div>
                           :
                           <div className="edu-table edu-back-white ">
                             <div className={"both"}></div>
                             {this.props.game_list === undefined ? "" : <Table
                               className="mt20"
                               dataSource={this.props.game_list}
                               columns={columns}
                               pagination={{  //分页
                                 total: this.props.game_list.length, //数据总数量
                                 pageSize:  this.props.game_list.length,  //一页显示几条
                                 current: 1,
                               }}
                               loading={false}
                               pagination={false}
                               onChange={this.TablePagination}
                               scroll={{  y: 300 }}
                             />}
                           </div>
                       }


                     </div>



                    :


                  <div>
                    {
                      this.props.game_list === undefined?"" : this.props.game_list.length<4?
                        <div className="edu-table edu-back-white ">
                          <style>
                            {
                              `  .ant-table-body{
                                 overflow: hidden !important; 
                                  }`
                            }

                          </style>
                          <div className={"both"}></div>
                          {this.props.game_list === undefined ? "" : <Table
                            className="mt20"
                            dataSource={this.props.game_list}
                            columns={columnss}
                            loading={false}
                            pagination={false}
                            onChange={this.TablePagination}
                          />}
                        </div>
                        :
                        <div className="edu-table edu-back-white ">
                          <div className={"both"}></div>
                          {this.props.game_list === undefined ? "" : <Table
                            className="mt20"
                            dataSource={this.props.game_list}
                            columns={columnss}
                            pagination={{  //分页
                              total: this.props.game_list.length, //数据总数量
                              pageSize:  this.props.game_list.length,  //一页显示几条
                              current: 1,
                            }}
                            loading={false}
                            pagination={false}
                            onChange={this.TablePagination}
                            scroll={{  y: 300 }}
                          />}
                        </div>
                    }




                  </div>


                  }




                    </Modal>


            </div>

        )
    }
}

export default TraineetraininginformationModal;