<template>
	<view class="tainer">
		<view class="school-report-header">
			<view class="school-report-header-item">
				<view class="user-avatar">
				</view>
				<view class="user-info">
					<view class="user-name">
						<text>宁哲言</text>
					</view>
					<view class="class-name">
						<text>三年级 2班</text>
					</view>
				</view>
			</view>
			<view class="school-report-header-item">
				<view class="school-report-screen">
					<view class="school-report-screen-item">
						<view class="school-report-type">
							<picker @change="schoolReportChange" :value="reportTypeIndex" :range="reportTypeArr">
								<view class="uni-input">{{reportTypeArr[reportTypeIndex]}}</view>
							</picker>
						</view>
						<view class="triangle">
						</view>
					</view>
					<view class="school-report-screen-item-two">
						<view class="school-report-date">
							<picker @change="dataRangeChange" :value="dataRangeIndex" :range="dataRangeArr"
								range-key="week">
								<view class="uni-input">{{dataRangeArr[dataRangeIndex].weekstr||""}}</view>
							</picker>
						</view>
						<view class="triangle">
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="school-report-context">
			<view class="school-report-context-tab">
				<view class="school-report-context-tab-item">
					<view class="school-report-context-tab-item-one active">
						<text>消费报告</text>
					</view>
					<view class="school-report-context-tab-item-one">
						<text>门禁报告</text>
					</view>
					<view class="school-report-context-tab-item-one">
						<text>公话报告</text>
					</view>
				</view>
				<view class="school-report-context-tab-item-two">
					<view class="share-button">
						<view class="share-button-img">
						</view>
						<view class="share-button-txt">
							<text>分享</text>
						</view>
					</view>
				</view>
			</view>
			<view class="school-report-context-bgImg">
			</view>
			<view class="school-report-context-card">
				<view class="school-report-context-card-one">
					<view class="school-report-context-card-one-img">
					</view>
					<view class="school-report-context-card-one-context">
						<view class="school-report-context-card-one-context-item">
							<view class="school-report-context-card-one-context-dot">
								<view class="school-report-context-card-one-context-dot-item">
								</view>
							</view>
							<view class="school-report-context-card-one-context-txt">
								共<text class="txt-important">5</text>次未吃晚餐,请提醒<text class="txt-important">宁哲言</text>
								晚餐好好吃,身体才能更健康
							</view>
						</view>
						<view class="school-report-context-card-one-context-item">
							<view class="school-report-context-card-one-context-dot">
								<view class="school-report-context-card-one-context-dot-item">
								</view>
							</view>
							<view class="school-report-context-card-one-context-txt">
								食堂消费占比<text class="txt-important-two">过低</text>,请及时调整饮食习惯
							</view>
						</view>
						<view class="school-report-context-card-one-context-item">
							<view class="school-report-context-card-one-context-dot">
								<view class="school-report-context-card-one-context-dot-item">
								</view>
							</view>
							<view class="school-report-context-card-one-context-txt">
								消费总额 <text class="txt-important">990</text>元,超过全校 <text class="txt-important">80%</text>
								的同学,请及时评估生活费是否合理
							</view>
						</view>
						<view
							class="school-report-context-card-one-context-item school-report-context-card-one-context-item-last">
							<view class="school-report-context-card-one-context-dot">
								<view class="school-report-context-card-one-context-dot-item">
								</view>
							</view>
							<view class="school-report-context-card-one-context-txt">
								<text class="txt-important-two">12月17日、12月22日</text>的消费金额存在异常,请及时关注
							</view>
						</view>
					</view>
				</view>

				<view class="school-report-context-card-two">
					<view class="school-report-context-card-title">
						<view class="school-report-context-card-title-img">
							<text>就餐情况</text>
						</view>
					</view>
					<view class="school-report-context-card-two-conclusion">
						<view class="school-report-context-card-two-conclusion-txt">
							<text>本月共<text class="abnormal-days">5</text>天就餐异常</text>
						</view>
						<view class="school-report-context-card-two-conclusion-logo">
							<view class="school-report-context-card-two-conclusion-logo-item">
								<view class="school-report-context-card-two-conclusion-logo-item-dot">
								</view>
							</view>
							<view
								class="school-report-context-card-two-conclusion-logo-item school-report-context-card-two-conclusion-logo-item-right">
								<text>未就餐</text>
							</view>
						</view>
					</view>
					<view class="school-report-context-card-two-calendar">
						<van-calendar :min-date="minDate" :max-date="maxDate" :default-date="minDate" :row-height="44" :show-title="false" :show-subtitle="false"
							:show-mark="false" :poppable="false" :show-confirm="false" :style="{ height: '575rpx' }" />
					</view>
					<view class="school-report-context-card-two-details">
						<view class="school-report-context-card-two-details-item">
							<view class="school-report-context-card-two-details-date">
								<text>12月26日</text>
							</view>
							<view class="school-report-context-card-two-details-meal">
								<view class="school-report-context-card-two-details-meal-txt">
									<text>早餐</text>
								</view>
								<view class="school-report-context-card-two-details-meal-logo">
									<view class="school-report-context-card-two-details-meal-img">
										<image src="../../static/images/eatted.png" mode=""></image>
									</view>
								</view>
								<view class="school-report-context-card-two-details-meal-txt">
									<text>中餐</text>
								</view>
								<view
									class="school-report-context-card-two-details-meal-logo school-report-context-card-two-details-meal-logo-two">
									<view class="school-report-context-card-two-details-meal-noeat">
										<text>缺</text>
									</view>
								</view>
								<view class="school-report-context-card-two-details-meal-txt">
									<text>晚餐</text>
								</view>
								<view
									class="school-report-context-card-two-details-meal-logo school-report-context-card-two-details-meal-logo-three">
									<view class="school-report-context-card-two-details-meal-noeat">
										<text>缺</text>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="school-report-context-card-three">
					<view class="school-report-context-card-title">
						<view class="school-report-context-card-title-img">
							<text>消费偏好</text>
						</view>
					</view>
					<view class="school-report-context-card-three-conclusion">
						<view class="school-report-context-card-three-conclusion-item">
							<text>食堂消费占比<text
									class="school-report-context-card-three-conclusion-item-describe">过低</text>，请及时调整饮食习惯</text>
						</view>
					</view>
				</view>
				<view class="school-report-context-card-four">
					<view class="school-report-context-card-title">
						<view class="school-report-context-card-title-img">
							<text>消费总额</text>
						</view>
					</view>
					<view class="school-report-context-card-four-conclusion">
						<view class="school-report-context-card-four-conclusion-item">
							<text>消费总额<text class="consume-total">990</text>元，超过全校<text
									class="consume-total">80%</text>的同学，请及时评估生活费是否合理</text>
						</view>
					</view>
				</view>
				<view class="school-report-context-card-five">
					<view class="school-report-context-card-title">
						<view class="school-report-context-card-title-img">
							<text>消费趋势</text>
						</view>
					</view>
					<view class="school-report-context-card-five-conclusion">
						<view class="school-report-context-card-five-conclusion-item">
							<text><text class="abnormal-date">12月17日、12月22日</text>的消费金额存在异常，请及时关注</text>
						</view>
					</view>
				</view>
				<view class="school-report-footer">
					<view class="school-report-footer-item">
						<view class="school-report-footer-item-txt">
							<text>到期后将无法查看完整报告</text>
						</view>
						<view class="school-report-validity">
							<text>有效期至<text class="validity-date">2023年12月31日</text>,剩余<text
									class="validity-date">8天</text></text>
						</view>
					</view>
					<view class="school-report-footer-item-two">
						<view class="school-report-footer-item-btn">
							<text>延长权益</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	// 时间处理模块
	import dayjs from 'dayjs'
	export default {
		name: 'SchoolReport',
		data() {
			return {
				reportTypeIndex: 0,
				reportTypeArr: ['月报', '周报'],
				dataRangeIndex: 0,
				dataRangeArr: [{
					week: "",
					weekstr: "",
					startDate: "",
					endDate: ""
				}],
				minDate: new Date('1970/01/01'),
				maxDate: new Date(),
			}
		},
		mounted() {
			let tmpArr = []
			// 获取时间
			for (let i = 0; i <= 11; i++) {
				let startWeek = dayjs().subtract(i, 'month').startOf('month');
				let endWeek = dayjs().$d.getTime() > dayjs().subtract(i, 'month').endOf('month').$d.getTime() ? dayjs()
					.subtract(i, 'month').endOf('month') : dayjs();
				tmpArr.push({
					week: (startWeek.format("YYYY/MM/DD")) + '~' + (endWeek.format("YYYY/MM/DD")),
					weekstr: (startWeek.format("MM/DD")) + '~' + (endWeek.format("MM/DD")),
					startDate: startWeek.format("YYYY-MM-DD"),
					endDate: endWeek.format("YYYY-MM-DD")
				})
			}
			this.dataRangeArr = tmpArr
			this.minDate=new Date(this.dataRangeArr[this.dataRangeIndex].startDate);
			this.maxDate=new Date(this.dataRangeArr[this.dataRangeIndex].endDate);
		},
		methods: {
			schoolReportChange: function(e) {
				this.reportTypeIndex = e.target.value;
				this.getDataRangeArr(this.reportTypeIndex);
			},
			dataRangeChange: function(e) {
				this.dataRangeIndex = e.target.value;
				this.getDataRangeArr(this.reportTypeIndex);
			},
			getDataRangeArr: function(num) {
				if (num) {
					let tmpArr = []
					for (let i = 0; i <= 52; i++) {
						let startWeek = dayjs().subtract(i, 'week').startOf('week');
						let endWeek = dayjs().$d.getTime() > dayjs().subtract(i, 'week').endOf('week').$d.getTime() ?
							dayjs().subtract(i, 'week').endOf('week') : dayjs();
						tmpArr.push({
							week: (startWeek.format("YYYY/MM/DD")) + '~' + (endWeek.format("YYYY/MM/DD")),
							weekstr: (startWeek.format("MM/DD")) + '~' + (endWeek.format("MM/DD")),
							startDate: startWeek.format("YYYY-MM-DD"),
							endDate: endWeek.format("YYYY-MM-DD")
						})
					}
					this.dataRangeArr = tmpArr;
					this.minDate=new Date(this.dataRangeArr[this.dataRangeIndex].startDate);
					this.maxDate=new Date(this.dataRangeArr[this.dataRangeIndex].endDate);
				} else {
					let tmpArr = []
					for (let i = 0; i <= 11; i++) {
						let startWeek = dayjs().subtract(i, 'month').startOf('month');
						let endWeek = dayjs().$d.getTime() > dayjs().subtract(i, 'month').endOf('month').$d.getTime() ?
							dayjs().subtract(i, 'month').endOf('month') : dayjs();
						tmpArr.push({
							week: (startWeek.format("YYYY/MM/DD")) + '~' + (endWeek.format("YYYY/MM/DD")),
							weekstr: (startWeek.format("MM/DD")) + '~' + (endWeek.format("MM/DD")),
							startDate: startWeek.format("YYYY-MM-DD"),
							endDate: endWeek.format("YYYY-MM-DD")
						})
					}
					this.dataRangeArr = tmpArr;
					this.minDate=new Date(this.dataRangeArr[this.dataRangeIndex].startDate);
					this.maxDate=new Date(this.dataRangeArr[this.dataRangeIndex].endDate);
				}
			},
		},
	}
</script>

<style lang="scss" scope>
	.tainer {
		.school-report-header {
			height: 88rpx;
			margin: 72rpx 0 48rpx 40rpx;
			display: flex;
			justify-content: space-between;

			.school-report-header-item {
				display: flex;

				.user-avatar {
					width: 88rpx;
					height: 88rpx;
					background: no-repeat center/100% url(../../static/images/avatar.png);
				}

				.user-info {
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					margin-left: 9rpx;

					.user-name {
						font-size: 34rpx;
						font-family: PingFangSC-Medium, PingFang SC;
						font-weight: 500;
						color: #1B1B1B;
					}

					.class-name {
						font-size: 28rpx;
						font-family: PingFangSC-Medium, PingFang SC;
						font-weight: 500;
						color: rgba(0, 0, 0, 0.25);
					}
				}

				.school-report-screen {
					display: flex;

					.school-report-screen-item {
						width: 156rpx;
						display: flex;
						justify-content: center;
						align-items: center;

						.school-report-type {
							font-size: 28rpx;
							font-family: PingFangSC-Medium, PingFang SC;
							font-weight: 500;
							color: #1B1B1B;
							margin-right: 12rpx;
						}

						.triangle {
							width: 21rpx;
							height: 10rpx;
							background: no-repeat center/100% url(../../static/images/grayTriangle.png);
						}
					}


					.school-report-screen-item-two {
						width: 270rpx;
						display: flex;
						justify-content: center;
						align-items: center;

						.school-report-date {
							font-size: 28rpx;
							font-family: PingFangSC-Medium, PingFang SC;
							font-weight: 500;
							color: #1B1B1B;
							margin-right: 17rpx;
						}

						.triangle {
							width: 21rpx;
							height: 10rpx;
							background: no-repeat center/100% url(../../static/images/grayTriangle.png);
						}
					}
				}
			}
		}

		.school-report-context {
			.school-report-context-tab {
				height: 84rpx;
				padding-left: 40rpx;
				box-sizing: border-box;
				display: flex;
				justify-content: space-between;

				.school-report-context-tab-item {
					display: flex;

					.school-report-context-tab-item-one {
						width: 172rpx;
						background: #F9F9F9;
						border-radius: 20rpx 20rpx 0rpx 0rpx;
						font-size: 30rpx;
						font-family: PingFangSC-Semibold, PingFang SC;
						font-weight: 600;
						color: rgba(0, 0, 0, 0.85);
						display: flex;
						justify-content: center;
						align-items: center;

						&.active {
							background: #E4F9F2;
						}
					}
				}

				.school-report-context-tab-item-two {
					width: 155rpx;
					margin: 8rpx 0 0;

					.share-button {
						width: 155rpx;
						height: 64rpx;
						background: rgba(4, 184, 113, .13);
						border-radius: 32rpx 0rpx 0rpx 32rpx;
						display: flex;
						justify-content: center;
						align-items: center;

						.share-button-img {
							width: 26rpx;
							height: 26rpx;
							background: no-repeat center/100% url(../../static/images/share.png);
							margin-right: 11rpx;
						}

						.share-button-txt {
							font-size: 28rpx;
							font-family: PingFangSC-Semibold, PingFang SC;
							font-weight: 600;
							color: #04B871;
						}
					}
				}
			}

			.school-report-context-bgImg {
				width: 100%;
				height: 452rpx;
				background: no-repeat center/100% url(../../static/images/consumeReportBg.png);
			}

			.school-report-context-card {
				width: 100%;
				background: #E5F8F1;
				padding: 0 30rpx;
				position: absolute;
				top: 654rpx;
				box-sizing: border-box;

				.school-report-context-card-one {
					width: 100%;
					height: 598rpx;
					background: #FFFFFF;
					border-radius: 16rpx;
					margin-bottom: 40rpx;

					.school-report-context-card-one-img {
						width: 428rpx;
						height: 428rpx;
						background: no-repeat center/100% url(../../static/images/consumeReport.png);
						position: absolute;
						top: -172rpx;
						left: 160rpx;
					}

					.school-report-context-card-one-context {
						width: 613rpx;
						margin: 0 30rpx 0 47rpx;
						position: absolute;
						top: 163rpx;

						.school-report-context-card-one-context-item {
							margin: 0 0 32rpx;
							display: flex;

							.school-report-context-card-one-context-dot {
								height: 40rpx;
								display: flex;
								align-items: center;

								.school-report-context-card-one-context-dot-item {
									width: 10rpx;
									height: 10rpx;
									background: #04B871;
									border-radius: 10rpx;
									margin-right: 16rpx;
								}
							}

							.school-report-context-card-one-context-txt {
								line-height: 40rpx;

								.txt-important {
									color: #04B871;
									margin: 0 4rpx;
								}

								.txt-important-two {
									color: #04B871;
								}
							}

							&.school-report-context-card-one-context-item-last {
								margin: 0;
							}
						}
					}
				}

				.school-report-context-card-title {
					height: 62rpx;
					display: flex;
					justify-content: center;

					.school-report-context-card-title-img {
						width: 318rpx;
						background: no-repeat center/100% url(../../static/images/cardBg.png);
						font-size: 32rpx;
						font-family: PingFangSC-Semibold, PingFang SC;
						font-weight: 600;
						color: rgba(0, 0, 0, 0.85);
						line-height: 45rpx;
						display: flex;
						justify-content: center;
						align-items: center;
					}
				}

				.school-report-context-card-two {
					height: 876rpx;
					background: #FFFFFF;
					border-radius: 16rpx;
					margin-bottom: 40rpx;

					.school-report-context-card-two-conclusion {
						height: 40rpx;
						padding: 0 40rpx 0 30rpx;
						box-sizing: border-box;
						margin: 40rpx 0 32rpx;
						display: flex;
						justify-content: space-between;
						font-size: 28rpx;
						font-family: PingFangSC-Medium, PingFang SC;
						font-weight: 500;
						color: rgba(0, 0, 0, 0.85);

						.school-report-context-card-two-conclusion-txt {
							.abnormal-days {
								color: #F9793F;
								margin: 0 5rpx;
							}
						}

						.school-report-context-card-two-conclusion-logo {
							display: flex;

							.school-report-context-card-two-conclusion-logo-item {
								font-size: 28rpx;
								font-family: PingFangSC-Medium, PingFang SC;
								font-weight: 500;
								color: #F9793F;
								display: flex;
								align-items: center;

								.school-report-context-card-two-conclusion-logo-item-dot {
									width: 12rpx;
									height: 12rpx;
									background: #F9793F;
									border-radius: 12rpx;
								}

								&.school-report-context-card-two-conclusion-logo-item-right {
									margin-left: 14rpx;
								}
							}
						}
					}

					.school-report-context-card-two-calendar {
						height: 575rpx;
						/deep/ .van-calendar__month-title{
							display: none;
						}
						/deep/ .van-calendar__days{
							margin: 10rpx 0 0;
						}
						/deep/ .van-calendar__day, .van-calendar__selected-day{
							margin:0 0 8rpx;
						}
						/deep/ .van-calendar__selected-day{
							background: rgba(0, 0, 0, .1);
							color: #F9793F;
						}
					}

					.school-report-context-card-two-details {
						height: 128rpx;
						background: no-repeat center/100% url(../../static/images/diningSituations.png);
						padding: 55rpx 42rpx 30rpx 29rpx;
						box-sizing: border-box;
						border-radius: 0 0 16rpx 16rpx;

						.school-report-context-card-two-details-item {
							display: flex;
							height: 43rpx;

							.school-report-context-card-two-details-date {
								width: 130rpx;
								height: 43rpx;
								border-radius: 4rpx;
								border: 1rpx solid #04B871;
								font-size: 28rpx;
								font-family: FontName;
								color: #04B871;
								margin-right: 65rpx;
							}

							.school-report-context-card-two-details-meal {
								display: flex;

								.school-report-context-card-two-details-meal-txt {
									width: 56rpx;
									margin-right: 8rpx;
									font-size: 28rpx;
									font-family: PingFangSC-Medium, PingFang SC;
									font-weight: 500;
									color: rgba(0, 0, 0, 0.85);
									line-height: 40rpx;
								}

								.school-report-context-card-two-details-meal-logo {
									display: flex;
									align-items: center;
									margin-right: 48rpx;

									&.school-report-context-card-two-details-meal-logo-two {
										margin-right: 56rpx;
									}

									&.school-report-context-card-two-details-meal-logo-three {
										margin: 0;
									}

									.school-report-context-card-two-details-meal-img {
										width: 48rpx;
										height: 40rpx;

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

									.school-report-context-card-two-details-meal-noeat {
										width: 40rpx;
										height: 40rpx;
										background: rgba(249, 121, 63, 0.17);
										border-radius: 12rpx;
										font-size: 24rpx;
										font-family: PingFangSC-Medium, PingFang SC;
										font-weight: 500;
										color: #F9793F;
										display: flex;
										justify-content: center;
										align-items: center;
									}
								}


							}
						}
					}
				}

				.school-report-context-card-three {
					height: 526rpx;
					background: #FFFFFF;
					border-radius: 16rpx;
					margin-bottom: 40rpx;

					.school-report-context-card-three-conclusion {
						margin: 40rpx 0 57rpx 0;

						.school-report-context-card-three-conclusion-item {
							height: 40rpx;
							font-size: 28rpx;
							font-family: PingFangSC-Medium, PingFang SC;
							font-weight: 500;
							color: rgba(0, 0, 0, 0.85);
							line-height: 40rpx;
							margin-left: 30rpx;

							.school-report-context-card-three-conclusion-item-describe {
								color: #04B871;
							}
						}
					}
				}

				.school-report-context-card-four {
					height: 536rpx;
					background: #FFFFFF;
					border-radius: 16rpx;
					margin-bottom: 40rpx;

					.school-report-context-card-four-conclusion {
						margin: 36rpx 0 46rpx;

						.school-report-context-card-four-conclusion-item {
							height: 80rpx;
							font-size: 28rpx;
							font-family: PingFangSC-Medium, PingFang SC;
							font-weight: 500;
							color: rgba(0, 0, 0, 0.85);
							line-height: 40rpx;
							margin: 0 40rpx 0 30rpx;

							.consume-total {
								color: #04B871;
								margin: 0 6rpx;
							}
						}
					}
				}

				.school-report-context-card-five {
					height: 634rpx;
					background: #FFFFFF;
					border-radius: 16rpx;
					margin-bottom: 37rpx;

					.school-report-context-card-five-conclusion {
						margin: 40rpx 0 0;

						.school-report-context-card-five-conclusion-item {
							margin: 0 40rpx 0 30rpx;
							height: 130rpx;
							font-size: 28rpx;
							font-family: PingFangSC-Medium, PingFang SC;
							font-weight: 500;
							color: rgba(0, 0, 0, 0.85);
							line-height: 40rpx;

							.abnormal-date {
								color: #04B871;
							}
						}
					}
				}

				.school-report-footer {
					height: 169rpx;
					margin: 0 0 43rpx;
					padding: 33rpx 34rpx 42rpx 42rpx;
					box-sizing: border-box;
					background: no-repeat center/100% url(../../static/images/extendPermissionsBg.png);
					display: flex;
					justify-content: space-between;

					.school-report-footer-item {
						display: flex;
						flex-direction: column;
						justify-content: space-between;

						.school-report-footer-item-txt {
							font-size: 34rpx;
							font-family: PingFangSC-Medium, PingFang SC;
							font-weight: 500;
							color: rgba(0, 0, 0, 0.85);
						}

						.school-report-validity {
							font-size: 24rpx;
							font-family: PingFangSC-Medium, PingFang SC;
							font-weight: 500;
							color: rgba(123, 80, 53, 0.85);

							.validity-date {
								color: #F9793F;
							}
						}
					}

					.school-report-footer-item-two {
						display: flex;
						align-items: center;

						.school-report-footer-item-btn {
							width: 180rpx;
							height: 61rpx;
							background: linear-gradient(360deg, #F0662B 0%, #FF8646 100%);
							border-radius: 49rpx;
							font-size: 28rpx;
							font-family: PingFangSC-Semibold, PingFang SC;
							font-weight: 600;
							color: #FFFFFF;
							display: flex;
							justify-content: center;
							align-items: center;
						}
					}
				}
			}
		}
	}
</style>
