<script>
import {getLocalData} from "@/services/weatherService";

export default {
  name: "RoomCard",
  data() {
    return {
      RoomTemp: 20,
      RoomHumidity: 40,
      LastUpdateTime: "未获取",
      RoomNumber: "101",
    }
  },
  methods: {
    TempMap(temp) {
      if (temp < 18) {
        return "冷";
      } else if (temp < 25) {
        return "适中";
      } else if (temp >34) {
        return "热";
      } else{
        return "暖";
      }
    },
    HumidityMap(humidity) {
      if (humidity < 30) {
        return "较干燥";
      } else if (humidity < 60) {
        return "正常";
      } else {
        return "较湿";
      }
    },
  },
  async created() {
    const localData = await getLocalData();
    console.log(localData);
    this.RoomTemp = localData[0].temperature;
    console.log(this.RoomTemp);
    this.RoomHumidity = localData[0].humidity;
    console.log(this.RoomHumidity);
    this.LastUpdateTime = localData[0].time;
  },
}
</script>

<template>
  <div class="border border-0 border-dark-subtle m-3 p-4 rounded-4 shadow">
    <div class="h1 ms-2 mb-2 fw-semibold roboto-bold">房间</div>
    <div class="fs-3 ms-3 text-black-75">
      <div class="fs-2 mt-3 mb-2 border-bottom border-2">
        <span class=""></span>
      </div>

      <i class="bi bi-thermometer-half"></i>
      {{ TempMap(RoomTemp) }} {{ RoomTemp }}℃
      <div class="mt-4 ms-1 fs-4">
        <i class="bi bi-moisture"></i> <span class="ms-1 me-4">{{HumidityMap(RoomHumidity)}}</span><span>{{ RoomHumidity }}%</span>
      </div>
    </div>
    <div class="text-end fs-6 fw-light mt-3"><span class="me-4">更新时间</span><span>{{ LastUpdateTime }}</span></div>
  </div>
</template>

<style scoped>

</style>