import React, { Component } from 'react';
import './gamePage.less';
import { minusProbability, plusProbability } from './gameData';
import modalStore from '@src/store/modal';
import store from '@src/store';
import { second2Date } from '@src/utils/utils';
import { SvgaPlayer } from '@spark/svgaplayer';
import { RES_PATH } from '../../../sparkrc';

class GamePage extends Component {

  min = 1;

  max = 99;

  plusNum = 0;

  firstInFlag = true;


  state = {
    addition: 'plus',
    symbolInfo1: {
      number: 0,
      fen1: 2,
      fen2: 1,
      symbolName: '',
      symbolText: ''
    },
    symbolInfo2: {
      number: 0,
      fen1: 2,
      fen2: 1,
      symbolName: '',
      symbolText: ''
    },
    selectIndex: 0,
    currentNum: 1,
    numElements: [{
      top: '3.71rem'
    }],
    seconds: '00:00',
    showCountSvga: false,
    bloodNum: 5
    // fen1: 1,
    // fen2: 1,
    // fen3: 1,
    // fen4: 1,
    // number1: 0,
    // number2: 0
  }

  componentDidMount() {

    this.createAddition();
    if (store.startInfo?.guide) {
      modalStore.pushPop("GuideModal", { handleStartSvga: this.handleStartSvga })
    } else {
      // this.doCount();
      this.handleStartSvga(true)
    }
  }

  handleStartSvga = (status) => {

    this.setState({
      showCountSvga: status
    }, () => {
      !status && this.doCount()
    })

  }

  countdownSeconds = (store.startInfo?.countdownSeconds || 60) * 1000;

  gameTimer = null;
  gameOver = false;
  doCount = () => {
    const timeObj = second2Date(this.countdownSeconds);
    // 倒计时结束提交

    this.gameTimer = setTimeout(() => {

      if (this.countdownSeconds <= 0) {
        store.submitScore(this.currentNumber);
        this.gameOver = true;
        this.setState({
          seconds: '00:00'
        })
        clearTimeout(this.gameTimer);
        this.gameTimer = null;
        return;
      }
      this.countdownSeconds -= 1000;

      this.setState({
        seconds: `${timeObj.minute}:${timeObj.second}`
      })

      this.doCount();


    }, 1000);

  }
  newNumber1 = 0;
  newNumber2 = 0;
  // 生成加减
  createAddition = () => {

    this.leftSymbol = ''
    // 随机生成加减
    let addition = this.plusNum > 10 ? (Math.random() > 0.8 ? 'minus' : 'plus') : 'plus';
    if (this.firstInFlag) {
      this.firstInFlag = false;
      addition = 'plus';
    }

    if (this.currentNumber == 0 || this.currentNumber < 100) {
      addition = 'plus';
    }

    // if (this.divNum >= 12) {
    //   addition = 'minus';
    // }

    if (this.currentNumber > 60000) {
      addition = 'minus';
    }

    if (addition == 'plus') {
      this.plusNum += 1;
    }

    this.currentOpt = addition;
    let symbolInfo1 = this.createSymbol(addition, -1);
    this.leftSymbol = symbolInfo1.symbolName;
    this.leftInfo = symbolInfo1
    this.leftNumber = this.calcNum(this.leftSymbol, -1)

    let symbolInfo2 = this.createSymbol(addition, 1);
    this.rightInfo = symbolInfo2

    this.setState({
      addition,
      symbolInfo1,
      symbolInfo2,
      number1: symbolInfo1?.number,
      number2: symbolInfo2?.number,
      fen1: symbolInfo1?.fen1,
      fen2: symbolInfo1?.fen2,
      fen3: symbolInfo2?.fen1,
      fen4: symbolInfo2?.fen2
    })

  }

  leftInfo = {}
  rightInfo = {}
  leftNumber = 0
  leftSymbol = ''
  // 生成计算字符
  createSymbol = (addition, pos) => {

    let probabilityList = addition == 'plus' ? plusProbability : minusProbability;

    if (this.currentNumber < 1000) {
      probabilityList = probabilityList.filter(item => item.name != 'division')
    }

    if(this.currentNumber > 100) {
      probabilityList = probabilityList.filter(item => item.name != 'multiplyZheng')
    }

    // if (this.currentNumber < 600) {
    //   probabilityList = probabilityList.filter(item => (item.name != 'minus' && item.name != 'minusDouble'))
    // }
    let newNum1 = 0
    if (pos == 1) {
      probabilityList = probabilityList.filter(item => item.name != this.leftSymbol)
      // if (this.leftSymbol == 'division') {
      //   probabilityList = probabilityList.filter(item => item.name != 'multiplyFen')
      // }

      // if (this.leftSymbol == 'multiplyFen') {
      //   probabilityList = probabilityList.filter(item => item.name != 'division')
      // }
      newNum1 = this.calcNum(this.leftSymbol, -1);
      console.error(this.leftNumber)
      if(this.currentOpt == 'plus' && Math.abs(newNum1 - this.currentNumber * 2) > 10) {
        probabilityList = probabilityList.filter(item => item.name != 'multiplyZheng')
      }

      if(this.currentOpt == 'plus' && Math.abs(Math.ceil(this.currentNumber * 1.14 - newNum1)) > 10) {
        probabilityList = probabilityList.filter(item => item.name != 'multiplyFen')
      }

      if(this.currentOpt == 'minus' && Math.abs(Math.ceil(this.currentNumber * 0.5 - newNum1)) > 10) {
        probabilityList = probabilityList.filter(item => item.name != 'multiplyFen')
      }

      // if(this.currentOpt == 'plus' && (newNum1 - this.currentNumber - 10) > this.currentNumber * 2) {
      //   probabilityList = probabilityList.filter(item => item.name != 'percent')
      // }

      // if(this.currentOpt == 'minus' && (this.currentNumber - newNum1 + 10) < Math.ceil(this.currentNumber * 0.01)) {
      //   probabilityList = probabilityList.filter(item => item.name != 'percent')
      // }

      if(Math.abs(newNum1 - this.currentNumber / 2) > 10) {
        probabilityList = probabilityList.filter(item => item.name != 'division')
      }

    }

    if(this.currentNumber < 100) {
      probabilityList = probabilityList.filter(item => item.name== 'plus' || item.name == 'doublePlus')
    }


    // console.error("看看可选的列表", probabilityList, addition, this.leftSymbol, pos == 1 ? '右' : '左');

    let probability = Math.random();

    let symbolText = probabilityList[0].symbolText;
    let symbolName = probabilityList[0].name;

    for (let i = 0; i < probabilityList.length; i++) {
      const radioItem = probabilityList[i]?.radio;
      probability -= radioItem;
      if (probability <= 0) {
        symbolText = probabilityList[i].symbolText;
        symbolName = probabilityList[i].name;
        break;
      }
    }


    // 测试某一种符号
    // if(pos == -1) {
    //  return this.createNum({symbolName: 'percent', symbolText: '%'}, pos);
    // } else {
    //   return this.createNum({symbolName: 'multiplyFen', symbolText: 'x'}, pos);
    // }

    return this.createNum({ symbolName, symbolText }, pos);



  }

  // 在最大和最小值之间选择一个数字
  createSpecialNum = (min, max) => {
    return Math.floor(Math.random() * (max - min + 1) + min);
  }

  // 生成任意的数字
  createNum = (symbolInfo, pos) => {
    // 这里分几种类型生成 都需要有范围限制
    const { currentNum, addition } = this.state;

    const symbolName = symbolInfo?.symbolName;
    const symbolText = symbolInfo?.symbolText;
    // const operate = this.currentOpt == 'plus' ? 1 : -1;

    // 算比前一个数大还是小
    const randomIndex = Math.random > 0.5 ? -1 : 1

    const newNum1 = this.leftNumber;
    // console.error("newNum1", this.leftSymbol, newNum1)

    // console.error("left", newNum1)

    let number = 1;

    let fen1 = 2;
    let fen2 = 1;
    switch (symbolName) {
      case 'plus':
        let p1 = 1;
        if(pos == 1) {
          const maxDiff = 10;
          const minDiff = -Math.min(10, newNum1 - this.currentNumber);
          let targetDiff = this.createSpecialNum(minDiff, maxDiff);
          // const newNum1 = this.calcNum(this.leftSymbol, -1);
          // console.error("target", targetDiff, newNum1)
          if (targetDiff === 0) {
            targetDiff = 1;
          }
          const targetResult = newNum1 + targetDiff;
          number = targetResult - this.currentNumber;
          // 确保 number 为正数且计算结果不等于 newNum1
          // number = Math.max(1, targetResult - this.currentNumber);
          // 如果计算结果等于 newNum1，调整 number
          // if (this.currentNumber + number === newNum1) {
          //   number = number + 1;
          // }
          // const plusMin = Math.min(10, newNum1 - this.currentNumber);
          // let plusCha = this.createSpecialNum(this.min, plusMin)
          // const newPlus = newNum1 + targetDiff * randomIndex;
          // number = newPlus - this.currentNumber < 0
          if (this.currentNumber + number === newNum1) {
            number = number + 1;
          }

          if(number == 0) number = 1
        } else {
          if(this.currentNumber <= 20) {
            p1 = this.createSpecialNum(1, 50)
          } else {
            p1 = this.createSpecialNum(51, 99)
          }
          // else if(this.currentNumber > 20 && this.currentNumber <= 50) {
          //   p1 = this.createSpecialNum(21, 50)
          // } 
          number = p1
        }
        break;
      case 'doublePlus':
        let dP1 = 1;
        if (pos == 1) {
          const minDiff = -Math.min(10, newNum1); // 最小差值不能让结果小于0
          const maxDiff = 10;
          let targetDiff = this.createSpecialNum(minDiff, maxDiff);
          // console.error("target", targetDiff, newNum1)
          if (targetDiff === 0) {
            targetDiff = Math.random() > 0.5 ? 1 : -1;
          }
          const targetResult = newNum1 + targetDiff;
          // 计算 number，确保结果为正数且与 newNum1 不相等
          number = Math.max(1, Math.ceil((targetResult - this.currentNumber) / 2));
          // 如果计算结果等于 newNum1，调整 number
          if (this.currentNumber + number * 2 === newNum1) {
            number = number + 1;
          }
          if(number == 0) number = 1
        } else {
          if(this.currentNumber <= 20) {
            dP1 = this.createSpecialNum(1, 25)
          } else {
            dP1 = this.createSpecialNum(26, 49)
          }
          // else if(this.currentNumber > 20 && this.currentNumber <= 50) {
          //   dP1 = this.createSpecialNum(11, 25)
          // } 
          
          number = dP1;
        }
        break;
      case 'minus':
       
        const changeNum = this.createSpecialNum(this.min, Math.min(50, this.currentNumber));
        if (pos == 1) {
          // const mMin = Math.min(10, this.currentNumber - newNum1) 
          // let m1 = this.createSpecialNum(1, mMin)
          // const maxDiff = Math.min(10, this.currentNumber - newNum1);
          // const minDiff = -Math.min(10, newNum1);
          // const targetDiff = this.createSpecialNum(minDiff, maxDiff);
          // number = this.currentNumber - newNum1 - targetDiff * randomIndex 
          const maxDiff = Math.min(10, this.currentNumber - newNum1);
          const minDiff = -Math.min(10, newNum1);
          let targetDiff = this.createSpecialNum(minDiff, maxDiff);
          if (targetDiff === 0) {
            targetDiff = Math.random() > 0.5 ? 1 : -1;
          }
          const targetResult = newNum1 + targetDiff;
          // 确保 number 为正数
          number = Math.max(1, this.currentNumber - targetResult);
        } else {

          number = changeNum;
        }
        break;
      case 'multiplyZheng':
        number = 2
        // const changeNum1 = this.createSpecialNum(this.min, 10);
        // if (pos == 1) {
        //   number = Math.ceil((changeNum1 + newNum1) / this.currentNumber)
        // } else {
        //   number = 2;
        // }
        break;
      case 'multiplyFen':
        if (pos == -1) {
          if (this.currentOpt == 'plus') {
            fen1 = this.createSpecialNum(2, 7);
            if (fen1 == 7) {
              fen2 = 8
            } else {
              fen2 = fen1 + 1
            }
          } else {
            fen1 = this.createSpecialNum(2, 9);
            fen2 = this.createSpecialNum(1, Math.max(1, fen1 - 1));
          }
          // console.error("fen1", fen1, "fen2", fen2)
          number = Math.round(fen2 / fen1);
        } else {
          if (this.currentOpt == 'plus') {
            // const plusNum = this.createSpecialNum(this.min, 10);
            const maxDiff = Math.min(10, this.currentNumber - newNum1);
            const minDiff = -Math.min(10, newNum1);
            let targetDiff = this.createSpecialNum(minDiff, maxDiff);
            if (targetDiff === 0) {
              targetDiff = Math.random() > 0.5 ? 1 : -1;
            }
            const newPlusNum = newNum1 + targetDiff;
            let found1 = false
            for (let f1 = 2; f1 <= 8; f1++) {
              for (let f2 = 3; f2 <= 9; f2++) {
                const newNum1 = Math.floor(this.currentNumber * f2 / f1);
                if (newPlusNum === newNum1) {
                  fen1 = f1;
                  fen2 = f2;
                  found1 = true;
                  break;
                }
              }
              if (found1) break;
            }

            if(!found1) {
              fen2 = 9;
              fen1 = 8;
            }
          } else {
            const maxDiff = Math.min(10, this.currentNumber - newNum1);
            const minDiff = -Math.min(10, newNum1);
            let targetDiff = this.createSpecialNum(minDiff, maxDiff);
            if (targetDiff === 0) {
              targetDiff = Math.random() > 0.5 ? 1 : -1;
            }
            const newPlusNum = newNum1 + targetDiff;
            // const minusNum = this.createSpecialNum(this.min, Math.min(newNum1, 10));
            // const newMinusNum = newNum1 - minusNum;
            let found2 = false
            for (let f1 = 2; f1 <= 9; f1++) {
              for (let f2 = 1; f2 < f1; f2++) {
                const temNum = Math.floor(this.currentNumber * f2 / f1);
                if (temNum === newPlusNum) {
                  fen1 = f1;
                  fen2 = f2;
                  found2 = true;
                  break;
                }
              }
              if (found2) break;
            }

            if(!found2) {
              fen2 = 2;
              fen1 = 3;
            }
          }
        }
        break;
      case 'percent':
        if (pos == 1) {
          // if(this.currentOpt == 'plus') {
          //   const per1Min = Math.min(10, newNum1 - this.currentNumber)
          //   const plusNum = this.createSpecialNum(this.min, per1Min);
          //   const newP1 = newNum1 + plusNum * randomIndex;
          //   number = Math.ceil(((newP1 / this.currentNumber) - 1) * 100);
          // } else {
          //   const per2Min = Math.min(10, this.currentNumber - newNum1)
          //   const miunsNum = this.createSpecialNum(this.min, per2Min);
          //   const newP2 = newNum1 - miunsNum;
          //   number = Math.ceil((this.currentNumber - newP2) / this.currentNumber * 100);
          // }
          if(this.currentOpt == 'plus') {
            // 目标：this.currentNumber * (1 + number/100) 与 newNum1 的差值在 -10 到 10 之间
            const maxDiff = Math.min(10, newNum1);
            const minDiff = -Math.min(10, newNum1 - this.currentNumber);
            let targetDiff = this.createSpecialNum(minDiff, maxDiff);
            if (targetDiff === 0) {
              targetDiff = Math.random() > 0.5 ? 1 : -1;
            }
            const targetResult = newNum1 + targetDiff;
            // 反推百分比：(targetResult / this.currentNumber - 1) * 100
            number = Math.max(1, Math.ceil((targetResult / this.currentNumber - 1) * 100));
          } else {
            // 目标：this.currentNumber * (1 - number/100) 与 newNum1 的差值在 -10 到 10 之间
            const maxDiff = Math.min(10, this.currentNumber - newNum1);
            const minDiff = -Math.min(10, newNum1);
            let targetDiff = this.createSpecialNum(minDiff, maxDiff);
            if (targetDiff === 0) {
              targetDiff = Math.random() > 0.5 ? 1 : -1;
            }
            const targetResult = newNum1 + targetDiff;
            // 反推百分比：(1 - targetResult / this.currentNumber) * 100
            number = Math.max(1, Math.ceil((1 - targetResult / this.currentNumber) * 100));
            if(number > 25) {
              number = this.createSpecialNum(1, 25)
            }
          }
        } else {
          if(this.currentOpt == 'plus') {
            if(this.currentNumber < 100) {
              number = this.createSpecialNum(1, 100);
            } else if(this.currentNumber < 200) {
              number = this.createSpecialNum(1, 50);
            } else {
              number = this.createSpecialNum(1, 25);
            }
          } else {
            number = this.createSpecialNum(1, 25);
          }
          
          
        }
        break;
      case 'division':
        number = 2
        break;
      case 'minusDouble':
        if (pos == 1) {
          const maxDiff = Math.min(10, this.currentNumber - newNum1);
          const minDiff = -Math.min(10, newNum1);
          let targetDiff = this.createSpecialNum(minDiff, maxDiff);
          if (targetDiff === 0) {
            targetDiff = 1;
          }
          const targetResult = newNum1 + targetDiff;
          number = Math.max(1, Math.ceil((this.currentNumber - targetResult) / 2));
          // 如果计算结果等于 newNum1，调整 number
          if (this.currentNumber - number * 2 === newNum1) {
            number = number + 1;
          }
          // number = Math.ceil((this.currentNumber - targetResult) / 2);
        } else {
          number = this.createSpecialNum(0, Math.min(30, Math.floor(this.currentNumber / 2)));
        }
        break;
    }

    return {
      number,
      fen1,
      fen2,
      symbolName,
      symbolText
    };


  }

  currentNumber = 1;
  currentOpt = 'plus'
  // 计算数字
  calcNum(symbolName, index) {
    const { currentNum, symbolInfo1, symbolInfo2 } = this.state;

    let newNumber1 = this.currentNumber;

    // const symbolInfo = index == -1 ? symbolInfo1 : symbolInfo2;
    const symbolInfo = index == -1 ? this.leftInfo : this.rightInfo

    const operate = this.currentOpt == 'plus' ? 1 : -1;
    // console.warn("operate", operate)
    switch (symbolName) {
      case 'plus':
      case 'minus':
        newNumber1 += symbolInfo?.number * operate;
        break;
      case 'multiplyZheng':
        newNumber1 = symbolInfo?.number * newNumber1;
        break;
      case 'multiplyFen':
        // console.error("symonl fen2", symbolInfo?.fen2, "fen1", symbolInfo?.fen1, symbolInfo?.fen2 * newNumber1 / symbolInfo?.fen1)
        newNumber1 = Math.round(symbolInfo?.fen2 * newNumber1 / symbolInfo?.fen1);
        break;
      case 'percent':
        newNumber1 = Math.round(newNumber1 + 1 * operate * symbolInfo?.number * newNumber1 / 100);
        break;
      case 'division':
        newNumber1 = Math.round(newNumber1 / symbolInfo?.number);
        break;
      case 'doublePlus':
      case 'minusDouble':
        newNumber1 += symbolInfo?.number * 2 * operate;
        break;
    }

    return newNumber1;
  }

  canChoose = true
  // 选择数字
  chooseNumber = (index) => {

    if (this.gameOver) return;

    if (!this.canChoose) return
    this.canChoose = false

    const { currentNum, addition, symbolInfo1, symbolInfo2, bloodNum } = this.state;

    let newBlood = bloodNum

    let newNumber = this.currentNumber;

    const symbolInfo = index == -1 ? symbolInfo1 : symbolInfo2;

    const operate = addition == 'plus' ? 1 : -1;

    const symbolName1 = symbolInfo1?.symbolName;
    const symbolName2 = symbolInfo2?.symbolName;

    let newNumber1 = this.calcNum(symbolName1, -1);
    let newNumber2 = this.calcNum(symbolName2, 1);
    // const newNumber1 = this.newNumber1;
    // const newNumber2 = this.newNumber2;

    // console.error("左边", newNumber1, "右边", newNumber2)

    this.leftSymbol = ''
    // 如果是加法 先判断选择的是不是比另一个大 如果不是那就不用计算了
    let correctIndex = ''
    if (addition == 'plus') {
      correctIndex = newNumber1 > newNumber2 ? -1 : 1;
      if (newNumber1 == newNumber2) {
        correctIndex = index;
      }
      if (correctIndex != index && newNumber1 != newNumber2) {
        // console.error("选择错误", correctIndex, index)

        newBlood = newBlood - 1;
        store.playWrongSound();
        this.setState({
          selectIndex: index,
          correctIndex,
          bloodNum: newBlood
        }, () => {
          console.error("bloodNum", newBlood)
          if(newBlood == 0) {
            this.gameOver = true;
            clearTimeout(this.gameTimer)
            this.gameTimer = null
            store.submitScore(this.currentNumber);
          }
        })

        setTimeout(() => {
          this.createAddition();
          this.setState({
            selectIndex: 0,
          })
          this.canChoose = true

        }, 500)

        return
      }

    } else {
      correctIndex = newNumber1 > newNumber2 ? -1 : 1;

      // store.playWrongSound();
    }


    newNumber = index == -1 ? newNumber1 : newNumber2;
    this.currentNumber = newNumber;

    // console.error("newNumber+++", this.currentNumber != this.state.currentNum)

    if (this.currentOpt == 'plus' && this.currentNumber > 0 && this.currentNumber != this.state.currentNum && this.divNum < 12) {
      this.divNum++;
    }
    if (this.currentOpt == 'minus' && this.divNum > 1 && this.currentNumber != this.state.currentNum) {
      this.divNum--;
    }

    console.error("divNum", this.divNum)
    // this.createNewElement();
    this.divNum < 12 && this.updateNumElementsByOpt(this.currentOpt);

    if (correctIndex === index) {
      store.playRightSound();
    } else {
      store.playWrongSound();
      newBlood--;
    }
    // console.warn("newNumber", this.currentNumber)
    this.setState({
      selectIndex: index,
      currentNum: this.currentNumber,
      correctIndex,
      bloodNum: newBlood
    }, () => {
      console.error("newBlood", newBlood)
      if(newBlood == 0) {
        this.gameOver = true;
        clearTimeout(this.gameTimer)
        this.gameTimer = null
        store.submitScore(this.currentNumber);
      }
    })


  }

  currentArr = [{
    top: '3.71rem'
  }]
  lastTop = 3.71;
  divNum = 0;
  // 创建新的元素进行叠加
  createNewElement = () => {

    // const { numElements, currentNumber } = this.state;
    const { numElements, currentNumber } = this.state;

    let newArr = this.currentArr;


    if (this.currentOpt == 'minus' && this.currentArr.length > 1) {
      this.divNum--;
      newArr = newArr.slice(0, newArr.length - 1);
      console.warn("numElements", newArr, newArr.length - 1)
      this.setState({
        numElements: newArr
      })

      return
    }




    const lastTop = newArr.length > 0 ? parseFloat(newArr[newArr.length - 1].top) : 3.71;
    const newTop = 3.71 - 0.05 * this.divNum;

    console.warn("numElements", newArr, newArr.length - 1, this.divNum)
    console.warn("lastTop", lastTop, "newTop", newTop)
    // 创建一个新的 ref 来存储新元素
    const newElementRef = React.createRef();

    this.setState({
      numElements: [
        ...numElements,
        {
          top: `${newTop}rem`, // 初始位置为上一个元素的 top 位置
          number: this.currentNumber,
          ref: newElementRef // 存储 ref
        }
      ]
    }, () => {
      this.currentArr = this.state.numElements;
    })

    // this.setState(prevState => {
    //   return {
    //     numElements: [
    //       ...prevState.numElements,
    //       {
    //         top: `${newTop}rem`, // 初始位置为上一个元素的 top 位置
    //         number: this.currentNumber,
    //         ref: newElementRef // 存储 ref
    //       }
    //     ]
    //   }
    // })
    // , () => {
    //   // 在 setState 回调中执行动画
    //   this.currentArr = this.state.numElements;
    //   const element = newElementRef.current;
    //   if (element) {
    //     // 设置过渡效果
    //     element.style.transition = 'top 0.1s ease-in-out';
    //     // 延迟一小段时间以确保过渡效果生效
    //     setTimeout(() => {
    //       element.style.top = `${newTop}rem`; // 移动到新的 top 位置
    //       this.lastTop = newTop;
    //     }, 10);
    //   }
    // });
  }

  updateNumElementsByOpt = (opt) => {
    let { numElements } = this.state;
    if (opt === 'minus' && this.currentArr.length > 1 && this.currentNumber != this.state.currentNum) {
      // 如果是 minus 类型且数组长度大于 1，则减少一个元素
      numElements = numElements.slice(0, this.currentArr.length - 1);
      // this.divNum--;
    } else if (opt === 'plus' && this.currentNumber > 0) {
      // 否则增加一个元素
      // const lastTop = numElements.length > 0 ? parseFloat(numElements[numElements.length - 1].top) : 3.71;
      const newTop = 3.71 - 0.1 * this.currentArr.length;
      console.warn("newTop", newTop)
      const newElementRef = React.createRef();
      numElements = [
        ...numElements,
        {
          top: `${newTop}rem`,
          number: this.currentNumber,
          ref: newElementRef
        }
      ];
      // this.divNum++;
    }
    this.setState({ numElements }, () => {
      this.currentArr = this.state.numElements;
    });
  }

  handEnd = () => {
    // setTimeout(() => {
    this.createAddition();
    this.canChoose = true
    this.setState({
      selectIndex: 0,
    })

    // }, 500)
  }


  render() {
    const { addition, symbolInfo1, symbolInfo2, selectIndex, currentNum, numElements, seconds, correctIndex, showCountSvga, bloodNum } = this.state;

    // console.error(symbolInfo1, symbolInfo2);

    // console.error(number1, number2);
    return (
      <div className="gamePage" id="gamePage1">
        <div className="bg"></div>
        <div className="countBg">
          <div className="count">{seconds}</div>
        </div>
        <div className="bloodCon">
          {Array(5).fill('').map((bloodItem, bloodIndex) => {
            return <div key={bloodIndex} className={`blood ${bloodIndex < bloodNum ? 'full' : 'empty'}`}></div>
          })}
        </div>
        {/* <div className="numPaper">
          <div className="number">${currentNum}</div>
        </div> */}
        {/* 渲染新创建的元素 */}
        {numElements.map((element, index) => (
          <div key={index} className={`numPaper ${numElements.length > 1 && index == numElements.length - 1 ? 'moneyAni' : ''}`} ref={element.ref} style={{ top: element.top }}>
            {index == numElements.length - 1 && <div className="number">${currentNum}</div>}
          </div>
        ))}
        <div className="leftNum" onClick={() => this.chooseNumber(-1)}>
          {(correctIndex == selectIndex && selectIndex == -1) && <SvgaPlayer className="rightSvga" src={RES_PATH + "svga/6输出选中动效.svga"} loop={1} onEnd={this.handEnd} />}
          {(correctIndex != selectIndex && selectIndex == -1) && <SvgaPlayer className="wrongSvga" src={RES_PATH + "svga/7输出选错.svga"} loop={1} onEnd={this.handEnd} />}
          {/* {selectIndex == -1 && <div className="selected"></div>} */}
          {(addition == 'plus' && symbolInfo1?.symbolName != 'doublePlus' && symbolInfo1?.symbolName != 'minusDouble') && <div className="number1">
            {symbolInfo1?.symbolName != 'multiplyFen' && <div className="text1">{symbolInfo1?.symbolText}{symbolInfo1?.number}{symbolInfo1?.symbolText == '+' ? '%' : ''}</div>}
            {symbolInfo1?.symbolName == 'multiplyFen' && <div className="text2">{symbolInfo1?.symbolText}{symbolInfo1?.symbolText == '+' ? '%' : ''}
              <div className="fenBox">
                <div className="fen1">{symbolInfo1?.fen2}</div>
                <div className="fen2">{symbolInfo1?.fen1}</div>
              </div>
            </div>}
          </div>}
          {(addition == 'minus' && symbolInfo1?.symbolName != 'doublePlus' && symbolInfo1?.symbolName != 'minusDouble') && <div className="minusNumber1">
            {symbolInfo1?.symbolName != 'multiplyFen' && <div className="text1">{symbolInfo1?.symbolText}{symbolInfo1?.number}{symbolInfo1?.symbolText == '-' ? '%' : ''}</div>}
            {symbolInfo1?.symbolName == 'multiplyFen' && <div className="text2">{symbolInfo1?.symbolText}{symbolInfo1?.symbolText == '+' ? '%' : ''}
              <div className="fenBox">
                <div className="fen1">{symbolInfo1?.fen2}</div>
                <div className="fen2">{symbolInfo1?.fen1}</div>
              </div>
            </div>}
          </div>}
          {(symbolInfo1?.symbolName == 'doublePlus' || symbolInfo1?.symbolName == 'minusDouble') && <div className="twoNum">
            <div className={`left1 ${addition == 'minus' ? 'minusBg' : ''}`}>{symbolInfo1?.symbolText}{symbolInfo1?.number}{(symbolInfo1?.symbolText == '+' || symbolInfo1?.symbolText == '-') ? '%' : ''}</div>
            <div className={`left2 ${addition == 'minus' ? 'minusBg' : ''}`}>{symbolInfo1?.symbolText}{symbolInfo1?.number}{(symbolInfo1?.symbolText == '+' || symbolInfo1?.symbolText == '-') ? '%' : ''}</div>
          </div>}
        </div>
        <div className="rightNum" onClick={() => this.chooseNumber(1)}>
          {(correctIndex == selectIndex && selectIndex == 1) && <SvgaPlayer className="rightSvga" src={RES_PATH + "svga/6输出选中动效.svga"} loop={1} onEnd={this.handEnd} />}
          {(correctIndex != selectIndex && selectIndex == 1) && <SvgaPlayer className="wrongSvga" src={RES_PATH + "svga/7输出选错.svga"} loop={1} onEnd={this.handEnd} />}
          {/* {selectIndex == 1 && <div className="selected"></div>} */}
          {(addition == 'plus' && symbolInfo2?.symbolName != 'doublePlus' && symbolInfo2?.symbolName != 'minusDouble') && <div className="number2">
            {symbolInfo2?.symbolName != 'multiplyFen' && <div className="text1">{symbolInfo2?.symbolText}{symbolInfo2?.number}{symbolInfo2?.symbolText == '+' ? '%' : ''}</div>}
            {symbolInfo2?.symbolName == 'multiplyFen' && <div className="text2">{symbolInfo2?.symbolText}{symbolInfo2?.symbolText == '+' ? '%' : ''}
              <div className="fenBox">
                <div className="fen1">{symbolInfo2?.fen2}</div>
                <div className="fen2">{symbolInfo2?.fen1}</div>
              </div>
            </div>}
          </div>}
          {(addition == 'minus' && symbolInfo2?.symbolName != 'doublePlus' && symbolInfo2?.symbolName != 'minusDouble') && <div className="minusNumber2">
            {symbolInfo2?.symbolName != 'multiplyFen' && <div className="text1">{symbolInfo2?.symbolText}{symbolInfo2?.number}{symbolInfo2?.symbolText == '-' ? '%' : ''}</div>}
            {symbolInfo2?.symbolName == 'multiplyFen' && <div className="text2">{symbolInfo2?.symbolText}{symbolInfo2?.symbolText == '+' ? '%' : ''}
              <div className="fenBox">
                <div className="fen1">{symbolInfo2?.fen2}</div>
                <div className="fen2">{symbolInfo2?.fen1}</div>
              </div>
            </div>}
          </div>}
          {(symbolInfo2?.symbolName == 'doublePlus' || symbolInfo2?.symbolName == 'minusDouble') && <div className="twoNum">
            <div className={`right1 ${addition == 'minus' ? 'minusBg' : ''}`}>{symbolInfo2?.symbolText}{symbolInfo2?.number}{(symbolInfo2?.symbolText == '+' || symbolInfo2?.symbolText == '-') ? '%' : ''}</div>
            <div className={`right2 ${addition == 'minus' ? 'minusBg' : ''}`}>{symbolInfo2?.symbolText}{symbolInfo2?.number}{(symbolInfo2?.symbolText == '+' || symbolInfo2?.symbolText == '-') ? '%' : ''}</div>
          </div>}
        </div>
        {showCountSvga && <div className="count321">
          <SvgaPlayer className='countSvga' src={RES_PATH + "svga/5倒计时.svga"} loop={1} onEnd={() => this.handleStartSvga(false)} />
        </div>}
      </div>
    );
  }
}

export default GamePage;
