import React, { Component } from 'react';
import "../css/messagemy.css"
import {getImageUrl} from 'educoder';
import { Modal,Input,Icon,Tooltip,Spin} from 'antd';
import axios from 'axios';
import TPMMDEditor from '../../tpm/challengesnew/TPMMDEditor';

import moment from 'moment';
//私信聊天页面
class MessagChat extends Component{
	constructor(props) {
		super(props);
		this.messageRef = React.createRef();
		this.state={
			isSpin:false,
			isSpins:false,
			limit:20,
			page:1,
			datay:[],
			mess:false,
		}
	}

	componentDidMount(){
		 this.getdata(1);
		console.log("MessagChat");
	 console.log(this.props);
	}
	// 滑动刷新
	contentViewScrolledit=(e)=>{

		//滑动到底判断
		if(e.currentTarget.scrollHeight-e.currentTarget.scrollTop===e.currentTarget.clientHeight){
			console.log("滑动到底判断");
			let {page}=this.state;
			let newpage=page+1
			this.getdata(newpage);
		}

	};
	//获取数据地方
	getdata=(page)=>{
		this.setState({
			isSpins:true,
		});
		let{limit}=this.state;
		let url = `/users/${this.props.current_user.user_id}/private_messages.json`;
		// let url = `/users/71519/private_messages.json`;
		axios.get((url),{params:{
				page:page,
				per_page:limit,
			}}).then((result) => {
			if (result) {
				// console.log(types);
				// console.log(result);
				if(result.data.message!==undefined){
					// console.log("5151515151");
					return;
				}
				// console.log("调用了消失的方法");
				// console.log("5454545454");


				if(result.data!==null){
					if(result.data.private_messages!==null){
					 if(result.data.private_messages.length>0){
					 	for (var i=0;i<result.data.private_messages.length;i++){
							this.state.datay.push(result.data.private_messages[i]);
						}
					 }
					}
				}
				this.setState({
					page:page,
					isSpins:false,
					datay,
					data:result.data.private_messages===null?undefined:result.data.private_messages===undefined?undefined:result.data.private_messages===[]?undefined:result.data.private_messages==="[]"?undefined:result.data.private_messages.length===0?undefined:result.data.private_messages,
				});
				// console.log(this.state.datay);
			}
		}).catch((error) => {
			console.log(error);
			this.setState({
				isSpins:false,
			})
		})
	};
	// 跳转页面
	smyJump =(i)=>{
		console.log("跳转页面");
		console.log(i);
		this.props.Modifyur(i);
	};

	// 点击了用户
	Clickedontheuser=(user)=>{
		this.setState({
			myysluser:user,
			mess:true,
		})
	}

	setreplyfun=()=>{
	  let  contents=this.messageRef.current.getValue().trim();
	  let  target_ids="";
		let url = `/users/${this.props.current_user.user_id}/private_messages.json`;

		axios.post(url, {
				target_id: target_ids,
				content: contents
			})
			.then((response) => {
				if (response.data.status == '0') {
					this.setState({ modulationModalVisible: false })
					this.props.showNotification('调分成功')
					this.fetchList()
				}
			})
			.catch(function (error) {
				console.log(error);
			});
	}


	render() {
		let{isSpins,datay,myysluser,mess}=this.state;
		//
		return (
			<div className="edu-back-white ml20">
				{/*私信对话框*/}
      <div className="df clearfix">
				{/*左边*/}
				<div className="flex1">
				<p className="clearfix pt30 pb30 edu-txt-center font-16 bor-bottom-greyE">
					<a onClick={()=>this.smyJump(2)}><i className="iconfont icon-zuojiantou font-14 fl ml25 color-grey-9"
																										 data-tip-down="返回到列表"></i></a>
				{mess===false?(myysluser!==undefined?myysluser.name:""):(myysluser!==undefined?myysluser.name:"")}与你的私信
				</p>
					{/*聊天页面*/}
					<div className="dialogPanel">
						<div className="dialogPanel">
							<div>
								<p className="mt30 edu-txt-center"><span className="letter-time">2019/07/20</span></p>
								{/*右边*/}
								<div className="ThisSide clearfix" id="message_content_25137">
									<a href="/users/innov"><img alt="头像" className="ml10 radius fr myimgw48 myimgh48" src={"/images/avatars/User/1?1558048024"} /></a>
									<div className="fr pr ThisSide-info">
										<span className="trangle"></span>
										<div className="sms break_word" id="message_content_show_25137">hello</div>
										<div className="edu-txt-left mt5">
											<a className="color-grey-c"
												>删除</a>
										</div>
									</div>
									<span className="fr mr15 color-grey-c lineh-15 mt15">22:20</span>
								</div>

							</div>
						</div>







					</div>

					{/*回复*/}
					<div className="bor-top-greyE padding20">
						<style>
							{`
							.rememberTip{
								display:none;
								}
							`}
						</style>
						<TPMMDEditor ref={this.messageRef}
												 placeholder={'请输入您的回复'}
												 watch={false}
												 initValue={""}
												 mdID={'courseMessageMD'}
												 className="courseMessageMD"
												 height={200}
						></TPMMDEditor>

						<div className={"msheight30"}>
							<span className="fl ml5 color-orange font-12">在问题反馈时，请同时发送问题发生页的网址链接，以便我们高效的为您服务</span>
							<a className="fr task-btn task-btn-orange" onClick={this.setreplyfun}>回复</a>
						</div>
					</div>




				</div>
				{/*右边*/}
       <div className="bor-left-greyE" style={{width:"290px"}}>
				 {/*右边头部*/}
				 <p className="pt30 pb30 pl30 edu-txt-left font-16 bor-bottom-greyE">私信列表</p>
				 <Spin size="large" className="myw100baifenbi" spinning={isSpins}>
				 <div className="private-list"   onScroll={this.contentViewScrolledit}>
					 {/*列表数据*/}
					 {
						 datay===undefined?
						""
							 :datay.map((item,key)=>{
								 return(
									 <div className="private-part clearfix" key={key} onClick={(item)=>this.Clickedontheuser(item.target)}>
										 <div className="part-line df">
											 <img src={item.target.image_url} className="radius mr10 myimgw48 myimgh48"/>
											 <div className="flex1">
												 <p className="clearfix mb15 lineh-17">
                  <span className="fl pr">
                    <span className="task-hide privatePartName">{item.target.name}</span>
										{item.unread === true?
                      <span className="newLetter"></span>
											:""}
                  </span>
													 <span className="color-grey-c fr">{moment(item.send_time).fromNow()}</span>
												 </p>
													 <p className="color-grey-6 lineh-20 justify  break_word task-hide-2" style={{wordBreak:"break-word"}}		dangerouslySetInnerHTML={{__html:item.content}}></p>
											 </div>

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




				 </div>
				 </Spin>


			 </div>








			</div>
			</div>
		)
	}
}
export default MessagChat;


// onClick="delete_confirm_box('/users/innov/delete_message?mess_id=25137', '确定要删除该条记录吗？')"
//
// {/*左边*/}
// <div className="OtherSide clearfix" id="message_content_25148">
// 	<a href="/users/p94531287"><img alt="71519?1564061748" className="mr10 radius fl" height="48"
// 																	src="/images/avatars/User/71519?1564061748" width="48"></a>
// 	<div className="fl pr OtherSide-info">
// 		<span className="trangle"></span>
// 		<div className="sms break_word" id="message_content_show_25148">你好</div>
// 		<div className="edu-txt-right mt5">
// 			<a href="javascript:void(0)" className="color-grey-c"
// 				 onClick="delete_confirm_box('/users/innov/delete_message?mess_id=25148', '确定要删除该条记录吗？')">删除</a>
// 		</div>
// 	</div>
// 	<span className="fl ml15 color-grey-c lineh-15 mt15">22:21</span>
// </div>