<template>
  <div
    class="full component-box"
    :style="`background-image: url(${state.img}); background-size: 100% 100%;`"
  >
    <canvas id="weather"></canvas>

    <div class="weather-box">
      <div class="weather-icon">
        <i
          class="iconfont"
          :class="getWeatherIcon(state.weather.realtime.info)"
        ></i>
      </div>

      <ul class="weather-info">
        <li class="info-item"><span>城市：</span>{{ state.weather.city }}</li>
        <li class="info-item"><span>天气：</span>{{ state.weather.realtime.info }}</li>
        <li class="info-item"><span>温度：</span>{{ state.weather.realtime.temperature }} ℃</li>
        <li class="info-item"><span>风向：</span>{{ state.weather.realtime.direct }}{{state.weather.realtime.power}}</li>
      </ul>

      <ul class="weather-future">
        <li
          v-for="item in state.weather.future"
          :key="item.date"
          class="future-item"
        >
          <span>{{item.date}}</span>
          <span>{{item.weather}}</span>
          <span>{{item.temperature}}</span>
          <span>{{item.direct}}</span>
        </li>
      </ul>

    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, onMounted, reactive } from 'vue'
import { weather, getWeatherIcon } from '../../../assets/api/party3'

export default defineComponent({
  name: 'weather',
  components: {},
  setup() {
    let state = reactive({
      img: require('../../../assets/image/back.jpg'),
      weather: {
        city: '北京',
        future: [],
        realtime: {
          temperature: '13℃',
          info: '晴',
          direct: '东风',
        },
      },
    })

    onMounted(() => {
      console.log('onmunted')
    })

    weather().then((res) => {
      state.weather = res
    })

    return {
      state,
      getWeatherIcon,
    }
  },
})
</script>

<style lang="scss">
.component-box {
  position: relative;
  .weather-box {
    padding: 20px;
    position: absolute;
    // height: 160px;
    width: 360px;
    right: 20px;
    top: 20px;
    background: rgba($color: #ffffff, $alpha: 0.3);
    .weather-icon {
      text-align: center;
      line-height: 60px;
      i {
        font-size: 40px;
        color: #666;
      }
    }
    .weather-info {
      color: #666;
      height: auto;
      overflow: hidden;
      .info-item {
        height: 24px;
        line-height: 24px;
        width: 50%;
        float: left;
        span {
          font-weight: bold;
        }
      }
    }
    .weather-future {
      width: 100%;
      padding-top: 10px;
      > li {
        color: $black;
        height: 32px;
        line-height: 32px;
        border-bottom: 1px dashed skyblue;
        > span {
          float: left;
          display: block;
        }
        > span:nth-child(1) {
          width: 27%;
        }
        > span:nth-child(2) {
          width: 21%;
        }
        > span:nth-child(3) {
          width: 17%;
        }
        > span:nth-child(4) {
          width: 35%;
        }
      }
    }
  }
}
</style>
