import React from 'react';
import NewHeader from './NewHeader'
import NewFooter from './NewFooter'
import { downloadFile } from 'educoder'
import axios from 'axios';
import { Spin } from 'antd';
import './TPMIndex.css';
import LoginDialog from '../login/LoginDialog';
import AccountProfile from '../user/AccountProfile';
import AccountPhoneemail from '../user/AccountPhoneemail';
const $ = window.$;

export function TPMIndexHOC(WrappedComponent) {
	// 这里如果extends WrappedComponent 会出现 WrappedComponent mount twice的问题
	return class II extends React.Component {
		constructor(props) {
			super(props)
			window.$('#root').css('position', 'relative')

			this.state = {
				tpmLoading: true,
				resLoading: true,
				Headertop: undefined,
				Footerdown: undefined,
				coursedata: {},

				isRender: false,
				AccountProfiletype: false,
				AccountPhoneemailtype: false,
				globalLoading: false,
				dataquerys: {},
				isloginCancel: undefined,
				mygetHelmetapi: null,
			}
		}

		// header里面需要有user
		initCommonState(user) {
			// 更新头像后，需要改变参数，不然会被图片缓存影响到  --> 后台已加 ?t=${new Date().getTime()
			const newUser = Object.assign({}, { ...user }, { image_url: `${user.image_url}` });
			this.setState({
				user: newUser,
				current_user: newUser
			})
		}
		showShixun = () => {
			const { shixunId } = this.props.match.params
			const url = `/api/v1/shixuns/${shixunId}/show_shixun`

			this.setState({ tpmLoading: true })
			axios.get(url,
				{
					withCredentials: true
				}
			).then((response) => {
				if (response.data && response.data.shixun) {
					this.initCommonState(response.data.current_user)
					response.data.tpmLoading = false;
					this.setState(response.data);
				}

			}).catch((error) => {
				console.log(error)
			})
		}
		aboutFocus = () => {
			const { creator, watched } = this.state
			/*http://localhost:3000/api/v1/users/155/watch?object_id=156&object_type=user*/

			const focusUrl = `/api/v1/users/${creator.owner_id}/${watched ? 'unwatch' : 'watch'}?object_id=${creator.owner_id}&object_type=user`

			axios.get(focusUrl, {
			})
				.then((response) => {
					const status = response.data.status;
					if (status == 1) {
						const new_author_info = Object.assign({}, creator)
						this.setState({
							watched: !watched
						})
					}
				}).catch((error) => {
					console.log(error)
				})
		}

		keyupListener = (e) => {
			if (e.key === "Escape") {
				this.setState({ globalLoading: false })
			}
		}
		componentWillUnmount() {
			window.removeEventListener('keyup', this.keyupListener)
		}

		componentDidMount() {
			// console.log("TPMIndexHOC========");
			// console.log(this.props);
			window.addEventListener('keyup', this.keyupListener)

			if (this.props.match.path === "/") {
				// document.title="创新源于实践";
			} else if (this.props.match.path === "/403") {
				document.title = "你没有权限访问";
			} else if (this.props.match.path === "/nopage") {
				document.title = "没有找到该页面";
			} else if (this.props.match.path === "/shixuns") {
				document.title = "实训项目";
			} else if (this.props.match.path === "/paths") {
				document.title = "实践课程";
			} else if (this.props.match.path === "/classrooms") {
				document.title = "教学课堂";
			}

			$.ajaxSetup({
				cache: true
			});

			//帮助后台传参数
			const query = this.props.location.search;
			var dataqueryss = {}
			try {
				var foqus = this.foo(query);
				if (JSON.stringify(foqus) === "{}") {
					this.setState({
						dataquerys: {},
					});
				} else {
					this.setState({
						dataquerys: foqus,
					});
					dataqueryss = foqus;
				}
			} catch (e) {
				this.setState({
					dataquerys: {},
				})
			}
			this.fetchUsers(dataqueryss);

			///请求定制化的信息
			this.getAppdata();
		}
		/**
			课堂权限相关方法，暂时写这里了 ----------------------------------------START
			ADMIN = 0       # 超级管理员
			CREATOR = 1     # 课程创建者
			PROFESSOR = 2     # 课程老师
			ASSISTANT_PROFESSOR = 3  # 课程助教
			STUDENT = 4     # 学生
			NORMAL = 5      # 普通用户

			v2
			# 课程权限判断
			ADMIN = 0       # 超级管理员
			BUSINESS = 1    # 运营人员
			CREATOR = 2     # 课程创建者   课堂管理员
			PROFESSOR = 3     # 课程老师
			ASSISTANT_PROFESSOR = 4  # 课程助教
			STUDENT = 5     # 学生
			NORMAL = 6      # 普通用户
			Anonymous = 7      # 普未登录
		*/
		//超管0
		isSuperAdmin = () => {
			// return false
			return this.state.coursedata && this.state.coursedata.course_identity === 0
		}
		isCourseAdmin = () => {
			return this.state.coursedata && this.state.coursedata.course_identity === 2
		}
		//超管、运维0-1
		isClassManagement = () => {
			return this.state.coursedata && this.state.coursedata.course_identity < 2
		}
		//超管、运维、课堂管理0-2
		isAdminOrCreator = () => {
			return this.state.coursedata && this.state.coursedata.course_identity < 3
		}
		//超管、运维、课堂管理、老师0-3
		isAdminOrTeacher = () => {
			return this.state.coursedata && this.state.coursedata.course_identity < 4
		}
		// 助教===4
		isAssistant = () => {
			return this.state.coursedata && this.state.coursedata.course_identity === 4
		}
		// 超管、运维、课堂管理、老师、助教0-4
		isAdmin = () => {
			return this.state.coursedata && this.state.coursedata.course_identity < 5
		}
		// 学生5
		isStudent = () => {
			return this.state.coursedata && this.state.coursedata.course_identity === 5
		}
		// 超管、运维、课堂管理、老师、助教、学生0-5
		isAdminOrStudent = () => {
			return this.state.coursedata && this.state.coursedata.course_identity <= 5
		}
		// 游客未登录/非课堂成员6>
		isNotMember = () => {
			return this.state.coursedata && this.state.coursedata.course_identity >= 6
		}
		//课堂是否已结束
		isCourseEnd = () => {
			return this.state.current_user ? this.state.current_user.course_is_end : false
		}


		//获取数据为空的时候
		gettablogourlnull = () => {
			this.setState({
				mygetHelmetapi: undefined
			});
			document.title = "EduCoder";
			var link = document.createElement('link'),
				oldLink = document.getElementById('dynamic-favicon');
			link.id = 'dynamic-favicon';
			link.rel = 'shortcut icon';
			link.href = "/react/build/./favicon.ico";
			if (oldLink) {
				document.head.removeChild(oldLink);
			}
			document.head.appendChild(link);
		};

		//获取数据的时候
		gettablogourldata = (response) => {
			document.title = response.data.setting.name;
			var link = document.createElement('link'),
				oldLink = document.getElementById('dynamic-favicon');
			link.id = 'dynamic-favicon';
			link.rel = 'shortcut icon';
			link.href = '/' + response.data.setting.tab_logo_url;
			if (oldLink) {
				document.head.removeChild(oldLink);
			}
			document.head.appendChild(link);
		}
		//获取当前定制信息
		getAppdata = () => {
			try {
				var chromesettingArray = JSON.parse(localStorage.getItem('chromesetting'));
				var chromesettingresponseArray = JSON.parse(localStorage.getItem('chromesettingresponse'));
				this.setState({
					mygetHelmetapi: chromesettingArray
				});
				if (chromesettingArray.tab_logo_url) {
					this.gettablogourldata(chromesettingresponseArray);
				} else {
					this.gettablogourlnull();
				}
			} catch (e) {
				console.log("hoc获取游览器配置失败 重新请求开始读取配置");
				this.getAppdatausr();
			}

		};
		getAppdatausr = () => {
			let url = "/setting.json";
			axios.get(url).then((response) => {
				if (response) {
					if (response.data) {
						this.setState({
							mygetHelmetapi: response.data.setting
						});
						localStorage.setItem('chromesetting', JSON.stringify(response.data.setting));
						localStorage.setItem('chromesettingresponse', JSON.stringify(response));
						try {
							if (response.data.setting.tab_logo_url) {
								this.gettablogourldata(response);
							} else {
								this.gettablogourlnull();
							}
						} catch (e) {
							this.gettablogourlnull();
						}


					} else {

						this.gettablogourlnull();

					}

				} else {
					this.gettablogourlnull();

				}

			}).catch((error) => {
				this.gettablogourlnull();

			});

		}

		fetchUser = () => {
			let url = `/users/get_user_info.json`
			let courseId;
			let query = this.props.location.pathname;
			const type = query.split('/');
			if (type[1] == 'classrooms' && type[2]) {
				courseId = parseInt(type[2])
				// url += `?course_id=${courseId}`
			}
			var datay = {};
			if (JSON.stringify(this.state.dataquerys) === "{}") {
				datay = {
					course_id: isNaN(courseId) ? undefined : courseId,
					school: 1
				}
			} else {
				datay = {
					course_id: isNaN(courseId) ? undefined : courseId,
					school: 1,
					chinaoocTimestamp: this.state.dataquerys.chinaoocTimestamp,
					websiteName: this.state.dataquerys.websiteName,
					chinaoocKey: this.state.dataquerys.chinaoocKey,
				}
			}
			axios.get(url, {
				params:
					datay
			}).then((response) => {
				/*
					{
							"username": "黄井泉",
							"login": "Hjqreturn",
							"user_id": 12,
							"image_url": "avatar/User/12",
							"admin": true,
							"is_teacher": false,
							"tidding_count": 0
					}
				*/
				if (response === undefined) {
					return
				}
				if (response.data) {
					this.initCommonState(response.data)
					this.setState({
						tpmLoading: false,
						coursedata: {
							course_identity: response.data.course_identity >= 0 ? response.data.course_identity : undefined,
							course_public: response.data.course_public,
							name: response.data.course_name,
							userid: response.data.user_id
						},

					})

				}

			}).catch((error) => {
				console.log(error)
			})
		};
		fetchUsers = (yslurlobject) => {
			let url = `/users/get_user_info.json`
			let courseId;
			let query = this.props.location.pathname;
			const type = query.split('/');
			if (type[1] == 'classrooms' && type[2]) {
				courseId = parseInt(type[2])
				// url += `?course_id=${courseId}`
			}
			var datay = {};
			if (JSON.stringify(yslurlobject) === "{}") {
				datay = {
					course_id: isNaN(courseId) ? undefined : courseId,
					school: 1
				}
			} else {
				datay = {
					course_id: isNaN(courseId) ? undefined : courseId,
					school: 1,
					chinaoocTimestamp: yslurlobject.chinaoocTimestamp,
					websiteName: yslurlobject.websiteName,
					chinaoocKey: yslurlobject.chinaoocKey,
				}
			}
			axios.get(url, {
				params:
					datay
			},
				{
					// withCredentials: true
				}
			).then((response) => {
				/*
					{
							"username": "黄井泉",
							"login": "Hjqreturn",
							"user_id": 12,
							"image_url": "avatar/User/12",
							"admin": true,
							"is_teacher": false,
							"tidding_count": 0
					}
				*/
				if (response === undefined) {
					return
				}
				if (response.data) {
					this.initCommonState(response.data)
					this.setState({
						tpmLoading: false,
						coursedata: {
							course_identity: response.data.course_identity >= 0 ? response.data.course_identity : undefined,
							course_public: response.data.course_public,
							name: response.data.course_name,
							userid: response.data.user_id
						},

					})

				}

			}).catch((error) => {
				console.log(error)
			})
		};
		//截取url 数据的
		foo = (url) => {
			var json = {};
			var regExp = /[\?\&](\w+)(=?)(\w*)/g;
			var arr;
			do {
				arr = regExp.exec(url);
				// console.log(arr); // arr = [完整的字符串, key, 等号或'', value或'']

				if (arr) {
					var key = arr[1];
					var value = arr[3];
					// arr[2] === ''时, value = undefined
					if (!arr[2])
						value = undefined;

					json[key] = value;
				}
			} while (arr);

			return json;
		};
		hideLoginDialog = () => {
			this.setState({
				isRender: false,
				isloginCancel: undefined
			})
		}
		showLoginDialog = () => {
			this.setState({
				isRender: true,
				isloginCancel: "iscancel"
			})
		}
		//验证登录是否成功方法
		checkIfLogin = () => {
			return this.state.current_user && this.state.current_user.login != ''
		}

		hideAccountProfile = () => {
			this.setState({
				AccountProfiletype: false
			})
		}
		showProfileCompleteDialog = () => {
			this.dialogObj = {}
			this.setState({
				AccountProfiletype: true
			})
		}
		showhideAccountPhoneemailDialog = () => {
			this.dialogObj = {}
			this.setState({
				AccountPhoneemailtype: true
			})
		}
		hideAccountPhoneemailtype = () => {
			this.setState({
				AccountPhoneemailtype: false
			})
		}
		//验证是否完善资料
		checkIfProfileCompleted = () => {
			return this.state.current_user && this.state.current_user.profile_completed
		}

		showaccountprofileDialog = () => {
			this.dialogObj = {
				content: '您需要去完成您的个人资料，才能使用此功能',
				okText: '立即完成',
				okHref: '/account/profile'
			}
			this.setState({
				AccountProfiletype: true,
			})
		}
		showProfessionalCertificationDialog = () => {
			this.dialogObj = {
				content: '您需要去完成您的职业认证，才能使用此功能',
				okText: '立即完成',
				okHref: '/account/certification'
			}
			this.setState({
				AccountProfiletype: true,
			})
		}
		checkIfProfessionalCertification = () => {
			return this.state.current_user && this.state.current_user.professional_certification
		}


		ShowOnlinePdf = (url) => {
			return axios({
				method: 'get',
				url: url,
				responseType: 'arraybuffer',
			}).then((result) => {
				var binaryData = [];
				binaryData.push(result.data);
				this.url = window.URL.createObjectURL(new Blob(binaryData, { type: "application/pdf" }));
				window.open(this.url);
			})
		}
		DownloadFileA = (title, url) => {
			let link = document.createElement('a');
			document.body.appendChild(link);
			link.href = url;
			link.download = title;
			//兼容火狐浏览器
			let evt = document.createEvent("MouseEvents");
			evt.initEvent("click", false, false);
			link.dispatchEvent(evt);
			document.body.removeChild(link);
		}

		DownloadOpenPdf = (type, url) => {
			type === true ? window.open(url) : window.location.href = url;
		}
		slowDownload = (url, tip) => {
			this._gLoadingTip = tip || '正在生成文件，请稍后...';
			this.setState({ globalLoading: true })
			const fileUrl = url;
			downloadFile({
				url: fileUrl,
				successCallback: (url) => {
					this.setState({ globalLoading: false })
					console.log('successCallback')
				},
				failCallback: (responseHtml, url) => {
					this.setState({ globalLoading: false })
					console.log('failCallback')
				}
			})
		}
		yslslowCheckresults = (tip) => {
			this._gLoadingTip = tip || '成绩计算中，请稍候...';
			this.setState({ globalLoading: true })
		}
		yslslowCheckresultsNo = () => {
			this.setState({ globalLoading: false })
		}

		showGlobalLoading = (tip) => {
			this._gLoadingTip = tip || '加载中，请稍后...';
			this.setState({ globalLoading: true })
		}
		hideGlobalLoading = () => {
			this.setState({ globalLoading: false })
		}

		MdifHasAnchorJustScorll = () => {
			//mdhash滚动
			let anchor = decodeURI(this.props.location.hash).replace('#', '');
			// 对应id的话, 滚动到相应位置
			if (!!anchor) {
				let anchorElement = document.getElementsByName(anchor);
				if (anchorElement) {
					if (anchorElement.length > 0) {
						anchorElement[anchorElement.length - 1].scrollIntoView();
					}
				}
			}
		}

		//跳转道描点的地方
		scrollToAnchor = (anchorName) => {
			if (anchorName) {
				// 找到锚点
				let anchorElement = document.getElementById(anchorName);
				// 如果对应id的锚点存在，就跳转到锚点
				if (anchorElement) {
					anchorElement.scrollIntoView();
				}
			}
		}

		render() {
			let { Headertop, Footerdown, isRender, AccountProfiletype, AccountPhoneemailtype } = this.state;
			const common = {
				isSuperAdmin: this.isSuperAdmin,
				isAdminOrCreator: this.isAdminOrCreator,
				isClassManagement: this.isClassManagement,
				isCourseAdmin: this.isCourseAdmin,

				isAdmin: this.isAdmin,
				isAdminOrTeacher: this.isAdminOrTeacher,
				isAssistant: this.isAssistant,
				isStudent: this.isStudent,
				isAdminOrStudent: this.isAdminOrStudent,
				isNotMember: this.isNotMember,
				isCourseEnd: this.isCourseEnd,

				isUserid: this.state.coursedata && this.state.coursedata.userid,
				fetchUser: this.fetchUser,

				showLoginDialog: this.showLoginDialog,
				checkIfLogin: this.checkIfLogin,
				showProfileCompleteDialog: this.showProfileCompleteDialog,
				showhideAccountPhoneemailDialog: this.showhideAccountPhoneemailDialog,
				checkIfProfileCompleted: this.checkIfProfileCompleted,
				showaccountprofileDialog: this.showaccountprofileDialog,
				checkIfProfessionalCertification: this.checkIfProfessionalCertification,
				showProfessionalCertificationDialog: this.showProfessionalCertificationDialog,

				ShowOnlinePdf: (url) => this.ShowOnlinePdf(url),
				DownloadFileA: (title, url) => this.DownloadFileA(title, url),
				DownloadOpenPdf: (type, url) => this.DownloadOpenPdf(type, url),

				slowDownload: this.slowDownload,
				showGlobalLoading: this.showGlobalLoading,
				hideGlobalLoading: this.hideGlobalLoading,
				yslslowCheckresults: this.yslslowCheckresults,
				yslslowCheckresultsNo: this.yslslowCheckresultsNo,
				MdifHasAnchorJustScorll: this.MdifHasAnchorJustScorll,
				scrollToAnchor: this.scrollToAnchor

			};
			var mypath = this.props && this.props.match && this.props.match.path;
			return (
				<div className="indexHOC">
					{isRender === true ? <LoginDialog
						Modifyloginvalue={() => this.hideLoginDialog()}
						{...this.props}
						{...this.state}
					/> : ""}
					{/* AccountProfile 也用作职业认证 */}
					{AccountProfiletype === true ? <AccountProfile
						hideAccountProfile={() => this.hideAccountProfile()}
						{...this.props}
						{...this.state}
						{...this.dialogObj}
					/> : ""}
					{/*验证是否注册手机邮箱*/}
					{AccountPhoneemailtype === true ? <AccountPhoneemail
						hideAccountProfile={() => this.hideAccountPhoneemailtype()}
						{...this.props}
						{...this.state}
						{...this.dialogObj}
					/> : ""}

					<NewHeader {...this.state} {...this.props}></NewHeader>
					<Spin spinning={this.state.globalLoading} delay={0} className="globalSpin"
						size="large"
						tip={this._gLoadingTip || "加载中..."}
					>
						<div className="newContainer newContainers">
							<WrappedComponent initCommonState={(user) => this.initCommonState(user)}
								{...this.props} {...this.state}
								showShixun={this.showShixun} aboutFocus={this.aboutFocus}
								{...common}
							>
							</WrappedComponent>
						</div>
					</Spin>
					<NewFooter
						{...this.state} {...this.props}
						Footerdown={Footerdown}
					/>

				</div>
			);
		}
	}
}
