<template>
	<view class="consumption-report-container">
		<view class="consumption-report-header">
			<view class="consumption-report-header-item">
				<van-dropdown-menu active-color="#1989fa" :overlay="isoverlay">
					<van-dropdown-item @change="handlerStudentNameChange" :value="studentNameValue"
						:options="studentNameOption" />
				</van-dropdown-menu>
			</view>
			<view class="consumption-report-header-item consumption-report-date">
				<van-dropdown-menu active-color="#1989fa" :overlay="isoverlay">
					<van-dropdown-item :value="dateValue" @change="handlerDateChange" :options="dateOption" />
				</van-dropdown-menu>
			</view>
		</view>
		<view class="consumption-report-context">
			<view class="consumption-report-card-one">
				<view class="consumption-report-card-one-item">
					<view class="consumption-total-number">
						<view class="consumption-total-number-item">
							650.80
						</view>
						<view class="consumption-total-number-trend">
							<view class="consumption-total-number-trend-item">
								+142.50
							</view>
							<view class="consumption-total-number-trend-item consumption-total-number-trend-percent">
								20%
							</view>
						</view>
					</view>
					<view class="consumption-total-text">
						<view class="consumption-total-text-item">
							本周消费总金额(元)
						</view>
						<view class="consumption-total-text-contrast">
							<view class="consumption-total-text-contrast-item">
								环比上周
							</view>
							<view class="consumption-total-text-contrast-img">
								<image class="consumption-total-text-trend-img" src="../../static/images/trend.png">
								</image>
							</view>
						</view>
					</view>
				</view>
				<view class="consumption-report-card-one-item">
					<view class="no-eatting-total-detail">
						<view class="no-eatting-total-detail-item">
							<text class="no-eatting-total-detail-item-num">
								9
							</text>次
						</view>
						<view class="no-eatting-total-detail-item">
							<text class="no-eatting-total-detail-item-num">
								5
							</text>天
						</view>
					</view>
					<view class="no-eatting-total-text">
						<view class="no-eatting-total-text-item">
							未就餐次数
						</view>
						<view class="no-eatting-total-text-item">
							未就餐次数
						</view>
					</view>
				</view>
			</view>
			<view class="consumption-report-card-two">
				<view class="consumption-report-card-two-title">
					<view class="consumption-report-card-two-title-image">
						<image class="consumption-report-card-two-title-img"
							src="../../static/images/dailyConsumptionTrend.png"></image>
					</view>
					<view class="consumption-report-card-two-title-text">
						日消费趋势
						<view class="consumption-report-card-two-title-text-deline">
						</view>
					</view>
				</view>
				<view class="average-daily-consumption">
					<view class="average-daily-consumption-item">
						<text>¥</text>
						<text class="average-daily-consumption-item-num">150.20</text>
					</view>
					<view class="average-daily-consumption-item average-daily-consumption-item-orange">
						<text>¥</text>
						<text class="consumption-daily-trend-item-num">185.25</text>
					</view>
				</view>
				<view class="average-daily-consumption-contrast">
					<view class="average-daily-consumption-student">

					</view>
					<view class="average-daily-consumption-class">

					</view>
				</view>
			</view>
			<view class="consumption-report-card-three">
				<view class="consumption-report-card-three-title">
					<view class="consumption-report-card-three-title-image">
						<image class="consumption-report-card-three-title-img"
							src="../../static/images/consumerPreferences.png"></image>
					</view>
					<view class="consumption-report-card-three-title-text">
						消费偏好
						<view class="consumption-report-card-three-title-text-deline">
						</view>
					</view>
				</view>
			</view>
			<view class="consumption-report-card-four">
				<view class="consumption-report-card-four-title">
					<view class="consumption-report-card-four-title-image">
						<image class="consumption-report-card-four-title-img" src="../../static/images/notEatting.png">
						</image>
					</view>
					<view class="consumption-report-card-four-title-text">
						未就餐详情
						<view class="consumption-report-card-four-title-text-deline">
						</view>
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		name: 'ConsumptionReport',
		data() {
			return {
				isoverlay: false,
				studentNameValue: 0,
				dateValue: 'a',
				studentNameOption: [{
						text: '宁哲桂',
						value: 0
					},
					{
						text: '张三',
						value: 1
					},
					{
						text: '李四',
						value: 2
					},
				],
				dateOption: [{
						text: '12月06日~12月12日',
						value: 'a'
					},
					{
						text: '11月29日~12月05日',
						value: 'b'
					},
					{
						text: '11月22日~11月28日',
						value: 'c'
					},
				],
			}
		},
		methods: {
			handlerStudentNameChange(value) {
				this.studentNameValue = value
			},
			handlerDateChange(value) {
				this.dateValue = value
			}
		}
	}
</script>

<style lang="scss" scoped>
	*{
		margin: 0;
		padding: 0;
	}
	.consumption-report-container {
		width: 750rpx;
		height: 2616rpx;
		background: #F6F6F6;
		position: relative;

		.consumption-report-header {
			height: 330rpx;
			width: 100%;
			background: url(../../static/images/headerbgm.png) no-repeat;
			display: flex;
			justify-content: space-between;
			box-sizing: border-box;
			padding-top: 54rpx;

			.consumption-report-header-item {
				width: 200rpx;
				line-height: 48rpx;

				/deep/ .van-dropdown-menu__item {
					display: flex;
					justify-content: flex-start;
					align-items: center;
				}

				/deep/ .van-dropdown-menu__title {
					font-size: 30rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #FFFFFF;
					padding: 0 16rpx 0 0;
				}

				/deep/ .van-dropdown-menu__bar {
					background: rgb(18, 201, 174);
				}

				/deep/ .van-dropdown-item__content {
					position: absolute;
				}

				&.consumption-report-date {
					width: 280rpx;

					/deep/ .van-dropdown-menu__title {
						font-size: 24rpx;
						font-family: PingFangSC-Medium, PingFang SC;
						font-weight: 500;
						color: #FFFFFF;
					}
				}
			}
		}

		.consumption-report-context {
			padding: 0 20rpx;
			box-sizing: border-box;

			.consumption-report-card-one {
				height: 357rpx;
				width: 710rpx;
				background: #FFFFFF;
				border-radius: 24rpx;
				position: absolute;
				top: 122rpx;
				padding: 47rpx 42rpx 38rpx 39rpx;
				box-sizing: border-box;
				display: flex;
				justify-content: space-between;
				flex-direction: column;

				.consumption-report-card-one-item {
					height: 110rpx;
					display: flex;
					justify-content: space-between;
					flex-direction: column;

					.consumption-total-number {
						height: 74rpx;
						display: flex;
						justify-content: space-between;
						align-items: center;

						.consumption-total-number-item {
							font-size: 60rpx;
							font-family: DINAlternate-Bold, DINAlternate;
							font-weight: bold;
							color: #000000;
							line-height: 74rpx;
							flex: 1;
						}

						.consumption-total-number-trend {
							flex: 1;
							display: flex;
							justify-content: flex-end;

							.consumption-total-number-trend-item {
								height: 42rpx;
								font-size: 36rpx;
								font-family: DINAlternate-Bold, DINAlternate;
								font-weight: bold;
								color: #FA8C15;
								line-height: 42rpx;

								&.consumption-total-number-trend-percent {
									color: #EF7D00;
									margin-left: 22rpx;
								}
							}
						}
					}

					.consumption-total-text {
						height: 37rpx;
						display: flex;
						justify-content: space-between;
						align-items: center;

						.consumption-total-text-item {
							font-size: 26rpx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: #999999;
							line-height: 37rpx;
						}

						.consumption-total-text-contrast {
							display: flex;
							justify-content: flex-end;
							align-items: center;

							.consumption-total-text-contrast-item {
								font-size: 26rpx;
								font-family: PingFangSC-Regular, PingFang SC;
								font-weight: 400;
								color: #999999;
								line-height: 37rpx;
							}

							.consumption-total-text-contrast-img {
								margin: -8rpx 0 0 10rpx;
								width: 20rpx;
								height: 25rpx;
								line-height: 0;
								.consumption-total-text-trend-img {
									width: 100%;
									height: 100%;
								}
							}
						}
					}

					.no-eatting-total-detail {
						display: flex;
						justify-content: space-between;
						height: 70rpx;

						.no-eatting-total-detail-item {
							font-size: 36rpx;
							font-family: DINAlternate-Bold, DINAlternate;
							font-weight: bold;
							color: #000000;
							line-height: 70rpx;

							.no-eatting-total-detail-item-num {
								font-size: 60rpx;
								margin-right: 10rpx;
							}
						}
					}

					.no-eatting-total-text {
						display: flex;
						justify-content: space-between;
						height: 40rpx;

						.no-eatting-total-text-item {
							font-size: 28rpx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: #999999;
							line-height: 40rpx;
						}
					}
				}
			}

			.consumption-report-card-two {
				height: 621rpx;
				width: 710rpx;
				background: #FFFFFF;
				border-radius: 24rpx;
				position: absolute;
				top: 504rpx;
				padding: 0 32rpx;
				box-sizing: border-box;
				.consumption-report-card-two-title {
					height: 60rpx;
					margin: 21rpx 0 32rpx;
					box-sizing: border-box;
					display: flex;
					align-items: center;

					.consumption-report-card-two-title-image {
						width: 32rpx;
						height: 32rpx;

						.consumption-report-card-two-title-img {
							width: 100%;
							height: 100%;
						}
					}

					.consumption-report-card-two-title-text {
						margin-left: 16rpx;
						font-size: 32rpx;
						font-family: PingFangSC-Semibold, PingFang SC;
						font-weight: 600;
						color: #000000;
						position: relative;

						.consumption-report-card-two-title-text-deline {
							width: 152rpx;
							height: 11rpx;
							background: rgba(38, 169, 106, 0.24);
							border-radius: 6rpx;
							position: absolute;
							top: 30rpx;
						}
					}

				}

				.average-daily-consumption {
					height: 56rpx;
					padding: 0 40rpx;
					box-sizing: border-box;
					display: flex;
					justify-content: space-between;

					.average-daily-consumption-item {
						font-size: 36rpx;
						font-family: DINAlternate-Bold, DINAlternate;
						font-weight: bold;
						color: #13D088;
						line-height: 42rpx;

						.average-daily-consumption-item-num {
							font-size: 48rpx;
						}

						&.average-daily-consumption-item-orange {
							color: #FA8C15;
						}
					}
				}

				.average-daily-consumption-contrast {
					display: flex;
					height: 49rpx;

					.average-daily-consumption-student {
						flex: 1;
						background: #13D088;
						border-radius: 25rpx 0rpx 0rpx 25rpx;
					}

					.average-daily-consumption-class {
						flex: 1;
						background: #FAAD15;
						border-radius: 0rpx 25rpx 25rpx 0rpx;
					}
				}
			}

			.consumption-report-card-three {
				width: 710rpx;
				height: 460rpx;
				background: #FFFFFF;
				border-radius: 24rpx;
				position: absolute;
				top: 1148rpx;
				padding: 0 32rpx;
				box-sizing: border-box;
				
				.consumption-report-card-three-title {
					height: 60rpx;
					margin: 21rpx 0 0;
					box-sizing: border-box;
					display: flex;
					align-items: center;

					.consumption-report-card-three-title-image {
						width: 34rpx;
						height: 33rpx;

						.consumption-report-card-three-title-img {
							width: 100%;
							height: 100%;
						}
					}

					.consumption-report-card-three-title-text {
						margin-left: 16rpx;
						font-size: 32rpx;
						font-family: PingFangSC-Semibold, PingFang SC;
						font-weight: 600;
						color: #000000;
						position: relative;

						.consumption-report-card-three-title-text-deline {
							width: 125rpx;
							height: 11rpx;
							background: rgba(38, 169, 106, 0.24);
							border-radius: 6rpx;
							position: absolute;
							top: 30rpx;
						}
					}
				}
			}

			.consumption-report-card-four {
				width: 710rpx;
				height: 730rpx;
				background: #FFFFFF;
				border-radius: 24rpx;
				position: absolute;
				top: 1632rpx;
				padding: 0 32rpx;
				box-sizing: border-box;

				.consumption-report-card-four-title {
					height: 60rpx;
					margin: 21rpx 0 0;
					box-sizing: border-box;
					display: flex;
					align-items: center;

					.consumption-report-card-four-title-image {
						width: 35rpx;
						height: 26rpx;
						line-height: 0;

						.consumption-report-card-four-title-img {
							width: 100%;
							height: 100%;
						}
					}

					.consumption-report-card-four-title-text {
						margin-left: 16rpx;
						font-size: 32rpx;
						font-family: PingFangSC-Semibold, PingFang SC;
						font-weight: 600;
						color: #000000;
						position: relative;

						.consumption-report-card-four-title-text-deline {
							width: 152rpx;
							height: 11rpx;
							background: rgba(38, 169, 106, 0.24);
							border-radius: 6rpx;
							position: absolute;
							top: 30rpx;
						}
					}
				}
			}

		}
	}
</style>
