import React,{Component} from 'react';
import { Modal,Checkbox,Select,Input,Tooltip,Spin,Icon,Drawer,Dropdown,Menu,Breadcrumb,Pagination,Button} from "antd";
import axios from'axios';
import './Newshixunmodel.css';
const Search = Input.Search;
class NewShixunModel extends Component{
	constructor(props){
		super(props)
		this.state={
			diff:0,
			shixun_list:undefined,
			shixuns_count:undefined,
		}
	}
	componentDidMount() {
  	console.log(this.props.type)

		if(this.props.type==='shixun'){
			let url="/shixuns/shixun_list.json"
			axios.get(url).then((response) => {

					if(response.data){
					  console.log(response.data);
						if(response.data.status===0){
						}
					}

				 })
		}else{
			let url="/shixuns/shixun_list.json"
			axios.get(url,{params:{
					type:'all', //这是带过来的值
					status:'all',
					search:undefined,
					diff:0,
					order:'desc',
					page:1,
					limit:15,
				}}).then((response) => {

						if(response.data){
								this.setState({
									shixun_list:response.data.shixun_list,
									shixuns_count:response.data.shixuns_count,
								})
						}

			})

		}

	}

	DropdownClick=(type)=>{
    this.setState({
			diff:type
		})
	}

	ItsCourse=(item)=>{
  return <Menu className={"inherits"}>
				{item.map((list,key)=>{
					return(
						<Menu.Item key={key} id={list.id}>
								{list.name}
						</Menu.Item>
						)
			  })}
			</Menu>
	}
	render() {

	  let {diff,datas,shixun_list,shixuns_count}=this.state;
		// let {visible,patheditarry}=this.props;

		const menus = (
			<Menu>
				<Menu.Item>
					<a onClick={()=>this.DropdownClick(0)}>
						所有
					</a>
				</Menu.Item>

				<Menu.Item >
					<a onClick={()=>this.DropdownClick(1)} >
		         初级
					</a>
				</Menu.Item>

				<Menu.Item>
					<a  onClick={()=>this.DropdownClick(2)}>
					   中级
					</a>
				</Menu.Item>

				<Menu.Item>
					<a onClick={()=>this.DropdownClick(3)}>
				     高级
					</a>
				</Menu.Item>

				<Menu.Item>
					<a onClick={()=>this.DropdownClick(4)}>
					   顶级
					</a>
				</Menu.Item>
			</Menu>
		);



		return(
			<div>
				<style>
					{
						`body{  overflow: hidden !important; }
					   .ant-drawer-content{ overflow:auto !important; background: #f5f5f5; }
					   .yslbottomsj{position: absolute;bottom: -8px;}
					  `
					}
				</style>

				<Drawer
					placement="top"
					closable={false}
					onClose={this.onClose}
					destroyOnClose={true}
					visible={true}
					height={'100%'}
				>
					<div className={"clearfix educontent pr"}>

						<div className={"square-list clearfix"}>

							<div className="newshixunheadersear">
								<div style={{height:"53px"}}></div>
								<Search
									style={{ width: "800px"}}
									className="packinput"
									placeholder="实训信息 / 院校名称 / 创建者"
									value={this.state.keywords}
									enterButton={<span>搜索</span>}
									onInput={(e)=>this.setdatafunsval(e)}
									onSearch={ (value)=>this.setdatafuns(value)} />
							</div>

							 <div className="clearfix font-12 mt20 mb10">

								<p className="font-12 ml5 fl">

									<span className="fl color-grey-9 mr20">已选   <span className={"color-blue"}>6</span>   个实训</span>
									<span className="fl color-grey-9 mr20">共   <span className={"color-blue"}>{shixuns_count===undefined?"":shixuns_count}</span>  个实训</span>

									<span className="fl color-grey-9 pointer mr30">
										<a className={" color-grey-6"}>学习人数</a>
										<sapn className="relativef ml5 " onClick={()=>this.updatedlist(sort_by)}>
											<i className={"iconfont icon-sanjiaoxing-up font-12 ntopsj  color-grey-9 color-blue"}></i>
											<i className={"iconfont icon-sanjiaoxing-down font-12 nyslbottomsj  color-grey-9"}></i>
										</sapn>
									</span>

									<Dropdown overlay={menus}>
										<a className="ant-dropdown-link  color-grey-6">
											{diff===0?"所有":diff===1?"初级":diff===2?"中级":diff===3?"高级":diff===4?"顶级":""}<Icon type="down" className={"color-grey-6"}/>
										</a>
									</Dropdown>
								</p>

								<p className="font-12 alltopiscright ml25 fr">
									<span className="fr mr30 topcsactive pointer color-grey-3">我的实训</span>
									<span className="fr mr30 topcsactive pointer color-grey-3 color-blue">全部实训</span>
								</p>

							</div>
							{/*author_name: "刘强"*/}
							{/*author_school_name: "湖南工业大学"*/}
							{/*challenge_names: ["打印输出 Hello World", "打印输出图形", "求3个数的最大值", "熟悉C语言调试过程"]*/}
							{/*challenges_count: 4*/}
							{/*content: {}*/}
							{/*id: 1504*/}
							{/*identifier: "tb7hw62n"*/}
							{/*level: "初级"*/}
							{/*study_count: 6002*/}
							{/*subjects: [{id: 138, name: "C语言程序设计"}, {id: 180, name: "C语言程序设计（湖南师范大学）"}, {id: 211, name: "移动云启 —— C语言练习题库"}]*/}
							{/*title: "C语言程序设计编辑与调试环境"*/}
							{/*visits_count: 9419*/}
							{shixun_list===undefined?"":shixun_list.length===0?"":shixun_list.map((item,key)=>{
								console.log(item.content)
							return(
								<div className="mt20 edu-back-white pd20 relativef newshixunlist" key={key}>
									<div className="clearfix">
										<div className="item-body">
											<div className="clearfix ds pr contentSection">
												<a title={item.title} className="ml30 fl font-16  color-dark maxwidth900">
													{item.title}
												</a>

												<div className="cl"></div>
												<p className="newshixunmodelmidfont">
													{/*{item.content}*/}
												</p>

												<p className="newshixunmodelbotfont">
													{item.challenge_names.map((item,key)=>{
														return(
                               <span>{item}</span>
														)
													})}
												</p>

												<div className={"newshixunpd030"}>
													<div className="xuxianpro"></div>
												</div>

												<p className="color-grey panel-lightgrey fl ml30">
													<style>
														{`
														.ant-breadcrumb-separator{
														   color: #D7D7D7 !important;
														}
														.panel-lightgrey, .panel-lightgrey span{
														   color: #999 !important;
														}
														.ant-breadcrumb-link{
														   margin-right:10px !important;
														}
														.ant-breadcrumb-separator{
														   margin-right:20px !important;
														}
													`}
													</style>
													<Breadcrumb separator="|">
														<Breadcrumb.Item>{item.author_name}</Breadcrumb.Item>
														<Breadcrumb.Item>{item.author_school_name}</Breadcrumb.Item>
														<Breadcrumb.Item>难度系数：{item.level}</Breadcrumb.Item>
														<Breadcrumb.Item>学习人数：{item.study_count}</Breadcrumb.Item>
													</Breadcrumb>

												</p>
												{item.subjects.length===0?"":<Dropdown overlay={()=>this.ItsCourse(item.subjects)}>
													<a className="ant-dropdown-link fl ml30 newshixunfont12  color-blue" >
														所属课程<Icon className={"color-blue"} type="down" />
													</a>
												</Dropdown>}

											</div>
										</div>
									</div>
								</div>
							)})
							}


							{shixun_list===undefined?"":shixuns_count>15?<div className={" edu-txt-center pd303010"}>
								<Pagination
									showQuickJumper
									defaultCurrent={1}
									pageSize={15}
								  total={shixuns_count===undefined?"":shixuns_count}
									// current={page}
									// onChange={this.PaginationCourse}
								/>
							</div>:""}

							<div className={" edu-txt-center padding20-30"}>
								<Button className={"mr20 newshixunmode"}>取消</Button>
								<Button className={"newshixunmode"} type="primary">确定</Button>
							</div>

						</div>

					</div>

				</Drawer>
			</div>

		)
	}
}

export default NewShixunModel;