<script>

import {getWeather, getIPInfo} from "@/services/weatherService";
import TitleBlock from "@/components/TitleBlock.vue";

export default {
  name: "WeatherCard",
  components: {
    TitleBlock
  },
  data() {
    return {
      weather: '',
      temperature: '',
      winddirection: '',
      windpower: '',
      reporttime: '',
      clothingIndex: '',
      windspeedMap: {
        '0': 0.5,
        '1': 0.9,
        '2': 2.5,
        '3': 4.4,
        '4': 6.7,
        '5': 9.3,
        '6': 12.5,
        '7': 15.5,
        '8': 19.0,
        '9': 22.6,
        '10': 26.45,
        '11': 30.55,
        '12': 32
      },
      CloudMap: {
        '晴': 0,
        '阴': 9,
        '多云': 6,
        '雨': 10,
      },
      ip: '',
      address: '',
    }
  },
  methods: {
    GetClothingIndex(temp, windSpeed) {
      const tFelt = calculateWindChill(temp, windSpeed);
      function calculateWindChill(temp, windSpeed) {
        return (
            13.12 +
            0.6215 * temp -
            11.37 * Math.pow(windSpeed, 0.16) +
            0.3965 * temp * Math.pow(windSpeed, 0.16)
        );
      }
        if (tFelt > 26) {
          return "短袖或薄长袖";
        } else if (tFelt >= 20 && tFelt <= 26) {
          return "薄外套、长袖";
        } else if (tFelt >= 10 && tFelt < 20) {
          return "厚外套";
        } else if (tFelt >= 0 && tFelt < 10) {
          return "棉衣或羽绒服";
        } else {
          return "加厚羽绒服，注意保暖";
        }
      }
    },
    // GetClothingIndex() {
    //   let Ic, Ts, Tv, Tr, Ta, H, Rat, Ia, V, Nt, Nl;
    //   Nl = 0;
    //   Ts = 33;
    //   V = this.windspeedMap[this.windpower.match(/\d+/g)];
    //   Nt = this.weather in this.CloudMap? this.CloudMap[this.weather] : 5;
    //   Ta = 20;
    //   Ia = 0.40 / Math.pow(V, 0.406);
    //   Tv = 0.0246 * Math.pow(Math.log10(7.23 * V), 3) - 0.4525 * Math.pow(Math.log10(7.23 * V), 2) + 3.2398 * Math.log10(7.23 * V);
    //   Tr = 0.42 * (1- 0.45 * (Nt + Nl)) * 0.5 * Ia;
    //   H =  0.93244 * 4.1841 * (0.104 * Ta*Ta - 5.1403 * Ta + 117.13);
    //   Ta >= 25?
    //   Rat = 0.0775 + 0.001 * Ta * (0.1 * Ta * (0.01 * Ta * (1.235 * Ta - 54.8752) + 10.1044) - 3.2813)
    //       : Rat = 0.24;
    //   Ic = (Ts - Ta - Tv + Tr)/(H * (1 - Rat) * 0.043) - Ia;
    //   console.log(Ic);
    //   return Ic;
    //
    // }
  async created() {
    try {
      const weatherData = await getWeather();
      const ipInfo = await getIPInfo();
      this.address = ipInfo.province + ipInfo.city;
      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);
    }
    this.clothingIndex = this.GetClothingIndex(this.temperature, this.windspeedMap[this.windpower.match(/\d+/g)]);

  },
  computed: {
    iconClass() {
      switch (this.weather) {
        case '晴':
          return 'bi-sun';
        case '阴':
          return 'bi-cloud-drizzle';
        case '多云':
          return 'bi-cloud-fog';
        case '雨':
          return 'bi-cloud-rain';
        case '雪':
          return 'bi-cloud-snow';
        default:
          return 'bi-cloud';
      }
    }
  }
}
</script>

<template>
  <TitleBlock title="概览"></TitleBlock>
  <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>

      <div class="fs-4 mb-3 mt-3">{{ address }}</div>
      <i :class="iconClass"></i>
      {{ weather }} {{ temperature }} ℃
      <div class="mt-2 fs-4">
        <i class="bi bi-wind"></i> <span class="me-4">{{ winddirection }}</span><span>{{ windpower }}</span>
      </div>
      <div class="mt-2 fs-4">
         <span class="me-4">适宜衣物</span><span>{{ clothingIndex   }}</span>
      </div>
      <div class="text-end fs-6 fw-light mt-3">
        点击查看未来天气
      </div>
    </div>
    <div class="text-end fs-6 fw-light mt-1"><span class="me-4">更新时间</span><span>{{reporttime}}</span></div>
  </div>
</template>

<style scoped>

</style>