<!--
 * @Author: song
 * @Date: 2021-12-06 20:47:28
 * @LastEditors: song
 * @LastEditTime: 2022-05-27 19:14:01
 * @Description: file content
 * @FilePath: \lancangrivervue3\src\views\FormalAnalysis\monitor\components\weather.vue
-->
<template>
  <div class="weather">
    <div class="weather-ul">
      <div v-for="(value, key) in forecastData.weatherData" :key="key" @click="weatherClick(value, key)" class="weather-li">
        <div
          ><span>{{ key }}</span></div
        >
        <div v-if="value.predict.detail[0].day.weather.temperature < 999">
          <div>今天 {{ value.predict.detail[0].day.weather.info }}</div>
          <div>
            <img :src="showImg(value.predict.detail[0].day.weather.info)" />
          </div>
          <div> {{ value.predict.detail[0].day.weather.temperature }}°C </div>
        </div>
        <div v-else>
          <div>今天</div>
          <div> </div>
          <div> </div>
        </div>
        <div>
          <div>明天 {{ value.predict.detail[1].day.weather.info }}</div>
          <div><img :src="showImg(value.predict.detail[1].day.weather.info)" /></div>
          <div> {{ value.predict.detail[1].day.weather.temperature }}°C </div>
        </div>
        <div>
          <div>后天 {{ value.predict.detail[2].day.weather.info }}</div>
          <div><img :src="showImg(value.predict.detail[2].day.weather.info)" /></div>
          <div> {{ value.predict.detail[2].day.weather.temperature }}°C </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import eventBus from '/@/utils/eventBus';
import { onMounted, reactive } from 'vue';
import { getWeathForecast } from '/@/api/swHome/index';
// 获取天气预报
function weatherClick(value, key) {
  console.log(value);
  eventBus.emit('weatherClick', { weatherData: value, key: key, weatherDataAll: forecastData.weatherData });
}
let forecastData = reactive({
  weatherData: {},
});
function getWeathForecastData() {
  getWeathForecast().then((res) => {
    console.log(res.data);
    forecastData.weatherData = res.data;
    // 将所有的天气数据传给父页面
  });
}
function showImg(value) {
  // return require(`../../assets/images/weatherIcon/${value}.png`);
  return new URL(`../../assets/images/weatherIcon/${value}.png`, import.meta.url).href;
}
onMounted(() => {
  getWeathForecastData();
});
</script>
<style scoped lang="less">
.weather-ul{
  height: 240px;
  overflow: auto;
}
.weather {
  padding: 10px;
}
.weather-li {
  display: flex;
  background-color: #06305e;
  // padding: 10px 0;
  margin-bottom: 6px;
  & > div {
    flex: 1;
    text-align: center;
    color: #fff;
    img {
      display: inline-block;
      width: 27px;
    }
    div:nth-child(1) {
      padding-top: 5px;
    }
    div:nth-child(3) {
      font-weight: bold;
    }
  }
  & > div:nth-child(1) {
    flex: initial;
    height: 76px;
    width: 40px;
    background: linear-gradient(270deg, rgba(12, 193, 233, 0.36) 0%, rgba(12, 193, 233, 0) 100%);
    display: flex;
    justify-content: center;
    /* 侧轴剧中 */
    align-items: center;

    span {
      background: linear-gradient(0deg, #69c8ff 0%, #00f6ff 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      text-fill-color: transparent;
      font-size: 18px;
      font-weight: 500;
      writing-mode: vertical-lr;
    }
  }
}
</style>
