<template>
	<view class="content">
		<!-- <view class="title">天气</view> -->
		<!-- <back :info="info"></back> -->
		<view class="tianqi">
			<view class="view1">
				<view class="view1_li view1_li1">
					<text class="date">{{ date1 }}</text>
					<!-- <text class="date">{{ date2 }}</text> -->
					<text class="date">{{ date3 }}</text>
				</view>
				<view class="view1_li view1_li2">
					<view class="left">
						<text class="t1">{{ alldata.now.tmp }}</text>
						<text class="t2">℃</text>
					</view>
					<view class="right">
						<image class="img" :src="$gettqimg(alldata.now.cond_code)" mode=""></image>
					</view>
				</view>
				<view class="view1_li view1_li3">
					<text class="title">{{ alldata.now.cond_txt }}</text>
				</view>
				<view class="view1_li view1_li4">
					<text class="kqzl1">空气质量：</text>
					<text class="kqzl2">{{ alldata.aqi.city.aqi }}</text>
					<text class="kqzl3">空气{{ alldata.aqi.city.qlty }}</text>
				</view>
			</view>
			<view class="viewyj" v-if="yjxx.length>0">
				<view class="mintitle">气象预警</view>
				<swiper :autoplay="true" :interval="3000" :duration="1000">
					<swiper-item v-for="(el,ind) in yjxx">
						<view class="swiper-item">{{el.content}}</view>
					</swiper-item>
				</swiper>
			</view>
			<view class="line"></view>
			<view class="view2">
				<view class="mintitle">24小时天气</view>
				<view class="qiun-charts">
					<canvas canvas-id="canvasLineA" id="canvasLineA" class="charts" disable-scroll=true
						@touchstart="touchLineA" @touchmove="moveLineA" @touchend="touchEndLineA"></canvas>
				</view>
			</view>
			<view class="line"></view>
			<view class="view3">
				<ul>
					<li class="view3_li" v-for="(el, index) in view3data">
						<view class="view3_libox">
							<view class="l1">{{el.date}}</view>
							<view class="l2">{{el.title}}</view>
							<view class="l3">
								<image class="img" :src="$gettqimg(el.img)" mode=""></image>
							</view>
							<view class="l4">{{el.wind_dir}}</view>
							<view class="l5">{{el.wind_sc}}</view>
						</view>
					</li>
				</ul>
				<view class="qiun-charts2">
					<canvas canvas-id="canvasLineA2" id="canvasLineA2" class="charts"
						@touchstart="touchLineA2"></canvas>
				</view>
			</view>
			<view class="line"></view>
			<view class="view4">
				<ul>
					<li class="view4_li" v-for="(el, index) in view4data">
						<view class="view4_libox">
							<view class="view4_li_l">
								<image class="img" :src="getImg1(el.img)" mode=""></image>
							</view>
							<view class="view4_li_r">
								<view class="v1">{{ el.name }}</view>
								<view class="v2">{{ el.data }}</view>
							</view>
						</view>
					</li>
				</ul>
			</view>
		</view>
		

		<tabBar :info="infos"></tabBar>
	</view>
</template>

<script>
	import back from '@/components/html/back.vue';
	import tabBar from '@/components/html/tabBar.vue';
	var web = require('@/components/utils/request.js');
	var util = require('@/components/utils/util.js');
	import uCharts from '@/js_sdk/u-charts/u-charts/u-charts.js';

	var _self;
	var canvaPie = null;
	var color = ['#00DB77', '#FF9024', '#FF4824'];
	var zcolor = ['#22A86C', '#E68320', '#E64120'];
	var canvaLineA = null;
	var canvaLineA2 = null;
	export default {
		components: {
			tabBar,
			back
		},
		data() {
			return {
				info: {
					color: false,
					num: false
				},
				infos: {
					ind: 0,
					color: false
				},
				nowDate: '',
				jqdatas: [],
				kcj: 0,
				kcc: 0,
				jcj: 0,
				jcc: 0,
				hcj: 0,
				hcc: 0,
				// 天气
				alldata: {
					now: {
						cond_code: "",
						cond_txt: "",
						tmp: "",
						wind_dir: "",
						wind_sc: ""
					},
					aqi: {
						city: ''
					}
				},
				data: {},
				nowdate: '',
				date1: '',
				date2: '',
				date3: '',
				view3data: [],
				view4data: [{
						name: '风力等级',
						img: 'tq-icon3.png',
						data: ''
					},
					{
						name: 'PM2.5',
						img: 'tq-icon1.png',
						data: ''
					},
					{
						name: '湿度',
						img: 'tq-icon6.png',
						data: ''
					},
					{
						name: '气压',
						img: 'tq-icon5.png',
						data: ''
					},
					{
						name: '出游',
						img: 'tq-icon2.png',
						data: ''
					},
					{
						name: '空气污染扩散',
						img: 'tq-icon4.png',
						data: ''
					}
				],
				cWidth: '',
				cHeight: '',
				pixelRatio: 1,
				cWidth2: '',
				cHeight2: '',
				pixelRatio2: 1,
				yjxx: []
			}
		},
		onLoad() {
			var date = new Date();
			this.nowDate = date.getFullYear() + "-" + ((date.getMonth() + 1) < 10 ? "0" + (date.getMonth() + 1) : (date
				.getMonth() + 1)) + "-" + (date.getDate() < 10 ? "0" + date.getDate() : date.getDate());
			this.getData3();
			this.getData4();
			_self = this;
			// uni.upx2px(750) 这是uni-app自带的自适应，以750的尺寸为基准。动态变化
			this.cWidth = uni.upx2px(750);
			this.cHeight = uni.upx2px(250);
			this.cWidth2 = uni.upx2px(750);
			this.cHeight2 = uni.upx2px(170);
			this.getWeather();
		},
		onPageScroll(e) {
			if (e.scrollTop > 50 && !this.info.num) {
				this.info.num = true;
			}
			if (e.scrollTop < 50 && this.info.num) {
				this.info.num = false;
			}
		},
		methods: {
			
			// 天气
			getNowdata(nowdate) {
				var url = 'weatherInfo/day_data.jspx';
				var para = {
					time: nowdate
				};
				var that = this;
				web.httpPost(that, url, para, function(res) {
					console.log(res.data.data)
					let LineA = {
						categories: [],
						series: []
					};
					//这里我后台返回的是数组，所以用等于，如果您后台返回的是单条数据，需要push进去
					// 自己可以定义数据
					LineA.categories = [];
					LineA.series = [{
						name: "气温",
						data: [],
						color: '#409eff'
					}];
					for (var i = 0; i < res.data.data.length; i++) {
						LineA.categories.push(res.data.data[i].time + ':00')
						LineA.series[0].data.push(parseInt(res.data.data[i].now))
					}

					// LineA.categories=['00:00','01:00','02:00','03:00','04:00','05:00'];
					// LineA.series=[{
					// 	name:"南京",
					// 	data:[12,15,10,18,6,13],
					// 	color:'#409eff'
					// }];
					// LineA.categories=res.data.data.LineA.categories;
					// LineA.series=res.data.data.LineA.series;
					// 找到id为canvasLineA的块
					that.showLineA("canvasLineA", LineA);

				});
			},
			getWeather() {
				var url = '/weatherInfo/getWeatherInfo.jspx';
				var para = {};
				var that = this;
				web.httpPost(that, url, para, function(res) {
					if (res.data.status == 200) {
						that.alldata = res.data.allData.HeWeather6[0];
						that.data = res.data.data;

						that.date1 = that.data.date.substr(5, 2) + '月' + that.data.date.substr(8, 2) + '日';
						that.view4data[0].data = that.alldata.now.wind_sc + '级';
						that.view4data[1].data = that.alldata.aqi.city.pm25 + ' ug/m3';
						that.view4data[2].data = that.alldata.now.hum + '%';
						that.view4data[3].data = that.alldata.now.wind_sc + ' hPa';
						that.view4data[4].data = that.alldata.aqi.city.qlty;
						that.view4data[5].data = that.alldata.aqi.city.aqi;

						console.log(that.data.date);
						// var lunarDate = util.getLunarDate(that.data.date);
						// var lunarDateString = util.getLunarDateString(lunarDate);
						// that.date2 = '农历' + lunarDateString.month + '月' + lunarDateString.day;
						// var textnl = util.getLunarDate('2021-09-03');
						// console.log(textnl);

						var date = new Date();
						var week = web.getWeek(date);
						that.date3 = week;

						that.getNowdata(that.data.date);
						that.view3data = [];
						for (var i = 0; i < that.alldata.daily_forecast.length; i++) {
							that.view3data.push({
								date: that.alldata.daily_forecast[i].date.substr(5, 2) + '/' + that.alldata
									.daily_forecast[i].date.substr(8, 2),
								img: that.alldata.daily_forecast[i].cond_code_n,
								title: that.alldata.daily_forecast[i].cond_txt_n,
								wind_dir: that.alldata.daily_forecast[i].wind_dir,
								wind_sc: that.alldata.daily_forecast[i].wind_sc
							});
						}
						let LineA2 = {
							categories: [],
							series: []
						};
						// 自己可以定义数据
						LineA2.series = [{
							name: "最高",
							data: [],
							color: '#ff0000'
						}, {
							name: "最低",
							data: [],
							color: '#409eff'
						}];
						for (var i = 0; i < that.alldata.daily_forecast.length; i++) {
							LineA2.categories.push('')
							LineA2.series[0].data.push(that.alldata.daily_forecast[i].tmp_max);
							LineA2.series[1].data.push(that.alldata.daily_forecast[i].tmp_min);
						}
						that.showLineA2("canvasLineA2", LineA2);

					}
				});
			},
			
			getImg1(url) {
				return 'https://cs.tour-ma.com/r/cms/www/m/changshu/' + url;
			},
			
			// 展示图标的函数 接收参数，一个块的id,一个数据
			showLineA(canvasId, chartData) {
				canvaLineA = new uCharts({
					$this: _self,
					canvasId: canvasId,
					// 图标类型
					type: 'line',
					fontSize: 11,
					padding: [20, 25, 4, 5],
					legend: {
						show: false
					},
					dataLabel: true,
					dataPointShape: true,
					background: '#F6F6F6',
					pixelRatio: _self.pixelRatio,
					categories: chartData.categories,
					series: chartData.series,
					animation: true,
					enableScroll: true, //开启图表拖拽功能
					// x轴显示的内容
					xAxis: {
						type: 'grid',
						disableGrid: true,
						gridColor: '#CCCCCC',
						gridType: 'dash',
						dashLength: 8,
						itemCount: 6, //x轴单屏显示数据的数量，默认为5个
						scrollShow: true, //新增是否显示滚动条，默认false
						scrollAlign: 'left', //滚动条初始位置
						scrollBackgroundColor: '#F7F7FF', //默认为 #EFEBEF
						scrollColor: '#DEE7F7', //默认为 #A6A6A6
					},
					// y轴显示的内容
					yAxis: {
						gridType: 'dash',
						disableGrid: true,
						gridColor: '#CCCCCC',
						dashLength: 8,
						splitNumber: 5,
						format: val => {
							return val.toFixed(0) + '℃';
						}
					},
					width: _self.cWidth * _self.pixelRatio,
					height: _self.cHeight * _self.pixelRatio,
					extra: {
						line: {
							type: 'straight'
						}
					}
				});
			},
			showLineA2(canvasId, chartData) {
				canvaLineA2 = new uCharts({
					$this: _self,
					canvasId: canvasId,
					// 图标类型
					type: 'line',
					fontSize: 11,
					padding: [20, 35, 0, 0],
					legend: {
						show: false
					},
					dataLabel: true,
					dataPointShape: true,
					background: '#F6F6F6',
					pixelRatio: _self.pixelRatio2,
					categories: chartData.categories,
					series: chartData.series,
					animation: true,
					// x轴显示的内容
					xAxis: {
						disabled: true,
						disableGrid: true,
					},
					// y轴显示的内容
					yAxis: {
						disableGrid: true,
						disabled: true,
					},
					width: _self.cWidth2 * _self.pixelRatio2,
					height: _self.cHeight2 * _self.pixelRatio2,
					extra: {
						line: {
							type: 'straight'
						}
					}
				});
			},
			// 点击图表显示的内容
			touchLineA(e) {
				canvaLineA.scrollStart(e);
				// 使用声明的变量canvaLineA
				canvaLineA.showToolTip(e, {
					format: function(item, category) {
						return category + ' ' + item.name + ':' + item.data;
					}
				});
			},
			touchLineA2(e) {
				// 使用声明的变量canvaLineA
				canvaLineA2.showToolTip(e, {
					format: function(item, category) {
						return category + ' ' + item.name + ':' + item.data;
					}
				});
			},
			moveLineA(e) {
				canvaLineA.scroll(e);
			},
			touchEndLineA(e) {
				canvaLineA.scrollEnd(e);
			},
			getData3() {
				var url = '/tours/commonMethod.jspx';
				var para = {
					url: "http://gk.dtly.cn/hk/getByCarType.jspx",
					time: this.nowDate,
					state: 1
				};
				var that = this;
				web.httpPost(that, url, para, function(res) {
					if (res.data.status == 200) {
						for (var i = 0; i < res.data.data.length; i++) {
							if (res.data.data[i].carType == 1 || res.data.data[i].carType == 10 || res.data.data[i]
								.carType == 26) {
								that.kcj += res.data.data[i].count;
							} else if (res.data.data[i].carType == 3 || res.data.data[i].carType == 4 || res.data
								.data[i].carType == 9 || res.data.data[i].carType == 13 || res.data.data[i]
								.carType == 14 || res.data.data[i].carType == 23 || res.data.data[i].carType ==
								24 || res.data.data[i].carType == 35) {
								that.jcj += res.data.data[i].count;
							} else if (res.data.data[i].carType == 2 || res.data.data[i].carType == 5 || res.data
								.data[i].carType == 15 || res.data.data[i].carType == 16 || res.data.data[i]
								.carType == 17) {
								that.hcj += res.data.data[i].count;
							}
						}
					} else {
						uni.showToast({
							title: '查询失败'
						});
					}
				});
			},
			getData4() {
				var url = '/tours/commonMethod.jspx';
				var para = {
					url: "http://gk.dtly.cn/hk/getByCarType.jspx",
					time: this.nowDate,
					state: 2
				};
				var that = this;
				web.httpPost(that, url, para, function(res) {
					if (res.data.status == 200) {
						for (var i = 0; i < res.data.data.length; i++) {
							if (res.data.data[i].carType == 1 || res.data.data[i].carType == 10 || res.data.data[i]
								.carType == 26) {
								that.kcc += res.data.data[i].count;
							} else if (res.data.data[i].carType == 3 || res.data.data[i].carType == 4 || res.data
								.data[i].carType == 9 || res.data.data[i].carType == 13 || res.data.data[i]
								.carType == 14 || res.data.data[i].carType == 23 || res.data.data[i].carType ==
								24 || res.data.data[i].carType == 35) {
								that.jcc += res.data.data[i].count;
							} else if (res.data.data[i].carType == 2 || res.data.data[i].carType == 5 || res.data
								.data[i].carType == 15 || res.data.data[i].carType == 16 || res.data.data[i]
								.carType == 17) {
								that.hcc += res.data.data[i].count;
							}
						}
					} else {
						uni.showToast({
							title: '查询失败'
						});
					}
				});
			},
			getImg(url) {
				return 'https://cs.tour-ma.com/r/cms/www/m/changshu/' + url
			},
			showPie(canvasId, chartData) {
				new uCharts({
					$this: _self,
					canvasId: canvasId,
					type: 'arcbar',
					fontSize: 11,
					legend: {
						show: false
					},
					background: '#FFFFFF',
					pixelRatio: 1,
					series: chartData.series,
					colors: chartData.series[0].data < 40 ? [color[0]] : chartData.series[0].data < 70 ? [color[
						1]] : [color[2]],
					animation: true,
					width: 120,
					height: 120,
					dataLabel: true,
					title: {
						name: Math.round(chartData.series[0].data * 100) + '%', //这里我自动计算了，您可以直接给任意字符串
						color: chartData.series[0].data < 40 ? color[0] : chartData.series[0].data < 70 ? color[
							1] : color[2],
						fontSize: 18,
						offsetY: -2
					},
					subtitle: {
						name: chartData.series[0].name, //这里您可以直接给任意字符串
						color: chartData.series[0].data < 40 ? zcolor[0] : chartData.series[0].data < 70 ? zcolor[
							1] : zcolor[2],
						fontSize: 15,
						offsetY: 2
					},
					extra: {
						arcbar: {
							type: 'circle', //整圆类型进度条图
							width: 10, //圆弧的宽度
							startAngle: 1.5, //整圆类型只需配置起始角度即可
							backgroundColor: '#EFF3F7'
						}
					}
				});
			},
			touchPie(e) {
				canvaPie.showToolTip(e, {
					format: function(item) {
						return item.name + ':' + item.data
					}
				});
			}
		}
	}
</script>

<style lang="scss">
	$twidth:702upx;
	$klwidth:622upx;
	$klheight:250upx;
	$right:200upx;
	$rheight:210upx;

	swiper {}

	.swiper-item {
		width: 100%;
		height: 100%;
		font-size: 24rpx;
		color: #666666;
	}

	.viewyj {
		width: 90%;
		padding: 0% 5% 0% 5%;

		.mintitle {
			color: #333333;
			font-size: 30rpx;
			font-weight: 600;
			display: flex;
			align-items: center;
			margin-bottom: 15rpx;
		}

		.mintitle::before {
			content: '';
			display: inline-block;
			width: 36rpx;
			height: 32rpx;
			background: url(https://cs.tour-ma.com/r/cms/www/m/changshu/icon-qxyj.png) no-repeat;
			background-size: 100% auto;
			margin-right: 5rpx;
		}
	}

	.title {
		font-size: 50upx;
		font-family: Microsoft YaHei;
		font-weight: 600;
		color: #230F00;
		line-height: 56upx;
		width: $twidth;
		margin-top: 60upx;
		margin-bottom: 50upx;
	}

	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		background: #F6F6F6;
		padding-bottom: 100upx;
		overflow-x: hidden;
	}


	.tianqi {
		.view1 {
			width: 100%;
			background: url(https://cs.tour-ma.com/r/cms/www/m/changshu/tq-view1-bg.png) no-repeat;
			background-size: 100% 100%;
			object-fit: cover;
			height: 360rpx;
			padding-top: 140rpx;
			padding-bottom: 40rpx;
			position: relative;
		}

		.view1_li {
			padding-left: 60rpx;
			padding-right: 60rpx;
		}

		.view1_li1 .date {
			margin-right: 30rpx;
			color: #666666;
			font-size: 30rpx;
		}

		.view1_li2 {
			display: flex;
			justify-content: space-between;
			align-items: center;
		}

		.view1_li2 .left {
			color: #000000;
		}

		.view1_li2 .left .t1 {
			font-size: 100rpx;
		}

		.view1_li2 .left .t2 {
			font-size: 60rpx;
		}

		.view1_li2 .right {
			width: 148rpx;
			height: 148rpx;
		}

		.view1_li2 .right .img {
			width: 100% !important;
			height: 100% !important;
		}

		.view1_li3 .title {
			color: #666666;
			font-size: 30rpx;
		}

		.view1_li4 .kqzl1 {
			margin-right: 15rpx;
			color: #666666;
			font-size: 30rpx;
		}

		.view1_li4 .kqzl1::before {
			content: '';
			display: inline-block;
			width: 24rpx;
			height: 24rpx;
			background: url(https://cs.tour-ma.com/r/cms/www/m/changshu/tq-icon-kqzl.png) no-repeat;
			background-size: 100% auto;
			margin-right: 10rpx;
		}

		.view1_li4 .kqzl2 {
			margin-right: 30rpx;
			color: #666666;
			font-size: 30rpx;
		}

		.view1_li4 .kqzl3 {
			margin-right: 30rpx;
			color: #11b954;
			font-size: 30rpx;
		}

		.view4 {
			width: calc(100% - 50rpx);
			padding: 40rpx 25rpx;
		}

		.view4 .view4_li {
			width: 50%;
			display: inline-block;
		}

		.view4 .view4_li .view4_libox {
			display: flex;
			justify-content: start;
			align-items: center;
			border-bottom: 1rpx solid #ebebeb;
			border-right: 1rpx solid #ebebeb;
			padding: 30rpx 0;
		}

		.view4 .view4_li:nth-last-child(1) .view4_libox,
		.view4 .view4_li:nth-last-child(2) .view4_libox {
			border-bottom: none;
		}

		.view4 .view4_li:nth-child(2n) .view4_libox {
			border-right: none;
		}

		.view4_li .view4_li_l {
			width: 72rpx;
			height: 72rpx;
			padding-left: 40rpx;
			padding-right: 25rpx;
		}

		.view4_li .view4_li_l .img {
			width: 100%;
			height: 100%;
		}

		.view4_li .view4_li_r {}

		.view4_li .view4_li_r .v1 {
			color: #a0a0a0;
			font-size: 27rpx;
		}

		.view4_li .view4_li_r .v2 {
			color: #333333;
			font-size: 27rpx;
		}

		.view2 {
			width: 90%;
			padding: 0% 5% 5% 5%;
		}

		.view2 .mintitle {
			color: #333333;
			font-size: 30rpx;
			font-weight: 600;
			display: flex;
			align-items: center;
		}

		.view2 .mintitle::before {
			content: '';
			display: inline-block;
			width: 30rpx;
			height: 30rpx;
			background: url(https://cs.tour-ma.com/r/cms/www/m/changshu/icon-24h.png) no-repeat;
			background-size: 100% auto;
			margin-right: 5rpx;
		}

		.view3 {
			padding: 2.5% 5%;
			position: relative;
		}

		.view3 ul {
			display: flex;
			justify-content: space-between;
			align-items: center;
		}

		.view3 ul li.view3_li {
			margin: 0 10rpx;
		}

		.view3 ul li.view3_li .view3_libox {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
		}

		.view3_libox .l1 {
			color: #515151;
			font-size: 25rpx;
		}

		.view3_libox .l2 {
			color: #515151;
			font-size: 25rpx;
		}

		.view3_libox .l3 {
			width: 50rpx;
			height: 50rpx;
		}

		.view3_libox .l3 .img {
			width: 100%;
			height: 100%;
		}

		.view3_libox .l4 {
			color: #515151;
			font-size: 25rpx;
			margin-top: 170rpx;
		}

		.view3_libox .l5 {
			color: #A2A2A2;
			font-size: 24rpx;
		}

		/*样式的width和height一定要与定义的cWidth和cHeight相对应*/
		.qiun-charts {
			width: 100%;
			height: 250rpx;
			// background-color: #FFFFFF;
		}

		.qiun-charts2 {
			width: 90%;
			height: 170rpx;
			// background-color: #FFFFFF;
			position: absolute;
			top: 150rpx;
			left: 5%;
		}

		.charts {
			width: 100%;
			height: 100%;
			// background-color: #FFFFFF;
		}

		.line {
			width: 100%;
			height: 23rpx;
			background-color: #f6f6f6;
		}

	}

</style>
