forgeplus-react/src/context/TPIContextProvider.js

import React, { Component } from 'react';
import ReactDOM from 'react-dom';

import axios from 'axios';
import Snackbar from 'material-ui/Snackbar';
import Fade from 'material-ui/transitions/Fade';

import update from 'immutability-helper'

import Dialog, {
	DialogActions,
	DialogContent,
	DialogContentText,
	DialogTitle,
} from 'material-ui/Dialog';

import Button from 'material-ui/Button';

import EvaluateSuccessEffectDisplay from './EvaluateSuccessEffectDisplay'

import _ from 'lodash'

/*
	若干js库
	http://inorganik.github.io/countUp.js/

*/
/*
	切下一关需要更新：
	LeftViewContainer state.gameAnswer
*/

import TPIContext from './TPIContext'
import {
	EDU_ADMIN, EDU_SHIXUN_MANAGER, EDU_SHIXUN_MEMBER, EDU_CERTIFICATION_TEACHER
	, EDU_GAME_MANAGER, EDU_TEACHER, EDU_NORMAL, EDU_BUSINESS, CNotificationHOC, getRandomNumber
} from 'educoder'
import { MuiThemeProvider, createMuiTheme, withStyles } from 'material-ui/styles';
import MUIDialogStyleUtil from '../modules/page/component/MUIDialogStyleUtil'

const styles = MUIDialogStyleUtil.getTwoButtonStyle()

// 主题自定义
const theme = createMuiTheme({
	palette: {
		primary: {
			main: '#4CACFF',
			contrastText: 'rgba(255, 255, 255, 0.87)'
		},
		secondary: { main: '#4CACFF' }, // This is just green.A700 as hex.
	},
});

const testSetsExpandedArrayInitVal = [false, false, false, false, false,
	false, false, false, false, false,
	false, false, false, false, false,
	false, false, false, false, false]
window.__fetchAllFlag = false;	//  是否调用过fetchAll   TODO 如何多次使用provider？

const $ = window.$
class TPIContextProvider extends Component {
	constructor(props) {
		super(props)
		this.onRunCodeTestFinish = this.onRunCodeTestFinish.bind(this)
		this.onRunChooseTestFinish = this.onRunChooseTestFinish.bind(this)
		this.testSetUnlock = this.testSetUnlock.bind(this)

		this.onTestSetHeaderClick = this.onTestSetHeaderClick.bind(this)

		this.onShowPrevStage = this.onShowPrevStage.bind(this)
		this.onShowNextStage = this.onShowNextStage.bind(this)

		this.readGameAnswer = this.readGameAnswer.bind(this)
		this.praisePlus = this.praisePlus.bind(this)

		this.onGamePassed = this.onGamePassed.bind(this)

		this.onPathChange = this.onPathChange.bind(this)

		this.showSnackbar = this.showSnackbar.bind(this)
		this.showDialog = this.showDialog.bind(this)

		this.onShowUpdateDialog = this.onShowUpdateDialog.bind(this)
		this.updateDialogClose = this.updateDialogClose.bind(this)

		// this.showEffectDisplay();

		this.state = {
			loading: true,	// 正在加载数据
			gDialogOpen: false,
			currentGamePassed: false,	// 当前game评测通过
			currentPassedGameGainGold: 0, 	// 当前通过的game获得的金币数
			currentPassedGameGainExperience: 0,	// 当前通过的game获得的经验数

			user: {},
			challenge: {},
			shixun_name: '',
			hide_code: false,

			showUpdateDialog: false,

			testSetsExpandedArray: testSetsExpandedArrayInitVal.slice(0),
		}
	}

	showEffectDisplay = (data) => {
		const dom = document.getElementById('picture_display');
		window.$(dom).show();
		ReactDOM.unmountComponentAtNode(dom)
		ReactDOM.render(<EvaluateSuccessEffectDisplay type={"qrcode"} {...data} />, dom);
	}

	onShowUpdateDialog() {
		this.setState({ showUpdateDialog: true })
	}
	// updateNowSuccess true 立即更新成功
	// TODO updateDialogClose方法名不对， 改为updateDialogCallback
	updateDialogClose(nextUpdateSuccess, updateNowSuccess) {
		const { myshixun } = this.state;
		if (nextUpdateSuccess) {
			myshixun.system_tip = true;
		}
		let { tpm_cases_modified, tpm_modified, tpm_script_modified } = this.state;
		if (updateNowSuccess) {
			tpm_cases_modified = false;
			tpm_modified = false;
			tpm_script_modified = false;
		}
		this.setState({
			myshixun,
			tpm_cases_modified,
			tpm_modified,
			tpm_script_modified,
			showUpdateDialog: false,
		})
	}


	componentWillUnmount() {

		this.costTimeInterval && window.clearInterval(this.costTimeInterval)
	}
	componentDidMount() {


		// TODO 登录状态的判断？
		// request
		// var shixunId = this.props.match.params.shixunId;
		var stageId = this.props.match.params.stageId;

		window.__fetchAllFlag = false;
		this.fetchAll(stageId);
		this.costTimeInterval = window.setInterval(() => {
			const { game } = this.state;
			if (!game || game.status === 2) { // 已完成的任务不需要计时
				return;
			}
			if (game.cost_time || game.cost_time === 0) {
				// game.cost_time += 1;
				this.setState({
					game: update(game, { cost_time: { $set: (game.cost_time + 1) } })
				})
			}
		}, 1000)

		// 	// 页面离开时存下用户的任务耗时
		window.$(window).bind('beforeunload', () => {
			this._updateCostTime();
		})
		// window.$(window).unload( ()=>{

		// 	this._updateCostTime();

		// });
		// // 页面离开时存下用户的任务耗时
		// window.$(window).unload( ()=>{
		// 	this._updateCostTime();

		// });

	}





	// force 评测通过后，异步执行该方法，强制同步costTime到服务端
	_updateCostTime(async = false, force) {
		const { game, loading } = this.state;
		// TODO 还有一种情况，通关后cost_time计时停止，没法通过这个判断
		if (!force && (loading || !game || game.status === 2)) {
			return; // 已完成的任务不需要处理
		}
		let testPath = ''
		if (window.location.port == 3007) {
			testPath = 'http://test-newweb.educoder.net'
		}


		// var url = `${testPath}/api/v1/games/${ game.identifier }/cost_time`
		var url = `${testPath}/api/tasks/${game.identifier}/cost_time${getRandomNumber()}`
		window.$.ajax({
			type: 'get',
			url: url,
			async: async, //IMPORTANT, the call will be synchronous
			data: {
				time: game.cost_time
			}
		}).done((data) => {
			console.log('complete');
		});
	}

	onGamePassed(passed) {
		const { game } = this.state
		// 随便给个分，以免重新评测时又出现评星组件（注意：目前game.star没有显示在界面上，如果有则不能这么做）
		// game.star = 6;
		this.setState({
			game: update(game, { star: { $set: 6 } }),
			currentGamePassed: !!passed
		})
	}
	onTestSetHeaderClick(index) {
		// let { testSetsExpandedArray } = this.state;
		let testSetsExpandedArray;
		// 一次只打开一个
		if (this.state.testSetsExpandedArray[index] === false) {
			testSetsExpandedArray = testSetsExpandedArrayInitVal.slice(0);
		} else {
			testSetsExpandedArray = this.state.testSetsExpandedArray.slice(0);
		}
		testSetsExpandedArray[index] = !testSetsExpandedArray[index];
		this.setState({
			testSetsExpandedArray,
		})
	}

	onShowPrevStage() {

	}
	onShowNextStage() {
		window.__fetchAllFlag = false;
		console.log('onShowNextStage.........')
		// this.fetchAll('vznhx7mctwfq')
	}

	componentWillReceiveProps(newProps, oldProps) {
		var newStageId = newProps.match.params.stageId;
		if (!this.props || newStageId !== this.props.match.params.stageId) {
			window.__fetchAllFlag = false;
			this.fetchAll(newStageId)
		}
	}


	praisePlus() {
		const { challenge, game } = this.state;
		let praise = true;
		const url = `/tasks/${game.identifier}/plus_or_cancel_praise.json`
		// const url = `/praise_tread/praise_plus?obj_id=${challenge.id}&obj_type=Challenge&horizontal=${praise}&game_praise=true`
		axios.post(url)
			.then((response) => {

				if (response.data) {
					const { praise_count, praise } = response.data;
					// challenge.praise_count = praise_tread_count;
					// challenge.user_praise = praise;
					this.setState({
						challenge: update(challenge,
							{
								praise_count: { $set: praise_count },
								user_praise: { $set: praise },
							})
					})
				}

			})
			.catch(function (error) {
				console.log(error);
			});
	}

	onPathChange(index, callback) {
		let { challenge } = this.state;
		// challenge = Object.assign({}, challenge)
		// challenge.pathIndex = index;
		this.setState({
			challenge: update(challenge, { pathIndex: { $set: index } }),
		}, () => {
			callback && callback()
		})
		// TODO load new path content
	}

	updateChallengePath = (path) => {
		const challenge = this.state.challenge;
		if (challenge.path === path) {
			return;
		}
		const { myshixun } = this.state;
		// myshixun.system_tip = false;


		challenge.path = path;
		const newChallenge = this.handleChallengePath(challenge);
		this.setState({
			challenge: newChallenge,
			myshixun: update(myshixun, { system_tip: { $set: false } }),
		})
	}

	handleChallengePath(challenge) {
		if (challenge.path && typeof challenge.path === "string") {		// 多path的处理
			let path = challenge.path.split('；');
			_.remove(path, (item) => !item)
			if (path.length > 1) {
				challenge.path = path;
				challenge.multiPath = true;
			} else {
				challenge.path = challenge.path.replace('；', '').trim()	// 多path 改为单path 出现了  aaa.java；的情况
				challenge.multiPath = false;
			}
		}
		challenge.pathIndex = 0;
		return challenge;
	}

	newResData2OldResData(newResData) {
		newResData.latest_output = newResData.last_compile_output
		// newResData.power
		newResData.record = newResData.record_onsume_time

		// 老版用的hide_code
		newResData.hide_code = newResData.shixun.hide_code;

		newResData.image_url = newResData.user.image_url
		newResData.grade = newResData.user.grade
		newResData.user_url = newResData.user.user_url
		newResData.username = newResData.user.name

		newResData.output_sets = {}
		// newResData.output_sets.had_test_count = newResData.test_sets_count
		newResData.output_sets.test_sets = newResData.test_sets 	// JSON.stringify()
		newResData.output_sets.test_sets_count = newResData.test_sets_count
		// newResData.output_sets.had_passed_testsests_error_count = newResData.sets_error_count
		newResData.output_sets.had_passed_testsests_error_count = newResData.test_sets_count
			- newResData.sets_error_count
		//			allowed_hidden_testset
		//			sets_error_count
		//			test_sets_count
		//			test_sets
		// had_passed_testsests_error_count
		//			test_sets
		//			test_sets

		return newResData
	}
	// 将若干数据重新组织一下
	_handleResponseData(resData_arg) {
		const resData = this.newResData2OldResData(Object.assign({}, resData_arg))
		let challenge = resData.challenge;
		challenge.isHtml = false;
		challenge.isWeb = false;
		challenge.isAndroid = false;
		challenge.showLanguagePictrue = false;
		challenge.hasAnswer = resData.has_answer;

		let output_sets = resData.output_sets;
		if (resData.st === 0) {		// 代码题
			challenge = this.handleChallengePath(challenge)

			const mirror_name = (resData.mirror_name && resData.mirror_name.join)
				? resData.mirror_name.join(';') : (resData.mirror_name || '');
			if (mirror_name.indexOf('Html') !== -1) {
				challenge.isHtml = true;
				challenge.showLanguagePictrue = true;
			} else if (mirror_name.indexOf('Web') !== -1 || mirror_name.indexOf('JFinal') !== -1) {
				challenge.isWeb = true;
			} else if (mirror_name.indexOf('Android') !== -1) {
				challenge.isAndroid = true;
			}

			if (output_sets && output_sets.test_sets && typeof output_sets.test_sets == 'string') {
				const test_sets_array = JSON.parse("[" + output_sets.test_sets + "]");
				output_sets.test_sets_array = test_sets_array;
			} else {
				output_sets.test_sets_array = output_sets.test_sets
			}

		} else {		// 选择题
			// 选择题题干markdown初始化
			const $ = window.$
			window.setTimeout(() => {
				var lens = $("#choiceRepositoryView textarea").length;

				for (var i = 1; i <= lens; i++) {
					window.editormd.markdownToHTML("choose_subject_" + i, {
						htmlDecode: "style,script,iframe",  // you can filter tags decode
						taskList: true,
						tex: true,  // 数学公式
						// flowChart: true,  // 默认不解析
						// sequenceDiagram: true // 默认不解析
					});
				}
			}, 400)
		}
		challenge.user_praise = resData.user_praise;
		challenge.praise_count = resData.praise_count;
		challenge.showWebDisplayButton = false;
		resData.challenge = challenge;

		// 将一些属性写到game上
		let game = resData.game;
		game.prev_game = resData.prev_game;
		game.next_game = resData.next_game;
		if (game.status == 2) {
			// 已通关
			game.isPassThrough = true
		}
		resData.game = game;

		const { tpm_cases_modified, tpm_modified, tpm_script_modified, myshixun } = resData;
		if (myshixun.system_tip) {
			// system_tip为true的时候 不弹框提示用户更新
			resData.showUpdateDialog = false
		} else {
			let needUpdateScript = (tpm_modified || tpm_script_modified) && challenge.st === 0;
			resData.showUpdateDialog = needUpdateScript || tpm_cases_modified
		}

		/**
		email: "721773699@qq.com"
		grade: 213996
		identity: 1
		image_url: "avatars/User/1"
		login: "innov"
		name: "Coder"
		user_url: "/users/innov"
		 */
		let user = resData.user;
		user.username = resData.user.name;
		user.user_url = `/users/${resData.user.login}`;
		// user.image_url = resData.image_url;
		user.is_teacher = resData.is_teacher;
		resData.user = user;
		this._handleUserAuthor(resData)
		// TODO  测试
		// resData.power = 0;

		resData.shixun.vnc = !!resData.vnc_url
		resData.shixun.vnc_evaluate = resData.vnc_evaluate

		this.setState({
			...resData,
			currentGamePassed: false,
			loading: false,
			testSetsExpandedArray: testSetsExpandedArrayInitVal.slice(0),
		})

		window.document.title = resData.shixun.name

		window.__myshixun = resData.myshixun;		// tpi_html_show需要用到
	}
	_handleUserAuthor(resData) {
		// tpi tpm权限控制
		// const EDU_ADMIN = 1       // 超级管理员
		// const EDU_SHIXUN_MANAGER = 2 // 实训管理员
		// const EDU_SHIXUN_MEMBER = 3  // 实训成员
		// const EDU_CERTIFICATION_TEACHER = 4 // 平台认证的老师
		// const EDU_GAME_MANAGER = 5     // TPI的创建者
		// const EDU_TEACHER = 6 // 平台老师,但是未认证
		// const EDU_NORMAL = 7  // 普通用户


		/**
		    EDU_ADMIN = 1       # 超级管理员
			EDU_BUSINESS = 2    # 运营人员
			EDU_SHIXUN_MANAGER = 3 # 实训管理员
			EDU_SHIXUN_MEMBER = 4  # 实训成员
			EDU_CERTIFICATION_TEACHER = 5 # 平台认证的老师
			EDU_GAME_MANAGER = 6     # TPI的创建者
			EDU_TEACHER = 7 # 平台老师,但是未认证
			EDU_NORMAL = 8  # 普通用户
		*/

		// myshixun_manager power is_teacher
		resData.power = 0
		resData.myshixun_manager = false
		// resData.is_teacher = false

		if (resData.user.identity === EDU_ADMIN) {
			resData.power = 1
			resData.myshixun_manager = true
		} else if (resData.user.identity === EDU_BUSINESS) {
			resData.power = 1
			resData.myshixun_manager = true
		} else if (resData.user.identity === EDU_SHIXUN_MANAGER) {
			resData.power = 1
			resData.myshixun_manager = true
		} else if (resData.user.identity === EDU_SHIXUN_MEMBER) {
			resData.power = 1
			resData.myshixun_manager = true
		} else if (resData.user.identity === EDU_CERTIFICATION_TEACHER) {
			resData.power = 1
			// 已认证老师允许跳关
			resData.myshixun_manager = true
			// resData.is_teacher = true

		} else if (resData.user.identity === EDU_TEACHER) {
			// resData.is_teacher = true
		} else if (resData.user.identity === EDU_NORMAL) {

		}
		return resData
	}

	fetchAll(stageId, noTimeout) {

		if (window.__fetchAllFlag == true) {
			console.log('TPIContextProvider call fetchAll repeatly!')
			return;
		}
		// 切换关卡的时候，同步costTime
		this._updateCostTime(true);

		var url = `/tasks/${stageId}.json`
		window.__fetchAllFlag = true;
		this.setState({
			loading: true,
			currentGamePassed: false,  // 切换game时重置passed字段
		})

		axios.get(url)
			.then((response) => {
				window.__fetchAllFlag = false;

				if (response.data.status == 403) {
					window.location.href = "/403";
					return;
				}
				if (response.data.status == 404) {
					// 如果第一次发生404，则隔1s后再调用一次本接口；（因为ucloud主从同步可能有延迟）
					if (!noTimeout) {
						setTimeout(() => {
							this.fetchAll(stageId, true)
						}, 1000)
						return;
					}
					window.location.href = '/myshixuns/not_found'
					return;
				}

				this._handleResponseData(response.data)

			})
			.catch(function (error) {
				console.log(error);
			});

	}

	readGameAnswer(resData) {
		// game.final_score = resData.final_score;
		if (resData.final_score) {
			var game = this.state.game;
			this.setState({
				game: update(game, { final_score: { $set: resData.final_score } }),
				grade: resData.grade
			})
		} else {
			this.setState({
				grade: resData.grade
			})
		}

	}
	closeTaskResultLayer() {
		this.setState({
			game: (this.state.game.status == 2 ? update(this.state.game, {
				isPassThrough: { $set: true },
			}) : this.state.game),
			currentGamePassed: false
		})
	}
	onRunChooseTestFinish(response) {
		const { test_sets, challenge_chooses_count, choose_correct_num, grade, experience, gold, had_submmit, next_game } = response;
		response.had_submmit = true; // 是否已提交
		const { game } = this.state;
		let currentGamePassed = false
		if (challenge_chooses_count === choose_correct_num) {
			game.status = 2;
			// game.isPassThrough = true
			game.next_game = next_game;

			currentGamePassed = true;


			this._updateCostTime(true, true);
		}
		this.setState({
			choose_test_cases: response,
			grade: grade,

			game,
			next_game,
			currentGamePassed: currentGamePassed,
			currentPassedGameGainGold: gold,
			currentPassedGameGainExperience: experience,
		})
	}
	initDisplayInterval = () => {
		const challenge = this.state.challenge
		if (this.showWebDisplayButtonTimeout) {
			window.clearTimeout(this.showWebDisplayButtonTimeout)
		}
		this.showWebDisplayButtonTimeout = window.setTimeout(() => {
			this.setState({
				challenge: update(challenge,
					{
						showWebDisplayButton: { $set: false },
					})
			})
			this.showWebDisplayButtonTimeout = null
		}, 61 * 1000)

		let remain = 60
		if (this.displayInterval) {
			window.clearInterval(this.displayInterval)
		}
		this.displayInterval = window.setInterval(() => {
			const button = $('#showWebDisplayButton');
			if (button.length) {
				button.html(`查看效果(${remain})`)
				if (remain == 0) {
					button.html('查看效果')
				}
			}
			if (remain == 0) {
				window.clearInterval(this.displayInterval)
				this.displayInterval = null
				return;
			}

			remain -= 1;
		}, 1000)
	}
	language_display(data) {
		const { game, tomcat_url } = this.state;
		const challenge = Object.assign({}, this.state.challenge)
		if (challenge.isWeb && data.port != -1) {
			challenge.showWebDisplayButton = true;	// ActionView处是否出现查看效果按钮
			this.initDisplayInterval()

			const path = challenge.web_route || challenge.path
			const webDisplayUrl = `${tomcat_url}:${data.port}/${path}`
			challenge.webDisplayUrl = webDisplayUrl
			challenge.showLanguagePictrue = true;	// 评测通过弹出层是否出现查看效果按钮
		}
		else if (data.picture != 0) {
			/**
				{
					"type": "image",
					"orignal_picture": [],
					"user_picture": [],
					"answer_picture": []
				}
			 */
			const url = `/tasks/${game.identifier}/picture_display.json`
			axios.get(url)
				.then((response) => {
					this.showEffectDisplay(response.data)
				})

			challenge.showLanguagePictrue = true;
		}
		this.setState({
			challenge
		})
	}
	onRunCodeTestFinish(response) {
		console.log('onRunCodeTestFinish', response)
		const { test_sets, test_sets_count, test_sets_hidden_count, test_sets_public_count
			, had_test_count, had_passed_testsests_error_count, had_passed_testsests_hidden_count
			, had_passed_testsests_public_count, final_score, gold, experience, latest_output, status
			, had_done, score, tag_count, power, record, next_game, grade, picture,
			sets_error_count, last_compile_output, record_consume_time } = response;

		const { game } = this.state;
		const currentGamePassed = this.props.game !== 2 && status === 2
		// 评测通过了，立即同步costTime
		currentGamePassed && this._updateCostTime(true, true);
		const output_sets = {
			"test_sets": test_sets,
			"test_sets_array": test_sets,
			"had_test_count": had_test_count || test_sets_count,
			"test_sets_count": test_sets_count,
			// "had_passed_testsests_error_count": had_passed_testsests_error_count,
			"had_passed_testsests_error_count": test_sets_count - sets_error_count,
			"test_sets_hidden_count": test_sets_hidden_count,
			"test_sets_public_count": test_sets_public_count,
			"had_passed_testsests_hidden_count": had_passed_testsests_hidden_count,
			"had_passed_testsests_public_count": had_passed_testsests_public_count
		};
		//   检查是否编译通过
		let compileSuccess = false;
		if (test_sets && test_sets.length) {
			test_sets.some((item) => {
				if (item.compile_success) {
					compileSuccess = true;
					return true;
				}
			})
		}

		compileSuccess && this.language_display(response);
		if (currentGamePassed) {
			game.status = 2;
			// game.isPassThrough = true
			game.next_game = next_game;
		} else {
			this.showDialog({
				contentText: <div>
					<div>评测未通过</div>
					<div>详情请参见“测试结果”</div>
				</div>,
				isSingleButton: true
			})
		}


		this.setState({
			testSetsExpandedArray: testSetsExpandedArrayInitVal.slice(0), // 重置测试集展开状态
			currentGamePassed,
			currentPassedGameGainGold: gold,
			currentPassedGameGainExperience: experience,

			output_sets,
			game,
			next_game,

			latest_output: last_compile_output,
			record: record_consume_time,
			grade,
			had_done,

		})
	}
	resetTestSetsExpandedArray = () => {
		this.setState({
			testSetsExpandedArray: testSetsExpandedArrayInitVal.slice(0), // 重置测试集展开状态
		})
	}

	testSetUnlock() {
		const { game, challenge } = this.state;
		const url = `/tasks/${game.identifier}/check_test_sets.json`
		axios.get(url)
			.then((response) => {
				// TODO status -2 重复操作，直接解锁
				if (response.data.test_sets == -1) {
					console.error('testSetUnlock失败！')
					this.showSnackbar(response.data.message)
					return;
				} else {
					// 被扣除的金币，是负数
					const deltaScore = -challenge.score * 5;
					let { output_sets } = this.state;
					output_sets = Object.assign({}, output_sets);
					output_sets.test_sets_array = response.data.test_sets;
					this.setState({
						output_sets: output_sets,
						grade: this.state.grade + deltaScore,
						game: update(game, { test_sets_view: { $set: true } }),
						testSetsExpandedArray: testSetsExpandedArrayInitVal.slice(0)
					})
					this.handleGdialogClose();
				}

			})
			.catch(function (error) {
				console.log(error);
			});
	}

	handleSnackbarClose() {
		this.setState({
			snackbarOpen: false,
			snackbarVertical: '',
			snackbarHorizontal: '',
		})
	}
	// 全局的snackbar this.props.showSnackbar调用即可
	showSnackbar(text, vertical, horizontal) {
		this.setState({
			snackbarOpen: true,
			snackbarText: text,
			snackbarVertical: vertical,
			snackbarHorizontal: horizontal,
		})
	}

	showDialog(params) {
		const { contentText, callback, moreButtonsRender, okButtonText, isSingleButton } = params;

		this.dialogOkCallback = callback;
		this.moreButtonsRender = moreButtonsRender
		this.okButtonText = okButtonText;
		this.isSingleButton = isSingleButton;
		this.setState({
			gDialogOpen: true,
			gDialogContentText: contentText
		})
	}
	onGdialogOkBtnClick() {

		this.dialogOkCallback && this.dialogOkCallback();
	}
	handleGdialogClose = () => {
		this.setState({
			gDialogOpen: false
		})
	}
	render() {
		const { classes } = this.props;
		return (
			<TPIContext.Provider
				value={{
					...this.props,
					...this.state,
					resetTestSetsExpandedArray: this.resetTestSetsExpandedArray,
					onRunCodeTestFinish: this.onRunCodeTestFinish,
					onRunChooseTestFinish: this.onRunChooseTestFinish,
					testSetUnlock: this.testSetUnlock,

					onTestSetHeaderClick: this.onTestSetHeaderClick,

					readGameAnswer: this.readGameAnswer,

					onShowPrevStage: this.onShowPrevStage,
					onShowNextStage: this.onShowNextStage,

					praisePlus: this.praisePlus,
					onGamePassed: this.onGamePassed,
					closeTaskResultLayer: () => this.closeTaskResultLayer(),

					onPathChange: this.onPathChange,
					updateChallengePath: this.updateChallengePath,

					showSnackbar: this.showSnackbar,
					showDialog: this.showDialog,
					handleGdialogClose: () => this.handleGdialogClose(),

					onShowUpdateDialog: this.onShowUpdateDialog,
					updateDialogClose: this.updateDialogClose,

					match: this.props.match
				}}
			>
				<Dialog
					id="tpi-dialog"
					open={this.state.gDialogOpen}
					disableEscapeKeyDown={true}
					onClose={() => this.handleGdialogClose()}
				>
					<DialogTitle id="alert-dialog-title">{"提示"}</DialogTitle>
					<DialogContent id="dialog-content">
						<DialogContentText id="alert-dialog-description" style={{ textAlign: 'center' }}>
							{this.state.gDialogContentText}
						</DialogContentText>
					</DialogContent>
					{/* mb20 加了有样式问题 */}
					<DialogActions className={""} id="dialog-actions">
						{this.isSingleButton ? <div className="task-popup-submit clearfix"
							style={{ textAlign: 'center', 'margin-bottom': '14px' }}>
							<a className="task-btn task-btn-orange"
								onClick={this.handleGdialogClose}
							>知道啦</a>
						</div> :
							<React.Fragment>
								<Button onClick={() => this.handleGdialogClose()} color="primary"
									className={`${classes.button} ${classes.buttonGray} ${classes.borderRadiusNone}`}>
									关闭
											</Button>
								<Button variant="raised" className={`${classes.button} ${classes.borderRadiusNone}`}
									onClick={() => this.onGdialogOkBtnClick()} color="primary" autoFocus>
									{this.okButtonText ? this.okButtonText : '确定'}
								</Button>
							</React.Fragment>}
						{this.moreButtonsRender && this.moreButtonsRender()}
					</DialogActions>
				</Dialog>

				<Snackbar
					className={"rootSnackbar"}
					open={this.state.snackbarOpen}
					autoHideDuration={3000}
					anchorOrigin={{
						vertical: this.state.snackbarVertical || 'top'
						, horizontal: this.state.snackbarHorizontal || 'center'
					}}
					onClose={() => this.handleSnackbarClose()}
					transition={Fade}
					SnackbarContentProps={{
						'aria-describedby': 'message-id',
					}}
					resumeHideDuration={2000}
					message={<span id="message-id">{this.state.snackbarText}</span>}
				/>
				{this.props.children}
			</TPIContext.Provider>
		)
	}
}

export default CNotificationHOC()(withStyles(styles)(TPIContextProvider));