<template>
    <div class="DPcomputer6Box">
        <!-- 气象数据 -->
        <div class="dataScrView_rightView_title">气象数据</div>
        <div class="dataScrView_rightView_content">
            <div class="todayWeather1">
                <div style="font-size:40px;margin-right:30px;">{{weatherData.fengli.temp}}℃</div>
                <img :src=" weatherData.today.weather == '晴' ? weatherPic.sunnyPic : weatherData.today.weather == '多云' ? weatherPic.cloudyPic : weatherPic.overcastPic " height="25">
                <div style="font-size:16px;">{{weatherData.today.weather}} / {{currentTime.day}}</div>
            </div>
            <div class="todayWeather2">
                <div v-for="(item,index) in weatherData.forecastData" :key="index">
                    <div style="color:#D0DAFF;font-size:13px;margin-bottom:5px;">{{item.week}}</div>
                    <img :src="item.weather == '晴' ? weatherPic.sunnyPic : item.weather == '多云' ? weatherPic.cloudyPic : weatherPic.overcastPic " height="25">
                    <div style="color:#D0DAFF;font-size:13px;margin-top:5px;">{{item.temp_night_c + '℃-' + item.temp_day_c}}℃</div>
                </div>
            </div>
            <div class="todayWeather3">
                <img src="../../../../assets/images/cutGraph/fengli1.png" height="45">
                <div>风力：{{weatherData.fengli.wD + weatherData.fengli.wS}}</div>
                <div>
                    <div>温度：{{weatherData.fengli.temp}}℃</div>
                    <div>湿度：{{weatherData.fengli.sD}}%</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { Tools, HttpReq, CAMap} from '@/assets/js/common.js';
import sunnyPic from '../../../../assets/images/cutGraph/sunny.png'
import cloudyPic from '../../../../assets/images/cutGraph/cloudy.png'
import overcastPic from '../../../../assets/images/cutGraph/overcast.png'


export default {
    data(){
        return {
            //时间
            currentTime:{
                day:'',
                month:'',
                year:'',
            },
            //天气图片
            weatherPic:{
                sunnyPic:sunnyPic,
                cloudyPic:cloudyPic,
                overcastPic:overcastPic,
            },
            //天气数据
            weatherData:{
                forecastData:[],
                today:{},
                fengli:{},
            },
        }
    },
    mounted(){
        this.loadData();
    },
    methods:{
        loadData(){
            this.dayCurrentTimeFn();
            this.monthCurrentTimeFn();
            this.yearCurrentTimeFn();

            //获取天气
            HttpReq.truckDispatching.getWeatherInforQuery({ids:'101121301'}).then((res) => {
                if(res.code == 200 && res.msg){
                    let data1 = JSON.parse(res.msg).value[0].weathers;
                    let data2 = [];
                    for(let i = 0;i < 5;i++){
                        data2.push(data1[i])
                    }
                    this.weatherData.forecastData = data2;
                    this.weatherData.today = data1[0];
                    
                    let data3 = JSON.parse(res.msg).value[0].realtime;
                    this.weatherData.fengli = data3;
                }
            })
            
        },
        //获取当前时间
		dayCurrentTimeFn(){
			var date = new Date();
			var year = date.getFullYear();        //年 ,从 Date 对象以四位数字返回年份
			var month = date.getMonth() + 1;      //月 ,从 Date 对象返回月份 (0 ~ 11) ,date.getMonth()比实际月份少 1 个月
			var day = date.getDate();             //日 ,从 Date 对象返回一个月中的某一天 (1 ~ 31)
			//修改月份格式
			if (month >= 1 && month <= 9) {
				month = "0" + month;
			}
			//修改日期格式
			if (day >= 0 && day <= 9) {
				day = "0" + day;
			}
			let currentFormatDate = year + "-" + month + "-" + day;
			this.currentTime.day = currentFormatDate;
		},
        monthCurrentTimeFn(){
			var date = new Date();
			var year = date.getFullYear();        //年 ,从 Date 对象以四位数字返回年份
			var month = date.getMonth() + 1;      //月 ,从 Date 对象返回月份 (0 ~ 11) ,date.getMonth()比实际月份少 1 个月
			//修改月份格式
			if (month >= 1 && month <= 9) {
				month = "0" + month;
			}
			let currentFormatDate = year + "-" + month;
			this.currentTime.month = currentFormatDate;
		},
        yearCurrentTimeFn(){
			var date = new Date();
			var year = date.getFullYear();        //年 ,从 Date 对象以四位数字返回年份
			let currentFormatDate = year;
			this.currentTime.year = currentFormatDate;
		},
    },
    beforeDestroy(){}
}
</script>

<style scoped>
*{
  margin: 0;
  padding: 0;
}
.DPcomputer6Box{
    width: 20vw;
    height: 23.5vh;
    background-color: rgba(32,42,67,0.95);
    padding: 5px 7px;
    box-sizing: border-box;
    overflow: hidden;
}
.DPcomputer6Box .dataScrView_rightView_title{
    margin-bottom: 5px;
    width: 100%;
    height: 3.5vh;
    background:no-repeat center center url('~@/assets/images/cutGraph/biaoti1.png');
	background-size:100% 100%;
    padding-left: 10px;
    box-sizing: border-box;
    font-size: 18px;
    line-height: 3.5vh;
    color: #FAFAFB;
    letter-spacing: 1px;
    text-shadow: 1px 1px 1px #92CBFF;
}
.DPcomputer6Box .dataScrView_rightView_content{
    width: 100%;
    height: 19vh;
}
.DPcomputer6Box .todayWeather1{
    width: 100%;
    height: 4vh;
    display: flex;
    color: #03FEFE;
    align-items: center;
    padding: 0px 5px;
    box-sizing: border-box;
}
.DPcomputer6Box .todayWeather2{
    margin-top: 10px;
    width: 100%;
    height: 8vh;
    display: flex;
    justify-content: space-between;
    padding: 0px 5px;
    box-sizing: border-box;
    text-align: center;
}
.DPcomputer6Box .todayWeather3{
    margin-top: 5px;
    width: 100%;
    height: 5vh;
    display: flex;
    justify-content: space-between;
    padding: 0px 5px;
    box-sizing: border-box;
    align-items: center;
    color: #03FEFE;
}
</style>