<template>
  <div class="dashboard-container">
    <el-row :gutter="12">
      <el-col :span="8">
        <div class="time">
          <h1 style="text-align:center;font-size:36px;"><i class="el-icon-date"></i>&nbsp;{{nowDate}}</h1>
          <h1 style="text-align:center;font-size:46px;"><i class="el-icon-time"></i>&nbsp;&nbsp;{{nowTime}}</h1>
        </div>
      </el-col>
       
      <el-col :span="8">
       <div class="image">
         <img src="@/assets/bg2.jpg" width="100%" height="400px" alt="">
       </div>
      </el-col>

      <el-col :span="8">
        <div class="weather">
          <h1 style="text-indent:20px;font-size:30px;"><i class="el-icon-partly-cloudy"></i>&nbsp;{{weather}} </h1>
          <h1 style="text-align:center;font-size:28px;"><i class="el-icon-key"></i>&nbsp;&nbsp;{{temperature}}</h1>
          
        </div>
      </el-col>
    </el-row>
    
    <el-row :gutter="12" style="margin-top:12px;">
      <el-col :span="8">
        <div class="image">
          <img src="@/assets/dashboard-bg-1.jpg" width="100%" height="400px" alt="">
        </div>
      </el-col>
       
      <el-col :span="8">
       <div class="image">
         <img src="@/assets/bg4.jpg" width="100%" height="400px" alt="">
       </div>
      </el-col>

      <el-col :span="8">
        <div class="image">
          <img src="@/assets/dashboard-bg-2.jpg" width="100%" height="400px" alt="">
        </div>
      </el-col>
    </el-row>
   
  </div>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  name: 'Dashboard',
  computed: {
    ...mapGetters([
      'name'
    ])
  },
  data(){
    return {
      nowDate :"",
      nowTime:"",
      weather:"",
      temperature:"",
    }
  },
  created(){
    this.getWeather();
    this.getNowTime();
    
    let _this=this;
    setInterval(function(){
      _this.getNowTime();
    },1000);
  
  },
  methods:{
    getNowTime(){
      let date = new Date();
      let year = this.dealDate(date.getFullYear());
      let moth = this.dealDate(date.getMonth()+1);
      let day = this.dealDate(date.getDate());
      this.nowDate = year + " 年 "+moth+" 月 "+day+" 日 ";
      let hour = this.dealDate(date.getHours());
      let min = this.dealDate(date.getMinutes());
      let sec = this.dealDate(date.getSeconds());
      this.nowTime = hour +" : "+min+" : "+sec;
    },
    dealDate(data){
      if(data<10){
        return "0"+data;
      }else{
        return data;
      }
    },
    getWeather(){
      this.$axios({
        url:"http://wthrcdn.etouch.cn/weather_mini?city=临沂",
        method:"get",
      }).then(res=>{
        console.log(res.data);
      
        this.weather = res.data.data.forecast[0].type+"     "+res.data.data.forecast[0].fengxiang +"    "+res.data.data.wendu+"℃"

        this.temperature = "最"+res.data.data.forecast[0].high+"  ~  "+"最"+res.data.data.forecast[0].low
      })
     
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 24px;
    padding:0px;
  }

}
h1{
  margin-top:10vh;
  color:#e9e9e9;
 
}
img{
  
}
.time{
   width:100%;
  height:42vh;
  background: #67C23A;
  overflow: hidden;
}
.weather{
  width:100%;
  height:42vh;
  background: #4c98dc;
  overflow: hidden;
}

.image{
  width:100%;
 height:42vh;
  background: #b7b4bb;
  overflow: hidden;
}
</style>
