<template>
  <div class="guess-container">
    <h2>猜数游戏</h2>
    <strong>请输入一个 0-100 之间的随机整数:</strong>
    <br /><br />

    <form @submit.prevent>
      <input
        v-model="guessInput"
        type="text"
        placeholder="输入你的猜测"
        :disabled="!isGameActive"
        @keyup.enter="handleGuess"
      />
      <button type="button" @click="handleGuess" :disabled="!isGameActive">
        提交
      </button>
      <button type="button" @click="restartGame">开始</button>
      <br />

      <label>
        结果:
        <input v-model="feedback" type="text" readonly />
      </label>

      <label>
        当前还可以猜测的次数:
        <input v-model="remainingCount" type="text" readonly />
      </label>
    </form>
  </div>
</template>

<script>
export default {
  name: "GuessOptions",

  // 数据选项
  data() {
    return {
      guessInput: "",
      feedback: "",
      remainingCount: 10,
      targetNumber: 0,
      isGameActive: false,
    };
  },

  // 方法选项
  methods: {
    // 重启游戏
    restartGame() {
      this.isGameActive = true;
      this.guessInput = "";
      this.feedback = "";
      this.remainingCount = 10;
      this.targetNumber = Math.floor(Math.random() * 101);
      console.log("选项式 - 目标数字:", this.targetNumber);
    },

    // 处理猜测
    handleGuess() {
      if (!this.isGameActive) {
        return;
      }

      const guess = parseInt(this.guessInput);

      // 验证输入
      if (isNaN(guess) || guess < 0 || guess > 100) {
        this.feedback = "请输入一个 0-100 之间的有效数字!";
        return;
      }

      // 判断结果
      if (guess > this.targetNumber) {
        this.feedback = "猜的有点大!";
      } else if (guess < this.targetNumber) {
        this.feedback = "猜的有点小!";
      } else {
        this.feedback = `猜对啦！答案是 ${guess}`;
        this.isGameActive = false;
        return;
      }

      // 更新次数
      this.remainingCount -= 1;

      // 检查游戏结束
      if (this.remainingCount === 0) {
        this.feedback = `游戏结束！次数已用完，正确答案是 ${this.targetNumber}`;
        this.isGameActive = false;
      }
    },
  },

  // 计算属性
  computed: {
    canGuess() {
      return this.isGameActive && this.remainingCount > 0;
    },
  },

  mounted() {
    console.log("选项式组件已挂载");
  },
};
</script>

<style scoped>
.guess-container {
  text-align: center;
  font-family: Arial, sans-serif;
  background-color: #f0f8ff;
  padding: 40px;
  border-radius: 10px;
  max-width: 500px;
  margin: 0 auto;
}

h2 {
  color: #333;
  margin-bottom: 20px;
}

form {
  display: inline-block;
  padding: 20px;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

input[type="text"] {
  padding: 8px;
  margin-bottom: 10px;
  width: 150px;
  text-align: center;
  border-radius: 5px;
  border: 1px solid #ccc;
  font-size: 14px;
}

input[type="text"]:disabled {
  background-color: #f5f5f5;
  cursor: not-allowed;
}

button {
  padding: 8px 15px;
  margin: 5px;
  border-radius: 5px;
  border: 1px solid #007bff;
  background-color: #007bff;
  color: white;
  cursor: pointer;
  font-size: 14px;
  transition: background-color 0.3s;
}

button:hover:not(:disabled) {
  background-color: #0056b3;
}

button:disabled {
  background-color: #ccc;
  border-color: #ccc;
  cursor: not-allowed;
}

label {
  display: block;
  margin: 15px 0;
  font-size: 14px;
  color: #555;
}

label input {
  margin-left: 10px;
}
</style>
