<template>
 <div style="width: 100%;height: 100%;">
    <dv-border-box-9  :color="['#1a3776', '#3f6a9a']" backgroundColor="rgba(15, 33, 70, 0.6)">
      <dv-border-box-8>
        <div  style="font-size: 18px;width: 100%;height: 100%;display: flex;justify-content: center;align-items: center;padding-left: 20px;">
          <div class=" center" style="width: 25%;color: #00f9cf;">{{dateTime.date}}</div>
          <div class=" center" style="width: 25%;background: rgba(9, 215, 183,.6);font-size: 26px;font-style: italic;border-radius: 5px;border: solid 1px #dddddd;color: #fff;">{{dateTime.time}}</div>
          <div class=" center" style="width: 18%;color: #00f9cf;" >{{weekStr[dateTime.week]}}</div>

          <div class=" center" style="width: 10%;font-size: 26px;font-style: italic;color: #00f9cf;">{{temperature}}℃</div>
          <div class=" center" style="width: 10%;">
            <div style="text-indent: 8px;">{{weather}} </div>
          </div>
        </div>
      </dv-border-box-8>
    </dv-border-box-9>
  </div>
</template>

<script>
import {dateFormat} from "../util/date.js";

export default {
  name: "TimeBar",
  async mounted() {
    this.currentTime();
    await this.getWeather();
    },
  data(){
    return{
      dateTime: {},
      weekStr: ['星期天','星期一','星期二','星期三','星期四','星期五','星期六',],
      temperature: '',
      weather: '',
      weatherClass: 'duoyun',
    }
  },
  watch: {
    weather(){
      this.weatherClass = this.getWeatherClass(this.weather);
    },
  },
  methods: {
    currentTime() {
      setInterval(this.getTime, 500);
    },
    getTime() {
      let date = new Date();
      let str = dateFormat(date);
      let week = date.getDay();
      str = str.split(" ");
      this.dateTime = {
        week: week,
        date: str[0],
        time: str[1]
      }
    },
    getWeatherClass(weather){
      let duoyun = ['少云','晴间多云','多云','阴'];
      let wu = ['雾','浓雾','强浓雾','轻雾','大雾','特强浓雾'];
      let mai = ['霾','中度霾','重度霾','严重霾'];
      let feng = ['有风','平静','微风','和风','清风','强风/劲风', ,'疾风','大风','烈风','风暴','狂爆风','飓风','热带风暴'];
      let yu = ['阵雨','雷阵雨','雷阵雨并伴有冰雹','小雨','中雨','大雨','暴雨','大暴雨','特大暴雨','强阵雨','强雷阵雨','极端降雨','毛毛雨/细雨','雨','小雨-中雨','中雨-大雨','大雨-暴雨','暴雨-大暴雨','大暴雨-特大暴雨','雨雪天气','雨夹雪','阵雨夹雪','冻雨'];
      let sun = ['晴'];
      let xue = ['雪','阵雪','小雪','中雪','大雪','暴雪','小雪-中雪','中雪-大雪','大雪-暴雪'];
      if(duoyun.indexOf(weather)>=0) return'duoyun';
      if(wu.indexOf(weather)>=0) return'wu';
      if(yu.indexOf(weather)>=0) return'yu';
      if(sun.indexOf(weather)>=0) return'sun';
      if(xue.indexOf(weather)>=0) return'xue';
      if(mai.indexOf(weather)>=0) return'mai';
      if(feng.indexOf(weather)>=0) return'feng';
      return 'duoyun';
    },
    async getWeather(){
      console.log(this.$map)
      let  weather = new this.$AMap.Weather();
      //执行实时天气信息查询
      weather.getForecast('郑州市', (err, data) => {
        this.temperature = data.forecasts[0].dayTemp;
        this.weather  = data.forecasts[0].dayWeather;
      });
    },
  }
}
</script>

<style scoped>
  .center{
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .duoyun{
    background: url("/data/duoyun.png") no-repeat center/contain;
  }
  .wu{
    background: url("/data/wu.png") no-repeat center/contain;
  }
  .xue{
    background: url("/data/xue.png") no-repeat center/contain;
  }
  .yu{
    background: url("/data/yu.png") no-repeat center/contain;
  }
  .sun{
    background: url("/data/sun.png") no-repeat center/contain;
  }
  .mai{
    background: url("/data/mai.png") no-repeat center/contain;
  }
  .feng{
    background: url("/data/feng.png") no-repeat center/contain;
  }
</style>
