<template>
  <div id="app">
    <div class="top">
      <div class="left" text="盐都电力可视化系统">
        盐都电力可视化系统
      </div>
      <div class="middle">
        <div class="router" :class="{'active':routerActive==index}" v-for="(item,index) in routerTitle" @click="handleChange(index)" :key="index" :text="item">{{item}}</div>
      </div>
      <div class="right">
        <div class="time">
          <span>{{this.$moment().format("MM月DD日")}}  {{week}}</span>
          <span style="font-size:24px;margin-top: 3px;">{{this.$moment().format("YYYY-MM-DD")}}</span>
        </div>
        <div class="weather" v-for="(item,index) in weatherArr" :key="index">
          <div class="pic">
            <img :src="item.pic" alt="" style="height:100%;width:100%">
          </div>
          <div class="date">
            <span>{{item.date}}</span>
            <span style="font-size:24px;margin-top: 3px;">{{item.temperature}}</span>
          </div>
        </div>
      </div>
    </div>
    <div class="content">
      <router-view />

    </div>
  </div>
</template>
<script>
import MinxinItem from "./mixins"
import axios from 'axios'
import {getWather,Weather} from "./api/index.js";
export default {
  name: 'home',
  mixins:[MinxinItem],
  data(){
    return{
      addDay:'',
      subDay:'',
      routerTitle:['首页','20kv','35kv','站房智辅'],
      routerActive:0,
      weatherArr:[
        {day:'今天',temperature:'',pic:require('./assets/images/sun.png')},
        {day:'昨天',temperature:'',pic:require('./assets/images/union.png')},
        {day:'明天',temperature:'',pic:require('./assets/images/windy.png')}
      ],
      weekList:['周日','周一','周二','周三','周四','周五','周六'],
      week:'',
    }
  },
  mounted(){
    this.handleWather()
    let week = new Date(this.$moment().format("YYYY-MM-DD")).getDay()
   this.week = this.weekList[week]
  },
  
  methods:{
    getDateSub(n){
      let day = this.$moment(new Date()).subtract(n, 'days').format('YYYY-MM-DD');
      this.subDay = day
      return day;
    },
    getDateAdd(n){
      var dd = new Date();
      dd.setDate(dd.getDate() + n); //获取n天后的日期
      var y = dd.getFullYear();
      var m = dd.getMonth() + 1; //获取当前月份的日期
      var d = dd.getDate();
      let day = y + '-' + m + '-' + d;
      this.addDay = day
      return day;
    },
    //天气
    handleWather(){
      // axios({url:"http://www.jcznedu.com:5000/weather/prediction/?city=盐都&&limit=3",methods:'GET'}).then(res=>{
      // })
      Weather({
        action:'one',
        key:'天气情况'
      }).then((res)=>{
        let toDay = this.$moment().format("D")
        this.getDateSub(1);
        this.getDateAdd(1),
        res.data.data.forEach((item,index) => {
          if (item.第N天 == this.$moment(this.subDay).format("D")) {
            this.weatherArr[1].date = '昨天'
            this.weatherArr[1].temperature = item.最低温度 +'℃' + '~' + item.最高温度 +'℃'
            this.Onweather(item.天气,1)
          }else if (item.第N天 == this.$moment(this.addDay).format("D")) {
            this.weatherArr[2].date = '明天'
            this.weatherArr[2].temperature = item.最低温度 +'℃' + '~' + item.最高温度 +'℃'
            this.Onweather(item.天气,2)
          }else if (item.第N天 == toDay) {
            this.weatherArr[0].date = '今天'
            this.weatherArr[0].temperature = item.最低温度 +'℃' + '~' + item.最高温度 +'℃'
            this.Onweather(item.天气,0)
          }
        });
      })
    },
    //天气
    Onweather(name,index){
      switch (name) {
					case "多云":
						return this.weatherArr[index].pic = require('./assets/weather/Cloudy .png');
					case "阴":
						return this.weatherArr[index].pic = require('./assets/weather/Cloudy .png')
					case "暴雨":
						return this.weatherArr[index].pic = require('./assets/weather/rainstorm.png')
					case "冰雹":
						return this.weatherArr[index].pic = require('./assets/weather/hail.png')
					case "大风":
						return this.weatherArr[index].pic = require('./assets/weather/gale.png')
					case "大雪":
						return this.weatherArr[index].pic = require('./assets/weather/bigsnow.png')
					case "大雨":
						return this.weatherArr[index].pic = require('./assets/weather/bigrain.png')
					case "雷电":
						return this.weatherArr[index].pic = require('./assets/weather/thunder.png')
					case "雷阵雨":
						return this.weatherArr[index].pic = require('./assets/weather/shower.png')
					case "沙尘暴":
						return this.weatherArr[index].pic = require('./assets/weather/sand.png')
					case "晴":
						return this.weatherArr[index].pic = require('./assets/weather/sun.png')
					case "雾霾":
						return this.weatherArr[index].pic = require('./assets/weather/smog.png')
					case "小雪":
						return this.weatherArr[index].pic = require('./assets/weather/snow.png')
					case "小雨":
						return this.weatherArr[index].pic = require('./assets/weather/rain.png')
					case "雪":
						return this.weatherArr[index].pic = require('./assets/weather/rainlitter.png')
					case "多云":
						return this.weatherArr[index].pic = require('./assets/weather/night.png')
					case "雨夹雪":
						return this.weatherArr[index].pic = require('./assets/weather/rainsnow.png')
					case "月亮":
						return this.weatherArr[index].pic = require('./assets/weather/moon.png')
					case "中雪":
						return this.weatherArr[index].pic = require('./assets/weather/mieddlesnow.png')
					case "中雨":
						return this.weatherArr[index].pic = require('./assets/weather/middlerain.png')
				}
    },
    handleChange(index){
      let that = this;
      this.routerActive = index
      if (this.routerActive == 0) {
        if (this.$route.name != 'index') {
          that.$router.push({name:'index'})
        }
      }else if (this.routerActive == 3) {
        that.$router.push({name:'stationBuilding'})
      }else if (this.routerActive == 1) {
        that.$router.push({name:'twentyKV'})
      }else if (this.routerActive == 2) {
        that.$router.push({name:'thirtyFiveKV'})
      }
    }
  }
}
</script>
<style>
@import "./assets/index.css";
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  background: url('./assets/images/homePg.png') no-repeat;
  background-size: 100% 100%;
}

</style>
<style lang="less" scoped>
.top {
  width: 100%;
  height: 100px;
  /* background: rgba(147, 230, 244,0.6); */
  /* background-image: linear-gradient(90deg, rgba(147, 230, 244,0.6),rgba(147, 230, 244,0), rgba(147, 230, 244,0.6)); */
  background: url('./assets/images/topBg.png') no-repeat;
  background-size: 100% 100%;
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  .left{
    width: 815px;
    height: 97px;
    background: url('./assets/images/titleBg1.png') no-repeat;
    background-size: 100% 100%;
    font-size: 44px;
    font-weight: 700;
    letter-spacing: 22px;
    color: #ffffff;
    line-height: 97px;
    padding-left: 86px;
    text-align: left;
    box-sizing: border-box;
  }
  .left:before{
        content: attr(text);
        position: absolute;
        z-index: 10;
        color:rgb(86, 254, 246);
        -webkit-mask:linear-gradient(to top, rgb(86,244,254), transparent );
    }
  .middle{
    width: auto;
    height: 78px;
    display: flex;
    flex-flow: row nowrap;
    .router{
      width: 244px;
      height: 100%;
      line-height: 78px;
      color: rgb(41,114,124);
      font-size: 22px;
      cursor: pointer;
    }
    .active{
      color: #ffffff;
      background: url('./assets/images/routerActive.png') no-repeat;
      background-size: 100% 100%;
    }
    .active:before{
        content: attr(text);
        position: absolute;
        z-index: 10;
        color:rgb(86, 254, 246);
        -webkit-mask:linear-gradient(to top, rgb(86,244,254), transparent );
    }
  }
  .right{
    // width: 740px;
    height: 78px;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    padding-right: 15px;
    .time{
      height: 100%;
      color: #ffffff;
      font-size: 18px;
      display: flex;
      flex-flow: column nowrap;
      justify-content: center;
      text-align: left;
    }
    .weather{
      display: flex;
      flex-flow: row nowrap;
      height: 100%;
      align-items: center;
      margin-left: 36px;
      .pic{
        width: 61px;
        height: 61px;
      }
      .date{
        height: 100%;
        color: #ffffff;
        font-size: 18px;
        display: flex;
        flex-flow: column nowrap;
        justify-content: center;
        margin-left: 19px;
        text-align: left;
      }
    }
  }
}
.content {
  width: 100%;
  height: calc(100% - 100px);
      display: flex;
    align-items: center;
    justify-content: space-around;
}
</style>
