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 } 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).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://pre-newweb.educoder.net'
		}
		// var url = `${testPath}/api/v1/games/${ game.identifier }/cost_time`
		var url = `${testPath}/api/tasks/${ game.identifier }/cost_time`
	    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)
		}
	}


	// praise_tread/praise_plus?obj_id=569&obj_type=Challenge&horizontal=true&game_praise=true
	/*
		TODO 旧的接口在未登录时的返回值
		//获取登录页面地址
var signinPath = '/';
var htmlvalue = '<div class="task-popup" style="width:480px;"><div class="task-popup-title clearfix"><h3 class="fl color-grey3">提示</h3></div>'+
        '<div class="task-popup-content"><p class="task-popup-text-center font-16 mt10 mb10">您还没有登录，请登录后再执行此操作，谢谢！</p></div><div class="task-popup-right-sure clearfix">'+
        '<a href="javascript:void(0);" onclick="hideModal();" class="task-btn">取消</a><a href="' + signinPath + '" class="task-btn task-btn-orange ml15">登录</a></div></div>';
pop_box_new(htmlvalue, 480, 182);
	*/
	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;

	    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);

		if (!stageId) {
			// stageId = 'zl6kx8f7vfpo';
			// http://localhost:3000/myshixuns/so5w6iap97/stages/zl6kx8f7vfpo
		}

		// var url = `/api/v1/games/${stageId}`
		var url = `/tasks/${stageId}.json`
		
		// {"status":1,"message":"undefined method `authenticate!' for #<Grape::Endpoint:0xc8c91c0>"}
		window.__fetchAllFlag = true;


		this.setState({
	    	loading: true,
	    	currentGamePassed: false,  // 切换game时重置passed字段
	    })
		
		// test
		// var data = {"st":0,"discusses_count":0,"game_count":3,"record_onsume_time":0.36,"prev_game":null,"next_game":"7p9xwo2hklqv","praise_count":0,"user_praise":false,"time_limit":20,"tomcat_url":"http://47.96.157.89","is_teacher":false,"myshixun_manager":true,"game":{"id":2192828,"myshixun_id":580911,"user_id":57844,"created_at":"2019-09-03T15:50:49.000+08:00","updated_at":"2019-09-03T15:51:05.000+08:00","status":2,"final_score":0,"challenge_id":10010,"open_time":"2019-09-03T15:50:49.000+08:00","identifier":"hknvz4oaw825","answer_open":0,"end_time":"2019-09-03T15:51:04.000+08:00","retry_status":0,"resubmit_identifier":null,"test_sets_view":false,"picture_path":null,"accuracy":1.0,"modify_time":"2019-09-03T15:23:33.000+08:00","star":0,"cost_time":14,"evaluate_count":1,"answer_deduction":0},"challenge":{"id":10010,"shixun_id":3516,"subject":"1.1 列表操作","position":1,"task_pass":"[TOC]\n\n---\n\n####任务描述\n\n\n数据集a包含1-10共10个整数，请以a为输入数据，编写python程序，实现如下功能：\n①\t用2种方法输出a中所有奇数\n②\t输出大于3，小于7的偶数\n③\t用2种方法输出[1,2,3,…10,11,…20]\n④\t输出a的最大值、最小值。\n⑤\t用2种方法输出[10,9,…2,1]\n⑥\t输出[1,2,3,1,2,3,1,2,3,1,2,3]\n\n\n####相关知识\n\n\n请自行学习相关知识\n\n\n---\n开始你的任务吧，祝你成功！","score":100,"path":"1-1-stu.py","st":0,"web_route":null,"modify_time":"2019-09-03T15:23:33.000+08:00","exec_time":20,"praises_count":0},"shixun":{"id":3516,"name":"作业1——Python程序设计","user_id":77620,"gpid":null,"visits":23,"created_at":"2019-09-03T14:18:17.000+08:00","updated_at":"2019-09-03T15:58:16.000+08:00","status":0,"language":null,"authentication":false,"identifier":"6lzjig58","trainee":1,"major_id":null,"webssh":2,"homepage_show":false,"hidden":false,"fork_from":null,"can_copy":true,"modify_time":"2019-09-03T14:18:17.000+08:00","reset_time":"2019-09-03T14:18:17.000+08:00","publish_time":null,"closer_id":null,"end_time":null,"git_url":null,"vnc":null,"myshixuns_count":3,"challenges_count":3,"use_scope":0,"mirror_script_id":20,"image_text":null,"code_hidden":false,"task_pass":true,"exec_time":20,"test_set_permission":true,"sigle_training":false,"hide_code":false,"multi_webssh":false,"excute_time":null,"repo_name":"p09218567/6lzjig58","averge_star":5.0,"opening_time":null,"users_count":1,"forbid_copy":false,"pod_life":0},"myshixun":{"id":580911,"shixun_id":3516,"is_public":true,"user_id":57844,"gpid":null,"created_at":"2019-09-03T15:50:49.000+08:00","updated_at":"2019-09-03T15:59:04.000+08:00","status":0,"identifier":"k36hm4rwav","commit_id":"f25e1713882156480fc45ce0af57eff395a5037f","modify_time":"2019-09-03T14:18:17.000+08:00","reset_time":"2019-09-03T14:18:17.000+08:00","system_tip":false,"git_url":null,"onclick_time":"2019-09-03T15:50:49.000+08:00","repo_name":"p53276410/k36hm4rwav20190903155049"},"user":{"user_id":57844,"login":"p53276410","name":"文振乾","grade":24624,"identity":1,"image_url":"avatars/User/57844","school":"EduCoder团队"},"tpm_modified":true,"tpm_cases_modified":false,"mirror_name":["Python3.6"],"has_answer":false,"test_sets":[{"is_public":true,"result":true,"input":"","output":"result of a:\n[1, 3, 5, 7, 9]\n[1, 3, 5, 7, 9]\nresult of b:\n[2, 4, 6, 8, 10]\nresult of c:\n[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20]\n[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20]\nresult of d:\nThe minimum is:1\nThe maxium is:10\nresult of e:\n[10, 9, 8, 7, 6, 5, 4, 3, 2, 1]\n[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]\nresult of f:\n[10, 9, 8, 10, 9, 8, 10, 9, 8, 10, 9, 8]\n","actual_output":"result of a:\r\n[1, 3, 5, 7, 9]\r\n[1, 3, 5, 7, 9]\r\nresult of b:\r\n[2, 4, 6, 8, 10]\r\nresult of c:\r\n[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20]\r\n[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20]\r\nresult of d:\r\nThe minimum is:1\r\nThe maxium is:10\r\nresult of e:\r\n[10, 9, 8, 7, 6, 5, 4, 3, 2, 1]\r\n[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]\r\nresult of f:\r\n[10, 9, 8, 10, 9, 8, 10, 9, 8, 10, 9, 8]\r\n","compile_success":1,"ts_time":0.05,"ts_mem":8.77}],"allowed_unlock":true,"last_compile_output":"compile successfully","test_sets_count":1,"sets_error_count":0}
		// data.test_sets[0].actual_output = data.test_sets[0].actual_output.replace(/\r\n/g, '\n')
		// data.test_sets[0].output = data.test_sets[0].output.replace(/\r\n/g, '\n')
		// console.log(JSON.stringify(data))
		// data.shixun.vnc = true
		// data.vnc_url= "http://47.96.157.89:41158/vnc_lite.html?password=headless"

		// this._handleResponseData(data)
		// return 

		axios.get(url, {
				// https://stackoverflow.com/questions/48861290/the-value-of-the-access-control-allow-origin-header-in-the-response-must-not-b
    			// withCredentials: true,
    		})
		  .then((response) => {
			    // {"status":1,"message":"Unauthorized. \u7528\u6237\u8ba4\u8bc1\u5931\u8d25."}

				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) {
            // var $result = $("#php_display");
            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(challenge.isAndroid && data.picture != 0){
        // 	// https://www.educoder.net/shixuns/qrcode?game_id=218589&_=1525571882782
        //     $.ajax({
        //         url: `/shixuns/qrcode?game_id=${game.id}`,
        //         dataType: 'script'
        //     });
        //     challenge.showLanguagePictrue = true;
        // }
		else if(data.picture != 0){
        	// 对应服务端erb文件为  _picture_display.html.erb
            // $.ajax({
            //     url: "/users/picture_show?game_id="+data.picture,
            //     cache: false,
            //     dataType: 'script'
            // });

			/**
				{
					"type": "image",
					"orignal_picture": [],
					"user_picture": [],
					"answer_picture": []
				}
			 */
			const url = `/tasks/${game.identifier}/picture_display.json`
			axios.get(url)
		  		.then((response) => {
					// response.data.type qrcode_str
					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
		};
		// if (output_sets && output_sets.test_sets) {
  		// 	const test_sets_array = JSON.parse("[" + output_sets.test_sets + "]");
  		// 	output_sets.test_sets_array = test_sets_array;
  		// }
		
		//   检查是否编译通过
		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, {
    			// withCredentials: true,
    		})
		  .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;
					// output_sets
					let { output_sets } = this.state;
					output_sets = Object.assign({}, output_sets);
					// const test_sets_array = JSON.parse("[" + response.data.test_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,
		})
	}

	/* 
        TODO 写成HOC组件，更好复用
		全局的Dialog this.props.showDialog调用即可
		@param contentText  dialog显示的提示文本 
		@param callback 	确定按钮回调方法
		@param moreButtonsRender  除了“确定”、“取消”按钮外的其他按钮
		@param okButtonText  “确定”按钮显示文本，如 继续查看
	*/
	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();
		// this.setState({
		// 	gDialogOpen: true
		// })
	}
	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));