<script setup lang="ts" name="TheWelcome">
import { ref, watch, watchEffect } from "vue";
// 假设你有一个用于发送请求的函数
async function sendRequestToServer() {
  // 实际应用中替换为真实的API调用
  console.log("发送请求给服务器...");
}

// eslint-disable-next-line prefer-const
let temp = ref(10);
// eslint-disable-next-line prefer-const
let height = ref(0);

function changeTemp() {
  temp.value += 10;
}
function changeHeight() {
  height.value += 10;
}

watch([temp, height], (value) => {
  console.log("温度或水位变化了", value);
  // eslint-disable-next-line prefer-const
  let [newTemp, newHeight] = value;
  if (newTemp >= 60 || newHeight >= 80) {
    sendRequestToServer();
  }
});

// 用watchEffect实现，
const stopWtach = watchEffect(() => {
  // 室温达到50℃，或水位达到20cm，立刻联系服务器
  if (temp.value >= 100 || height.value >= 80) {
    console.log(document.getElementById("demo")?.innerText);
    console.log("联系服务器");
  }
  // 水温达到100，或水位达到50，取消监视
  if (temp.value === 200 || height.value === 100) {
    console.log("清理了");
    stopWtach();
  }
});
</script>

<template>
  <div class="TheWelcome">
    <h2>需求:当水温达到60度，或水位达到80cm时，给服务器发请求</h2>
    <h2>当前水温：{{ temp }}℃</h2>
    <h2>当前水位：{{ height }}cm</h2>
    <button @click="changeTemp">水温加一</button>
    <button @click="changeHeight">水位加一</button>
  </div>
</template>

<style scoped>
.TheWelcome {
  background-color: skyblue; /* 设置背景颜色 */
  box-shadow: 0 0 10px; /* 添加阴影效果 */
  border-radius: 10px; /* 设置圆角半径 */
  padding: 20px; /* 设置内边距 */
}

/* 设置按钮之间的间距 */
button {
  margin: 0 5px;
}

/* 这个样式规则似乎没有用到，可以考虑移除或注释掉 */
li {
  font-size: 20px;
}
</style>
