<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;">{{(parseInt(weatherData.today.high.slice(3,5)) +  parseInt(weatherData.today.low.slice(3,5))) / 2}}℃</div>
                <img :src=" weatherData.today.type == '晴' ? weatherPic.sunnyPic : weatherData.today.type == '多云' ? weatherPic.cloudyPic : weatherPic.overcastPic " height="25">
                <div style="font-size:18px;">{{weatherData.today.type}} / {{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.date}}</div>
                    <img :src="item.type == '晴' ? weatherPic.sunnyPic : item.type == '多云' ? weatherPic.cloudyPic : weatherPic.overcastPic " height="25">
                    <div style="color:#D0DAFF;font-size:15px;margin-top:5px;">{{(item.low.slice(3,6)) + '-' +(item.high.slice(3,6))}}</div>
                </div>
            </div>
            <div class="todayWeather3">
                <img src="../../../../assets/images/cutGraph/fengli1.png" height="45">
                <div>风力：{{weatherData.today.fengli.slice(9,10)}}级</div>
                <div>
                    <div>温度：{{(parseInt(weatherData.today.high.slice(3,5)) +  parseInt(weatherData.today.low.slice(3,5))) / 2}}℃</div>
                    <div>湿度：{{(parseInt(weatherData.today.high.slice(3,5)) +  parseInt(weatherData.today.low.slice(3,5))) / 2}}%</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 {
            DPcomputer6BoxTimer:null,
            //时间
            currentTime:{
                day:'',
                month:'',
                year:'',
            },
            //天气图片
            weatherPic:{
                sunnyPic:sunnyPic,
                cloudyPic:cloudyPic,
                overcastPic:overcastPic,
            },
            //天气数据
            weatherData:{
                forecastData:[],
                today:{
                    high:'高温 10℃',
                    low:'高温 10℃',
                    type:'多云',
                    fengli:'<![CDATA[0级]]>',
                },
            },
        }
    },
    mounted(){
        this.loadData();
    },
    methods:{
        loadData(){
            this.dayCurrentTimeFn();
            this.monthCurrentTimeFn();
            this.yearCurrentTimeFn();

            //获取天气
            HttpReq.truckDispatching.getWeatherInforQuery({cityName:'济南'}).then((res) => {
                if(res.code == 200 && res.msg){
                    let data1 = JSON.parse(res.msg).data.forecast;
                    this.weatherData.forecastData = data1;
                    this.weatherData.today = data1[0];
                }
            })

            this.DPcomputer6BoxTimer = setInterval(() => {
                //获取天气
                HttpReq.truckDispatching.getWeatherInforQuery({cityName:'济南'}).then((res) => {
                    if(res.code == 200 && res.msg){
                        let data1 = JSON.parse(res.msg).data.forecast;
                        this.weatherData.forecastData = data1;
                        this.weatherData.today = data1[0];
                    }
                }) 
            },10000)
            
        },
        //获取当前时间
		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(){
        if(this.DPcomputer6BoxTimer) {
			clearInterval(this.DPcomputer6BoxTimer);
            this.DPcomputer6BoxTimer = null;
		}
    }
}
</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>