<template>
	<el-container class="content">
		<el-header style="text-align: center">
			<div @click="goTo('/index')" class="return"></div>
			<div style="margin: 0 auto">进阶级</div>
		</el-header>

		<el-main>
			<div class="main">
				<div class="top">
					<div style="color: #fff">
						当前为第<span style="color: #2c628a; margin: 0 5px">{{
							count + 1
						}}</span
						>关
					</div>
					<!-- <div class="left"></div> -->
					<div class="right">
						<div class="ts" @click="reduceTs"></div>
						<div class="howPlay" @click="dialogVisible1 = true"></div>
					</div>
				</div>
				<!-- 计算公式 -->

				<!-- <el-card shadow="always">
					{{ result }}
				</el-card> -->

				<!-- 随机数字 -->

				<el-row :gutter="20">
					<el-col :span="12" v-for="(num, index) in randomNum" :key="index">
						<div class="card-sep">
							<el-card
								v-if="index == 0"
								class="cardF"
								v-show="!num == '' || num === 0"
								:class="{
									xuanFIsClick:
										(num1 == num && nIndex == index) ||
										(num2 == num && nIndex2 == index),
								}"
								shadow="always"
								@click.native="getVal(num, index)"
							>
								{{ num }}
							</el-card>
							<el-card
								v-else-if="index == 1"
								class="cardS"
								v-show="!num == '' || num === 0"
								:class="{
									xuanSIsClick:
										(num1 == num && nIndex == index) ||
										(num2 == num && nIndex2 == index),
								}"
								shadow="always"
								@click.native="getVal(num, index)"
							>
								{{ num }}
							</el-card>
							<el-card
								v-else-if="index == 2"
								class="cardT"
								v-show="!num == '' || num === 0"
								:class="{
									xuanTIsClick:
										(num1 == num && nIndex == index) ||
										(num2 == num && nIndex2 == index),
								}"
								shadow="always"
								@click.native="getVal(num, index)"
							>
								{{ num }}
							</el-card>
							<el-card
								v-else
								class="cardFour"
								v-show="!num == '' || num === 0"
								:class="{
									xuanFourIsClick:
										(num1 == num && nIndex == index) ||
										(num2 == num && nIndex2 == index),
								}"
								shadow="always"
								@click.native="getVal(num, index)"
							>
								{{ num }}
							</el-card>
						</div>
					</el-col>

					<!-- <el-col :span="12">
						    <el-card shadow="hover">
						      3
						    </el-card>
						  </el-col>
						</el-row>
						<el-row :gutter="20">
						  <el-col :span="12">
						    <el-card shadow="always">
						      8
						    </el-card>
						  </el-col>
						  <el-col :span="12">
						    <el-card shadow="hover">
						      9
						    </el-card>
						  </el-col> -->
				</el-row>

				<!-- 运算符选择 -->
				<div class="operator">
					<div
						class="add"
						:class="{ addIsClick: calc == '+' }"
						@click="add"
					></div>

					<div
						class="inc"
						:class="{ reduceIsClick: calc == '-' }"
						@click="inc"
					></div>
				</div>
				<!-- <el-row class="h-sep">
					<el-col :span="4"> -->
				<!-- <el-button type="primary" plain icon="el-icon-plus" @click="add"
							>加</el-button
						> -->
				<!-- <div class="add" @click="add"></div>
					</el-col> -->

				<!-- <el-col :span="4"> -->
				<!-- <el-button type="primary" plain icon="el-icon-minus" @click="inc"
							>减</el-button
						> -->
				<!-- <div class="inc" @click="inc"></div>
					</el-col> -->

				<!-- <el-col :span="4">
						<el-button type="primary" plain icon="el-icon-close" @click="mul"
							>乘</el-button
						>
					</el-col>

					<el-col :span="4">
						<el-button type="primary" plain icon="" @click="div"
							>/&nbsp;&nbsp;除</el-button
						>
					</el-col>

					<el-col :span="4">
						<el-button
							type="primary"
							plain
							icon="el-icon-arrow-left"
							@click="left"
							>括</el-button
						>
					</el-col>

					<el-col :span="4">
						<el-button
							type="primary"
							plain
							icon="el-icon-arrow-right"
							@click="right"
							>号</el-button
						>
					</el-col> -->
				<!-- </el-row> -->

				<!-- <el-row :gutter="20" class="footBtn">
					<el-col :span="4">
						<el-button
							type="primary"
							plain
							icon="el-icon-success"
							@click="confirm"
							>确定</el-button
						>
					</el-col>
					<el-col :span="4">
						<el-button
							type="primary"
							plain
							icon="el-icon-refresh-right"
							@click="clean"
							>清除</el-button
						>
					</el-col>
					<el-col :span="4">
						<el-button
							type="primary"
							plain
							icon="el-icon-refresh"
							@click="resert"
							>换题</el-button
						>
					</el-col>
				</el-row> -->
				<div class="bottom">
					<div class="bottomT">
						<div class="answer" @click="reduceTs"></div>
						<div class="clean" @click="clean"></div>
					</div>
					<div class="next" @click="confirm"></div>
				</div>
			</div>
		</el-main>
		<!-- <div
			id="cas"
			style="
				position: absolute;
				width: 200px;
				height: 200px;
				left: 200px;
				z-index: 99999;
			"
		></div> -->
		<el-dialog
			title="提示"
			:visible.sync="dialogVisible"
			:append-to-body="true"
			width="80%"
			:before-close="handleClose"
			class="dialog_diy"
		>
			<div class="tsAnswer">进阶级不提供提示</div>
			<dir class="haveCount">今天还剩0次提示喔</dir>
			<!-- <div class="tsAnswer">{{ rightAnswer }}</div> -->
			<!-- <dir class="haveCount">今天还剩{{ ts }}次提示喔</dir> -->
		</el-dialog>
		<el-dialog
			title="进阶级玩法介绍"
			:visible.sync="dialogVisible1"
			:append-to-body="true"
			width="80%"
			:before-close="handleClose"
			class="dialog_diy1"
		>
			<div style="font-size: 0.9rem;">24 点是把 4 个整数(一般是正整数)通过加减乘除运算,使最后的计算结果是 24 的一个数学游戏,可以考验人的智力和数学敏感性。任意抽取4个数字,用加、减、乘、除(可加括号)把牌面上的数算成 24。</div>
			<div style="font-size: 0.9rem;">进阶级不提供提示</div>
		</el-dialog>
		<el-dialog
			title="提示"
			:visible.sync="dialogVisible2"
			:append-to-body="true"
			width="80%"
			:before-close="handleClose"
			class="dialog_diy1"
		>
			<div style="margin-bottom: 15px">您已成功算成24点，恭喜你！</div>
			<div
				style="
					width: 90px;
					height: 25px;
					border: 1px solid #75a8da;
					text-align: center;
					margin: 0 auto;
					background: #75a8da;
					color: #fff;
					line-height: 25px;
				"
				@click="dialogVisible2 = false"
			>
				确定
			</div>
		</el-dialog>
		<el-dialog
			title="提示"
			:visible.sync="dialogVisible3"
			:append-to-body="true"
			width="80%"
			:before-close="handleClose"
			class="dialog_diy1"
		>
			<div style="margin-bottom: 15px">计算错误！</div>
			<div
				style="
					width: 90px;
					height: 25px;
					border: 1px solid #75a8da;
					text-align: center;
					margin: 0 auto;
					background: #75a8da;
					color: #fff;
					line-height: 25px;
				"
				@click="dialogVisible3 = false"
			>
				确定
			</div>
		</el-dialog>
		<audio ref="source">
			<source src="../../assets/twentyFour/clickM.mp3" type="audio/mpeg" />
		</audio>
        <audio ref="vm">
			<source src="../../assets/twentyFour/vM.mp3" type="audio/mpeg" />
		</audio>
		<audio ref="errs">
			<source src="../../assets/twentyFour/err.mp3" type="audio/mpeg" />
		</audio>
	</el-container>
</template>

<script>
	export default {
		data() {
			return {
				randomNum: ["", "", "", ""],
				result: "",
				tempResult: "",
				flag0: false,
				flag1: false,
				flag2: false,
				flag3: false,
				calc: "",
				num1: "",
				nIndex: "",
				nIndex2: "",
				num2: "",
				saveRandomNum: ["", "", "", ""],
				count: 0,
				rightAnswer: "",
				dialogVisible: false,
				dialogVisible1: false,
				dialogVisible2: false,
				dialogVisible3: false,
				ts: 3,
				tiMu: [],
				nowGq: 0,
			};
		},

		mounted() {
			this.getRandomNum();
		},
		watch: {},

		methods: {
			cards(randomNum) {
				var array = randomNum;
				var args = [];
				if (array.length == 4) {
					for (var i = 0; i < 4; i++) {
						var j = parseInt(array[i]);
						if (isNaN(j)) {
							return;
						}
						args[i] = j;
					}
					var ret = this.find(args, 24);
					var a = args.sort().toString();
					if (ret.length == 0) {
						this.getRandomNum();
					} else {
						if (this.tiMu.length > 0) {
							for (var i = 0; i < this.tiMu.length; i++) {
								if (this.tiMu[i] == a) {
									this.getRandomNum();
								}
							}
							this.rightAnswer = ret + "=24";
						} else {
							this.rightAnswer = ret + "=24";
						}
					}
				} else {
					console.log("len: " + array.length);
				}
			},

			handleClose(done) {
				done();
			},

			goTo(path) {
				this.$router.push(path);
			},

			reduceTs() {
				this.dialogVisible = true;
				if (this.nowGq > 0) {
					return;
				}
				this.ts -= 1;
				this.nowGq++;
				if (this.ts == -1) {
					this.rightAnswer = "今日提示已达上限";
					this.ts = 0;
				}
			},

			find3(a, b, target) {
				if (a + b === target) {
					return a + "+" + b;
				} else if (a - b == target) {
					return a + "-" + b;
				} else if (b - a == target) {
					return b + "-" + a;
				}
				return "";
			},
			remove(array, index) {
				var out = [];
				var j = 0;
				for (var i = 0; i < array.length; i++) {
					if (i == index) {
						continue;
					}
					out[j] = array[i];
					j++;
				}
				return out;
			},
			find(array, target) {
				// js 中必须用var声明，限制作用域。
				var out = "";
				var ret = "";
				var i = 0;
				var left;

				if (array.length == 2) {
					out = this.find3(array[0], array[1], target);
					if (out.length > 0) {
						return "(" + out + ")";
					}
					return "";
				}

				var x;
				for (i = 0; i < array.length; i++) {
					x = array[i];
					left = this.remove(array, i);

					// if (target != 0 && (target % x == 0 || x % target == 0)) {
					// 	if (target > x) {
					// 		ret = find(left, target / x);
					// 		if (ret.length > 0) {
					// 			out = x + "*" + ret;
					// 			break;
					// 		}
					// 	} else {
					// 		ret = find(left, x / target);
					// 		if (ret.length > 0) {
					// 			out = x + "/" + ret;
					// 			break;
					// 		}
					// 	}
					// }

					if (target > x) {
						ret = this.find(left, target - x);
						if (ret.length > 0) {
							out = x + "+" + ret;
							break;
						}
					} else {
						ret = this.find(left, x - target);
						if (ret.length > 0) {
							out = x + "-" + ret;
							break;
						}
					}

					// ret = this.find(left, x * target);
					// if (ret.length > 0) {
					// 	out = ret + "/" + x;
					// 	break;
					// }
					ret = this.find(left, target + x);
					if (ret.length > 0) {
						out = ret + "-" + x;
						break;
					}
				}

				if (out.length > 0) {
					if (array.length == 4) {
						return out;
					} else {
						return "(" + out + ")";
					}
				}
				return "";
			},
			getRandomNum() {
				this.randomNum = [];

				for (var i = 0; i < 4; i++) {
					// 生成1-9的随机数

					this.randomNum.push(Math.floor(Math.random(9) * 25 + 1));
				}
				this.saveRandomNum = [...this.randomNum];
				this.cards(this.randomNum);
			},
			// isTrue(){

			// },
			getVal(num, index) {
				var num = parseInt(num);
				var b = 0;
				let a = 0;
				this.$refs.source.play();
				if (this.num1 && this.calc) {
					this.num2 = num;
				} else {
					this.num1 = num;
				}

				if (this.nIndex === index) {
					this.nIndex = "";
					this.num1 = "";
				} else if (this.nIndex === "") {
					this.nIndex = index;
				} else if (this.nIndex !== "" && this.calc) {
					this.nIndex2 = index;
				} else {
					this.nIndex = index;
				}
				if (
					(this.nIndex || this.nIndex === 0) &&
					(this.nIndex2 || this.nIndex2 === 0) &&
					this.calc
				) {
					// this.result += num;
					if (this.calc === "+") {
						this.result = this.num1 + this.num2;
						this.randomNum[this.nIndex] = "";
						this.randomNum[this.nIndex2] = this.result;
						if (this.result == "24") {
							for (var i = 0; i < this.randomNum.length; i++) {
								if (this.randomNum[i] != "") {
									b++;
								}else{
									a++
								}
							}
							if (b == 1) {
								this.dialogVisible2 = true;
								this.$refs.vm.play();
							}else if(a == this.randomNum.length-1){
								this.dialogVisible3 = true;
								this.$refs.errs.play();
							}
						}else{
							for (var i = 0; i < this.randomNum.length; i++) {
								if (this.randomNum[i] == "") {
									a++;
								}
							}
							if(a == this.randomNum.length-1){
								this.dialogVisible3 = true;
								this.$refs.errs.play();
							}
						}
						this.resertFlag();
					} else if (this.calc === "-") {
						this.result = this.num1 - this.num2;
						this.randomNum[this.nIndex] = "";
						this.randomNum[this.nIndex2] = this.result;
						if (this.result == "24") {
							for (var i = 0; i < this.randomNum.length; i++) {
								if (this.randomNum[i] != "") {
									b++;
								}else{
									a++
								}
							}
							if (b == 1) {
								this.dialogVisible2 = true;
								this.$refs.vm.play();
							}else if(a == this.randomNum.length-1){
								this.dialogVisible3 = true;
								this.$refs.errs.play();
							}
						}else{
							for (var i = 0; i < this.randomNum.length; i++) {
								if (this.randomNum[i] == "") {
									a++;
								}
							}
							if(a == this.randomNum.length-1){
								this.dialogVisible3 = true;
								this.$refs.errs.play();
							}
						}
						this.resertFlag();
					}
				}
				// this.randomNum[0] = num;
			},

			// 重置flag标识

			resertFlag() {
				this.nIndex = "";
				this.nIndex2 = "";
				this.calc = "";
				this.num2 = "";
				this.num1 = "";
			},

			add() {
				this.$refs.source.play();
				if (this.calc == "+") {
					this.calc = "";
				} else {
					this.result += "+";
					this.calc = "+";
				}
			},

			inc() {
				this.$refs.source.play();
				if (this.calc == "-") {
					this.calc = "";
				} else {
					this.result += "-";
					this.calc = "-";
				}
			},

			// mul() {
			// 	this.result += "*";
			// },

			// div() {
			// 	this.result += "/";
			// },

			// left() {
			// 	this.result += "(";
			// },

			// right() {
			// 	this.result += ")";
			// },

			clean() {
				this.result = "";
				this.randomNum = [...this.saveRandomNum];
				this.resertFlag();
			},

			confirm() {
				// 计算结果：直接将字符串转成js语句执行, 也可以用队列来实现
				var count = 0;
				for (var i = 0; i < this.randomNum.length; i++) {
					if (this.randomNum[i] == "") {
						count++;
					}
				}
				this.tempResult = eval(this.result);
				if (count == 3) {
					if (this.tempResult === 24) {
						this.$message.success("计算正确！");
						this.tiMu.push([...this.saveRandomNum].sort().toString());

						// this.$message({

						//   showClose: true,

						//   message: '正确',

						//   type: 'success'

						// });
						this.nowGq = 0;
						this.result = "";
						this.count += 1;
						if (this.count == 4) {
							this.$message.success("恭喜你通关成功");
							this.$router.push("/index");
						} else {
							this.getRandomNum();
						}
					} else {
						this.$message.error("计算错误！");

						this.result = "";

						this.resertFlag();
					}
				} else {
					this.$message.error("每个数字都要用到！");
				}
			},

			resert() {
				//刷新题目
				this.getRandomNum();

				this.resertFlag();

				this.result = "";
			},
		},
		created() {
			this.getRandomNum();
		},
	};
</script>



<style scoped>
	html,
	body,
	#app {
		text-align: center;
		height: 100%;
		margin: 0;
		padding: 0;
	}

	.el-header {
		height: 40px !important;
		background: #f4f4f4;
		text-align: center;
		display: flex;
		flex-direction: row;
		align-items: center;
		position: relative;
	}

	.el-container {
		height: 100%;
	}

	.el-row {
		margin-top: 2.5rem;
		height: 260px;
	}

	.el-col-12 {
		height: 130px;
	}

	.el-card__body {
		height: 3.75rem;
		font-size: xx-large;
		line-height: 3.75rem;
	}

	.footBtn {
		margin-left: 0 !important;
	}

	.card-sep {
		margin-bottom: 0.5rem;
	}

	.cardF {
		background-image: url("../../assets/twentyFour/xuanF.png");
		height: 120px;
		opacity: 0.4;
	}
	.cardS {
		background-image: url("../../assets/twentyFour/xuanS.png");
		height: 120px;
		opacity: 0.4;
	}
	.cardT {
		background-image: url("../../assets/twentyFour/xuanT.png");
		height: 120px;
		opacity: 0.4;
	}
	.cardFour {
		background-image: url("../../assets/twentyFour/xuanFour.png");
		height: 120px;
		opacity: 0.4;
	}

	.h-sep {
		margin-top: 1.375rem;
	}

	.top {
		height: 35px;
		width: 100%;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}

	.content,
	.left,
	.ts,
	.howPlay,
	.cardF,
	.cardS,
	.cardT,
	.cardFour,
	.add,
	.inc,
	.answer,
	.clean,
	.next,
	.xuanFIsClick,
	.xuanSIsClick,
	.xuanTIsClick,
	.xuanFourIsClick,
	.addIsClick,
	.reduceIsClick {
		background-size: 100% 100%;
		background-repeat: no-repeat;
	}
	.content {
		background-image: url("../../assets/twentyFour/gameBg.png");
		position: relative;
	}
	.content >>> .el-main {
		padding: 60px 20px 20px 20px !important;
	}

	.left {
		background-image: url("../../assets/twentyFour/now.png");
		width: 40%;
		height: 20px;
	}
	.right {
		width: 60%;
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
		height: 35px;
	}
	.ts {
		background-image: url("../../assets/twentyFour/ts.png");
		width: 35px;
	}
	.howPlay {
		background-image: url("../../assets/twentyFour/howPlay.png");
		width: 35px;
		margin-left: 5px;
	}

	.card-sep >>> .is-always-shadow {
		box-shadow: none !important;
	}
	.card-sep >>> .el-card {
		border: none !important;
		background-color: transparent !important;
	}
	.card-sep >>> .el-card__body {
		color: #fff;
		text-align: center;
		height: 120px;
		line-height: 120px;
		font-size: 60px;
		padding: 0 !important;
	}

	.add {
		background-image: url("../../assets/twentyFour/add.png");
		height: 60px;
		width: 60px;
	}
	.inc {
		background-image: url("../../assets/twentyFour/reduce.png");
		height: 60px;
		width: 60px;
	}
	.operator {
		display: flex;
		flex-direction: row;
		justify-content: space-evenly;
		align-items: center;
		margin-top: 35px;
	}
	.bottom {
		display: flex;
		flex-direction: column;
		flex-wrap: nowrap;
		margin-top: 25px;
	}
	.bottomT {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
	}
	.answer {
		background-image: url("../../assets/twentyFour/answer.png");
		height: 45px;
		width: 50%;
	}
	.clean {
		background-image: url("../../assets/twentyFour/clean.png");
		height: 45px;
		width: 50%;
	}
	.next {
		background-image: url("../../assets/twentyFour/next.png");
		height: 50px;
		width: 100%;
		margin-top: 10px;
	}
	.xuanFIsClick {
		background-image: url("../../assets/twentyFour/xuanFIsClick.png") !important;
		opacity: 1;
	}
	.xuanSIsClick {
		background-image: url("../../assets/twentyFour/xuanSIsClick.png") !important;
		opacity: 1;
	}
	.xuanTIsClick {
		background-image: url("../../assets/twentyFour/xuanTIsClick.png") !important;
		opacity: 1;
	}
	.xuanFourIsClick {
		background-image: url("../../assets/twentyFour/xuanFourIsClick.png") !important;
		opacity: 1;
	}
	.addIsClick {
		background-image: url("../../assets/twentyFour/addIsClick.png") !important;
		opacity: 1;
	}
	.reduceIsClick {
		background-image: url("../../assets/twentyFour/reduceIsClick.png") !important;
		opacity: 1;
	}
	.dialog_diy >>> .el-dialog__header {
		background: #fa7258;
		text-align: center;
		padding: 10px 0 !important;
	}
	.dialog_diy1 >>> .el-dialog__header {
		background: #f6c14a;
		text-align: center;
		padding: 10px 0 !important;
	}
	.dialog_diy1 >>> .el-dialog__body {
		padding: 20px;
	}
	.dialog_diy1 >>> .el-dialog__title {
		color: #fff !important;
	}
	.dialog_diy >>> .el-dialog__title {
		color: #fff !important;
	}
	.tsAnswer {
		color: #fa7258;
		font-size: 20px;
		text-align: center;
	}
	.haveCount {
		text-align: center;
		padding: 0;
		margin-top: 20px;
		font-size: 11px;
		color: #cbcbcb;
		font-family: FZShuTi;
	}
	.dialog_diy >>> .el-dialog__headerbtn {
		background: url("../../assets/twentyFour/close.png");
		background-repeat: no-repeat;
		background-size: 100% 100%;
		top: 13px !important;
		right: 13px !important;
	}
	.dialog_diy1 >>> .el-dialog__headerbtn {
		background: url("../../assets/twentyFour/close.png");
		background-repeat: no-repeat;
		background-size: 100% 100%;
		top: 13px !important;
		right: 13px !important;
	}
	.dialog_diy >>> .el-dialog__close,
	.dialog_diy1 >>> .el-dialog__close {
		color: transparent !important;
	}

	.return {
		background: url("../../assets/twentyFour/fanhui.png");
		background-repeat: no-repeat;
		background-size: 100% 100%;
		width: 25px;
		height: 25px;
		position: absolute;
	}
</style>
