<script>
import {getWeather} from '@/services/weatherService'
import TitleBlock from "@/components/TitleBlock.vue";

export default {
  name: "APIView",
  components: {
    TitleBlock
  },
  data(){
    return(
        {
          res: '',
          weather: '',
          temperature: '',
          winddirection: '',
          windpower: '',
          reporttime: ''
        }
    )
  },
  async created() {
    try {
      const weatherData = await getWeather();
      this.res = weatherData;
      this.weather = weatherData.weather;
      this.winddirection = weatherData.winddirection;
      this.windpower = weatherData.windpower;
      this.temperature = weatherData.temperature;
      this.reporttime = weatherData.reporttime;
    } catch (error) {
      console.error('获取天气数据失败:', error);
    }
  }
}
</script>

<template>
  <TitleBlock :title="'查看API数据'" />
  <div class="ms-4 p-2 border rounded-3">
    <div>天气 : {{ weather }}</div>
    <div>温度 : {{temperature}}</div>
    <div>风向 : {{winddirection}}</div>
    <div>风力 : {{windpower}}</div>
    <div>更新时间 : {{reporttime}}</div>
  </div>
  <div class="ms-4 mt-3 p-2 border rounded-3">
    <json-viewer
        :value="res"
        :expand-depth=5
        copyable
        boxed
        sort></json-viewer>
  </div>
</template>

<style scoped>

</style>