<template>
	<view class="tainer">
		<view class="themeBox">
			<view class="themeBoxText">
				<view class="themeBoxTextMain">
					<text>体温记录</text>
				</view>
				<view class="themeBoxTextContext">
					<text>实时测量，安全健康</text>
				</view>
			</view>
		</view>
		<view class="card">
			<view class="screen">
				<view class="screenItem" @click="classShow=true">
					<view class="screenText">
						<text>{{className}}</text>
					</view>
					<view class="screenImg">
						<image src="../../../static/images/pullDown.png" mode=""></image>
					</view>
				</view>
				<van-action-sheet v-model="classShow" :actions="actions" @select="onSelect" />
				<view class="screenItem" @click="dateShow=true">
					<view class="screenText">
						<text class="screenDate">{{selectDate}}</text>
					</view>
					<view class="screenImg">
						<image src="../../../static/images/pullDown.png" mode=""></image>
					</view>
				</view>
				<van-calendar v-model="dateShow" :min-date="minDate" :max-date="maxDate" @confirm="onConfirm" />
			</view>
			<view class="timeSelect">
				<view class="timeSelectItem" :class="timeSelect==1?'active':''" @tap="timeSelectTap(1)">
					<text>上午</text>
				</view>
				<view class="timeSelectItem" :class="timeSelect==2?'active':''" @tap="timeSelectTap(2)">
					<text>下午</text>
				</view>
				<view class="timeSelectItem" :class="timeSelect==3?'active':''" @tap="timeSelectTap(3)">
					<text>晚上</text>
				</view>
			</view>
			<view class="timeSelectResults">
				<view class="timeSelectResultsItem timeSelectResultsItem_one" @tap="temperatrue(1)">
					<view class="timeSelectResultsItemTheme">
						<text>正常人数</text>
					</view>
					<view class="timeSelectResultsItemNumber">
						<text class="specificNumber">{{numObj.normalTemperatrueNum}}</text>人
					</view>
				</view>
				<view class="timeSelectResultsItem timeSelectResultsItem_two" @tap="temperatrue(2)">
					<view class="timeSelectResultsItemTheme">
						<text>高温人数</text>
					</view>
					<view class="timeSelectResultsItemNumber">
						<text class="specificNumber">{{numObj.highTemperatrueNum}}</text>人
					</view>
				</view>
			</view>
			<view class="timeSelectResults timeSelectResults_two">
				<view class=" timeSelectResultsItem timeSelectResultsItem_three" @tap="temperatrue(3)">
					<view class=" timeSelectResultsItemTheme">
						<text>低温人数</text>
					</view>
					<view class="timeSelectResultsItemNumber">
						<text class="specificNumber">{{numObj.lowTemperatureNum}}</text>人
					</view>
				</view>
				<view class="timeSelectResultsItem timeSelectResultsItem_four" @tap="temperatrue(4)">
					<view class="timeSelectResultsItemTheme">
						<text>未检测人数</text>
					</view>
					<view class="timeSelectResultsItemNumber">
						<text class="specificNumber">{{numObj.noTemperatureNum}}</text>人
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	var gHost = "https://" + window.location.host;
	if (window.location.protocol != "https:") {
		gHost = "https://fpdev.xiaopay.net";
	}
	//获取参数
	function getQueryParams(params) {
		let href = window.location.href
		let query = href.substring(href.indexOf('?') + 1);
		let vars = query.split("&");
		for (var i = 0; i < vars.length; i++) {
			let pair = vars[i].split("=");
			if (pair[0] == params) {
				return pair[1];
			}
		}
		return (false);
	}
	export default {
		name: 'TemperatureStatistics',
		data() {
			return {
				// 日期选择
				dateShow: false,
				selectDate: '',
				minDate: new Date('1970/01/01'),
				maxDate: new Date(),
				// 年级班级选择
				classShow: false,
				className: '',
				actions: [],
				selectClass: {},
				timeSelect: 1,
				numObj: {},
			}
		},
		mounted() {
			this.selectDate = this.formatDate(new Date());
			this.queryClassListByTeacher().then(
				() => {
					this.className = this.actions[0].name;
					this.statisGradeOrClassTemperature();
				}
			);
		},
		methods: {
			// 时段选择
			timeSelectTap: function(index) {
				this.timeSelect = index;
				this.statisGradeOrClassTemperature();
			},
			formatDate(date) {
				return `${date.getFullYear()}-${date.getMonth()<9?'0'+(date.getMonth()+1):date.getMonth()+1}-${date.getDate()<10?'0'+date.getDate():date.getDate()}`;
			},
			// 日期选择
			onConfirm(date) {
				this.dateShow = false;
				this.selectDate = this.formatDate(date);
				this.statisGradeOrClassTemperature();
			},
			// 年级班级选择
			onSelect(className) {
				this.classShow = false;
				this.className = className.name;
				this.selectClass = className;
				this.statisGradeOrClassTemperature();
			},
			// 获取教师管理的班级
			async queryClassListByTeacher() {
				try {
					let data = await this.$http.get({
						url: gHost + '/ACAPI/applet/database/queryClassListByTeacher'
					}, {
						schoolId: getQueryParams('schoolId'),
						teacherId: getQueryParams('teacherId'),
					})
					if (data.code != 200) {
						uni.showToast({
							icon: "none",
							mask: true,
							title: data.msg
						})
						this.actions = []
						return
					}

					if (data.obj && Array.isArray(data.obj)) {
						var tmpArr = data.obj.map(e => e.gradeName + e.className)
						var arr = [];
						for (var i = 0; i < tmpArr.length; i++) {
							var j = {};
							j.name = tmpArr[i];
							arr.push(j);
						}
						this.actions = (arr || []).map((item, index) => {
							return {
								...item,
								...data.obj[index]
							}
						})
						this.selectClass = this.actions[0];
					} else {
						this.actions = []
					}

				} catch (e) {
					//TODO handle the exception
					console.log(e);
					uni.showToast({
						icon: "none",
						mask: true,
						title: e.message
					})
				}
			},
			// 体温统计
			async statisGradeOrClassTemperature() {
				try {
					let data = await this.$http.get({
						url: gHost + '/ACAPI/applet/temperature-staits/statisGradeOrClassTemperature'
					}, {
						classId: this.selectClass.classId,
						gradeId: this.selectClass.gradeId,
						startTime: this.selectDate,
						endTime: this.selectDate,
						schoolId: getQueryParams('schoolId'),
						temperatureInterval: this.timeSelect
					})
					if (data.code != 200) {
						uni.showToast({
							icon: "none",
							mask: true,
							title: data.msg
						})
						return
					}
					if (data.obj && Array.isArray(data.obj)) {
						this.numObj = data.obj.length ? data.obj[0] : {}
					}
				} catch (e) {
					//TODO handle the exception
					console.log(e);
					uni.showToast({
						icon: "none",
						mask: true,
						title: e.message
					})
				}
			},
			// 体温详情
			temperatrue(num) {
				try {
					uni.setStorageSync("temperatrueRequestInfo", {
						classId: this.selectClass.classId,
						gradeId: this.selectClass.gradeId,
						registDate: this.selectDate,
						schoolId: getQueryParams('schoolId'),
						temperatureInterval: this.timeSelect
					})
					let url = '../NormalTemperatrue/NormalTemperatrue';
					switch (num) {
						case 2:
							url = '../HighTemperature/HighTemperature';
							break;
						case 3:
							url = '../LowTemperature/LowTemperature';
							break;
						case 4:
							url = '../Undetected/Undetected';
							break;
					}

					uni.navigateTo({
						url
					})
				} catch (e) {
					//TODO handle the exception
					console.log(e);
				}
			},
		},
	}
</script>

<style lang="scss" scope>
	page {
		background: linear-gradient(0deg, #F7F9FC, #FFFFFF);
	}

	.tainer {
		.themeBox {
			height: 221rpx;
			background: url(../../../static/images/temperatureRecords.png) center -152rpx no-repeat;
			background-size: cover;
			padding: 66rpx 32rpx 0;
			box-sizing: border-box;

			.themeBoxText {
				.themeBoxTextMain {
					font-size: 42rpx;
					font-family: Alibaba PuHuiTi 2.0;
					font-weight: normal;
					color: #FFFFFF;
				}

				.themeBoxTextContext {
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #D9F9EE;
				}
			}
		}

		.card {
			padding: 0 32rpx 0;
			box-sizing: border-box;
			position: absolute;
			top: 189rpx;
			width: 100%;
			height: 88.4%;
			background: linear-gradient(0deg, #F7F9FC, #FFFFFF);
			border-radius: 32rpx 32rpx 0rpx 0rpx;

			.screen {
				height: 136rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.screenItem {
					width: 327rpx;
					height: 72rpx;
					background: #F3F5F6;
					border-radius: 16rpx;
					display: flex;
					justify-content: center;
					align-items: center;

					.screenText {
						font-family: PingFang SC;
						font-weight: 500;
						color: #333333;
						margin: 0 10rpx 0 0;

						.screenDate {
							font-family: DIN;
						}
					}

					.screenImg {
						width: 14rpx;
						height: 8rpx;
						display: flex;
						justify-content: center;

						image {
							width: 100%;
							height: 100%;
						}
					}
				}

				/deep/ .van-calendar__popup.van-popup--bottom,
				.van-calendar__popup.van-popup--top {
					height: 60% !important;
				}
			}

			.timeSelect {
				width: 100%;
				height: 72rpx;
				background: #F3F5F6;
				border-radius: 16rpx;
				display: flex;
				justify-content: space-around;
				margin: 32rpx 0 40rpx;

				.timeSelectItem {
					width: 33%;
					display: flex;
					justify-content: center;
					align-items: center;

					&.active {
						width: 33%;
						height: 64rpx;
						margin-top: 4rpx;
						background: #FFFFFF;
						border-radius: 16rpx;
						font-weight: bold;
						color: #01CB88;
					}
				}
			}

			.timeSelectResults {
				display: flex;
				justify-content: space-between;

				.timeSelectResultsItem {
					width: 328rpx;
					height: 168rpx;
					border-radius: 24rpx;
					padding: 30rpx 0 37rpx 31rpx;
					box-sizing: border-box;

					&.timeSelectResultsItem_one {
						background: no-repeat center/100% url(../../../static/images/normalTemperature.png);
					}

					&.timeSelectResultsItem_two {
						background: no-repeat center/100% url(../../../static/images/highTemperature.png);
					}

					&.timeSelectResultsItem_three {
						background: no-repeat center/100% url(../../../static/images/lowTemperature.png);
					}

					&.timeSelectResultsItem_four {
						background: no-repeat center/100% url(../../../static/images/undetected.png);
					}

					.timeSelectResultsItemTheme {
						font-size: 28rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #333333;
					}

					.timeSelectResultsItemNumber {
						font-size: 24rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #333333;

						.specificNumber {
							font-size: 48rpx;
							font-family: DIN;
							margin: 0 10rpx 0 0;
						}
					}
				}

				&.timeSelectResults_two {
					margin-top: 36rpx;
				}
			}
		}
	}
</style>
