<template>
  <div class="initClass" :style="css">
    <img :src="todayWeatherPic" alt="" class="weatherClass" />
    <div v-if="todayWeather ? true : false">
      <div class="number">
        {{ todayWeather ? todayWeather.temp : ""
        }}<span class="temperature-unit">℃</span>
      </div>
    </div>
    <div v-if="weatherShow.humidity" class="view-unit">
      湿度
      <span>{{ todayWeather.humidity }}</span>
    </div>
    <div v-if="weatherShow.windDir" class="view-unit">
      风向
      <span>{{ todayWeather.windDir }}</span>
    </div>
    <div v-if="weatherShow.windScale" class="view-unit">
      风速
      <span>{{ todayWeather.windScale }}</span>
    </div>
  </div>
</template>

<script>
import { get } from "../../public_js/http";
export default {
  name: "TslWeather",
  data() {
    return {
      //icon 有限 多种天气对应同一种icon
      imgs: [
        {
          pic: require("./gif/100.gif"),
          cond_code: "100",
        },
        {
          pic: require("./gif/101.gif"),
          cond_code: "101",
        },
        {
          pic: require("./gif/101.gif"),
          cond_code: "102",
        },
        {
          pic: require("./gif/103.gif"),
          cond_code: "103",
        },
        {
          pic: require("./gif/101.gif"),
          cond_code: "104",
        },
        {
          pic: require("./gif/101.gif"),
          cond_code: "200",
        },
        {
          pic: require("./gif/101.gif"),
          cond_code: "201",
        },
        {
          pic: require("./gif/101.gif"),
          cond_code: "202",
        },
        {
          pic: require("./gif/101.gif"),
          cond_code: "203",
        },
        {
          pic: require("./gif/101.gif"),
          cond_code: "204",
        },
        {
          pic: require("./gif/101.gif"),
          cond_code: "205",
        },
        {
          pic: require("./gif/101.gif"),
          cond_code: "206",
        },
        {
          pic: require("./gif/101.gif"),
          cond_code: "207",
        },
        {
          pic: require("./gif/101.gif"),
          cond_code: "208",
        },
        {
          pic: require("./gif/101.gif"),
          cond_code: "209",
        },
        {
          pic: require("./gif/101.gif"),
          cond_code: "210",
        },
        {
          pic: require("./gif/101.gif"),
          cond_code: "211",
        },
        {
          pic: require("./gif/101.gif"),
          cond_code: "212",
        },
        {
          pic: require("./gif/101.gif"),
          cond_code: "213",
        },
        {
          pic: require("./gif/300.gif"),
          cond_code: "300",
        },
        {
          pic: require("./gif/300.gif"),
          cond_code: "301",
        },
        {
          pic: require("./gif/302.gif"),
          cond_code: "302",
        },
        {
          pic: require("./gif/302.gif"),
          cond_code: "303",
        },
        {
          pic: require("./gif/304.gif"),
          cond_code: "304",
        },
        {
          pic: require("./gif/305.gif"),
          cond_code: "305",
        },
        {
          pic: require("./gif/306.gif"),
          cond_code: "306",
        },
        {
          pic: require("./gif/307.gif"),
          cond_code: "307",
        },
        {
          pic: require("./gif/307.gif"),
          cond_code: "308",
        },
        {
          pic: require("./gif/307.gif"),
          cond_code: "309",
        },
        {
          pic: require("./gif/310.gif"),
          cond_code: "310",
        },
        {
          pic: require("./gif/311.gif"),
          cond_code: "311",
        },
        {
          pic: require("./gif/312.gif"),
          cond_code: "312",
        },
        {
          pic: require("./gif/312.gif"),
          cond_code: "313",
        },
        {
          pic: require("./gif/312.gif"),
          cond_code: "314",
        },
        {
          pic: require("./gif/312.gif"),
          cond_code: "315",
        },
        {
          pic: require("./gif/312.gif"),
          cond_code: "316",
        },
        {
          pic: require("./gif/312.gif"),
          cond_code: "317",
        },
        {
          pic: require("./gif/312.gif"),
          cond_code: "318",
        },
        {
          pic: require("./gif/312.gif"),
          cond_code: "399",
        },
        {
          pic: require("./gif/400.gif"),
          cond_code: "400",
        },
        {
          pic: require("./gif/401.gif"),
          cond_code: "401",
        },
        {
          pic: require("./gif/402.gif"),
          cond_code: "402",
        },
        {
          pic: require("./gif/403.gif"),
          cond_code: "403",
        },
        {
          pic: require("./gif/404.gif"),
          cond_code: "404",
        },
        {
          pic: require("./gif/404.gif"),
          cond_code: "405",
        },
        {
          pic: require("./gif/404.gif"),
          cond_code: "406",
        },
        {
          pic: require("./gif/407.gif"),
          cond_code: "407",
        },
        {
          pic: require("./gif/407.gif"),
          cond_code: "408",
        },
        {
          pic: require("./gif/407.gif"),
          cond_code: "409",
        },
        {
          pic: require("./gif/407.gif"),
          cond_code: "410",
        },
        {
          pic: require("./gif/407.gif"),
          cond_code: "499",
        },
        {
          pic: require("./gif/501.gif"),
          cond_code: "500",
        },
        {
          pic: require("./gif/501.gif"),
          cond_code: "501",
        },
        {
          pic: require("./gif/501.gif"),
          cond_code: "502",
        },
        {
          pic: require("./gif/501.gif"),
          cond_code: "503",
        },
        {
          pic: require("./gif/504.gif"),
          cond_code: "504",
        },
        {
          pic: require("./gif/507.gif"),
          cond_code: "507",
        },
        {
          pic: require("./gif/507.gif"),
          cond_code: "508",
        },
        {
          pic: require("./gif/507.gif"),
          cond_code: "509",
        },
        {
          pic: require("./gif/507.gif"),
          cond_code: "510",
        },
        {
          pic: require("./gif/507.gif"),
          cond_code: "511",
        },
        {
          pic: require("./gif/507.gif"),
          cond_code: "512",
        },
        {
          pic: require("./gif/507.gif"),
          cond_code: "513",
        },
        {
          pic: require("./gif/507.gif"),
          cond_code: "514",
        },
        {
          pic: require("./gif/507.gif"),
          cond_code: "515",
        },
        {
          pic: require("./gif/507.gif"),
          cond_code: "900",
        },
        {
          pic: require("./gif/507.gif"),
          cond_code: "901",
        },
        {
          pic: require("./gif/507.gif"),
          cond_code: "999",
        },
      ],
      todayWeatherPic: "", //
      todayWeather: null,
    };
  },
  props: {
    css: {
      type: String,
      default: "",
    },
    location: {
      type: String,
      default: "121.457296,31.16463",
    },
    weatherKey: {
      type: String,
      default: "",
    },
    weatherShow: {
      type: Object,
      default: () => {
        return {
          humidity: false,
          windDir: false,
          windScale: false,
        };
      },
    },
  },
  methods: {
    // 请求天气地址
    async getWebWeather() {
      let url = `https://devapi.qweather.com/v7/weather/now?key=${this.weatherKey}&location=${this.location}`;
      let weatherData = await get(url);
      if (weatherData == null || weatherData.now == null) {
        return;
      }
      this.todayWeather = JSON.parse(JSON.stringify(weatherData.now));
      let [entity] = this.imgs.filter(
        (x) => x.cond_code === weatherData.now.icon
      );
      if (entity != null) {
        this.todayWeatherPic = entity.pic;
      }
    },
  },
  created() {},
  mounted() {
    if (this.weatherKey != "" && this.location != null) {
      this.getWebWeather();
      return;
    }
  },
};
</script>

<style scoped>
.initClass {
  overflow: hidden;
  color: white;
  display: flex;
  vertical-align: middle;
}

.number {
  font-size: 0.4em;
  height: 0.4em;
  font-family: "dinmedium";
  color: #fff;
  position: relative;
}
.temperature-unit {
  font-size: 0.16em;
  top: 0;
  position: absolute;
}

.weatherClass {
  width: 1em;
  height: 1em;
}

.view-unit {
  font-size: 0.45em;
  margin: auto 0 auto 1.5em;
  text-align: center;
}

</style>
