<template>
	<view class="AbnormalConsumption">
		<view class="exceptionContent">
			<view class="itemBar" v-if="cateringAbnormalGroupList.length">
				<view class="itemtitle">
					<image :src="ImgUrl+'user/remind.png'" class="img">
						<view class="subTitle">消费异常提醒</view>
				</view>
				<view class="record">
					<text>【{{userInfo.name||''}}】</text>
					<text class="redBlock">
						{{lastMeal}}({{cateringAbnormalGroupList[0].weekDate}})
						<text class="line"></text>
					</text>
					<text>在校消费有异常记录,</text>
					<text class="ml8">请家长及时关注哦~</text>
				</view>
				<view class="mealBar">
					<view class="meal breakfast" v-if="cateringAbnormalGroupList[0].zaoGroupInfo.isMessage">
						<view class="left">早餐</view>
						<view class="right">
							<view class="banner" v-if="cateringAbnormalGroupList[0].zaoGroupInfo.unrecorded">
								<image :src="ImgUrl+'user/mealIcon.png'" class="icon icon1">无就餐记录
							</view>
							<view class="banner" v-if="cateringAbnormalGroupList[0].zaoGroupInfo.abnormalTimeMessage">
								<image :src="ImgUrl+'user/timeIcon.png'" class="icon icon2">
									{{cateringAbnormalGroupList[0].zaoGroupInfo.abnormalTimeMessage}}
							</view>
							<view class="detail"
								v-for="item in cateringAbnormalGroupList[0].zaoGroupInfo.abnormalTimeList"
								:key="item.abnormalTime">
								<text>{{item.abnormalTime}}</text><text>{{item.businessName}}</text><text>{{item.abnormalMntStr}}</text>
							</view>
							<view
								:class="['banner', cateringAbnormalGroupList[0].zaoGroupInfo.unrecorded || cateringAbnormalGroupList[0].zaoGroupInfo.abnormalTimeMessage  ? 'mt20' : '']"
								v-if="cateringAbnormalGroupList[0].zaoGroupInfo.abnormalMntMessage">
								<image :src="ImgUrl+'user/timeIcon.png'" class="icon icon2">
									{{cateringAbnormalGroupList[0].zaoGroupInfo.abnormalMntMessage}}
							</view>
							<view class="detail"
								v-for="money in cateringAbnormalGroupList[0].zaoGroupInfo.abnormalMntList"
								:key="money.abnormalTime">
								<text>{{money.abnormalTime}}</text><text>{{money.businessName}}</text><text>{{money.abnormalMntStr}}</text>
							</view>
						</view>
					</view>
					<view class="meal lunch" v-if="cateringAbnormalGroupList[0].wuGroupInfo.isMessage">
						<view class="left">午餐</view>
						<view class="right">
							<view class="banner" v-if="cateringAbnormalGroupList[0].wuGroupInfo.unrecorded">
								<image :src="ImgUrl+'user/mealIcon.png'" class="icon icon1">无就餐记录
							</view>
							<view class="banner" v-if="cateringAbnormalGroupList[0].wuGroupInfo.abnormalTimeMessage">
								<image :src="ImgUrl+'user/timeIcon.png'" class="icon icon2">
									{{cateringAbnormalGroupList[0].wuGroupInfo.abnormalTimeMessage}}
							</view>
							<view class="detail"
								v-for="item in cateringAbnormalGroupList[0].wuGroupInfo.abnormalTimeList"
								:key="item.abnormalTime">
								<text>{{item.abnormalTime}}</text><text>{{item.businessName}}</text><text>{{item.abnormalMntStr}}</text>
							</view>
							<view
								:class="['banner', cateringAbnormalGroupList[0].wuGroupInfo.unrecorded || cateringAbnormalGroupList[0].wuGroupInfo.abnormalTimeMessage  ? 'mt20' : '']"
								v-if="cateringAbnormalGroupList[0].wuGroupInfo.abnormalMntMessage">
								<image :src="ImgUrl+'user/timeIcon.png'" class="icon icon2">
									{{cateringAbnormalGroupList[0].wuGroupInfo.abnormalMntMessage}}
							</view>
							<view class="detail"
								v-for="money in cateringAbnormalGroupList[0].wuGroupInfo.abnormalMntList"
								:key="money.abnormalTime">
								<text>{{money.abnormalTime}}</text><text>{{money.businessName}}</text><text>{{money.abnormalMntStr}}</text>
							</view>
						</view>
					</view>
					<view class="meal dinner" v-if="cateringAbnormalGroupList[0].wanGroupInfo.isMessage">
						<view class="left">晚餐</view>
						<view class="right">
							<view class="banner" v-if="cateringAbnormalGroupList[0].wanGroupInfo.unrecorded">
								<image :src="ImgUrl+'user/mealIcon.png'" class="icon icon1">无就餐记录
							</view>
							<view class="banner" v-if="cateringAbnormalGroupList[0].wanGroupInfo.abnormalTimeMessage">
								<image :src="ImgUrl+'user/moneyIcon.png'" class="icon icon3">
									{{cateringAbnormalGroupList[0].wanGroupInfo.abnormalTimeMessage}}
							</view>
							<view class="detail"
								v-for="item in cateringAbnormalGroupList[0].wanGroupInfo.abnormalTimeList"
								:key="item.abnormalTime">
								<text>{{item.abnormalTime}}</text><text>{{item.businessName}}</text><text>{{item.abnormalMntStr}}</text>
							</view>
							<view
								:class="['banner', cateringAbnormalGroupList[0].wanGroupInfo.unrecorded || cateringAbnormalGroupList[0].wanGroupInfo.abnormalTimeMessage  ? 'mt20' : '']"
								v-if="cateringAbnormalGroupList[0].wanGroupInfo.abnormalMntMessage">
								<image :src="ImgUrl+'user/timeIcon.png'" class="icon icon2">
									{{cateringAbnormalGroupList[0].wanGroupInfo.abnormalMntMessage}}
							</view>
							<view class="detail"
								v-for="money in cateringAbnormalGroupList[0].wanGroupInfo.abnormalMntList"
								:key="money.abnormalTime">
								<text>{{money.abnormalTime}}</text><text>{{money.businessName}}</text><text>{{money.abnormalMntStr}}</text>
							</view>
						</view>
					</view>
				</view>
				<view class="tips">【注】根据学校预设的餐标提醒，异常判定仅供参考</view>
			</view>
			<view class="nodatatoday" v-else>
				<view class="itemtitle">
					<image :src="ImgUrl+'user/remind.png'" class="img">
						<view class="subTitle">消费异常提醒</view>
				</view>
				<view class="nodataimg">
					<image :src="ImgUrl+'user/exception.png'" class="nodata">
				</view>
				<view class="tip">消费无异常</view>
			</view>

			<view class="itemBar lastBar" v-if="cateringAbnormalGroupList.length">
				<view class="itemtitle">
					<image :src="ImgUrl+'user/remind.png'" class="img">
						<view class="subTitle">近30天消费异常</view>
				</view>
				<view class="lineBlock" v-for="group in cateringAbnormalGroupList" :key="group.statisticalDate">
					<view class="week" v-if="group.date">
						<view class="dot">
						</view>
						<view>{{group.date}}</view>
						<view>{{group.weekDate}}</view>
					</view>
					<view class="mealBar">
						<view>
							<view class="meal breakfast" v-if="group.zaoGroupInfo.isMessage">
								<view class="left">早餐</view>
								<view class="right">
									<view class="banner" v-if="group.zaoGroupInfo.unrecorded">
										<image :src="ImgUrl+'user/mealIcon.png'" class="icon icon1">无就餐记录
									</view>
									<view class="banner" v-if="group.zaoGroupInfo.abnormalTimeMessage">
										<image :src="ImgUrl+'user/timeIcon.png'" class="icon icon2">
											{{group.zaoGroupInfo.abnormalTimeMessage}}
									</view>
									<view class="detail" v-for="item in group.zaoGroupInfo.abnormalTimeList"
										:key="item.abnormalTime">
										<text>{{item.abnormalTime}}</text><text>{{item.businessName}}</text><text>{{item.abnormalMntStr}}</text>
									</view>
									<view
										:class="['banner', group.zaoGroupInfo.unrecorded || group.zaoGroupInfo.abnormalTimeMessage  ? 'mt20' : '']"
										v-if="group.zaoGroupInfo.abnormalMntMessage">
										<image :src="ImgUrl+'user/timeIcon.png'" class="icon icon2">
											{{group.zaoGroupInfo.abnormalMntMessage}}
									</view>
									<view class="detail" v-for="money in group.zaoGroupInfo.abnormalMntList"
										:key="money.abnormalTime">
										<text>{{money.abnormalTime}}</text><text>{{money.businessName}}</text><text>{{money.abnormalMntStr}}</text>
									</view>
								</view>
							</view>
							<view class="meal lunch" v-if="group.wuGroupInfo.isMessage">
								<view class="left">午餐</view>
								<view class="right">
									<view class="banner" v-if="group.wuGroupInfo.unrecorded">
										<image :src="ImgUrl+'user/mealIcon.png'" class="icon icon1">无就餐记录
									</view>
									<view class="banner" v-if="group.wuGroupInfo.abnormalTimeMessage">
										<image :src="ImgUrl+'user/timeIcon.png'" class="icon icon2">
											{{group.wuGroupInfo.abnormalTimeMessage}}
									</view>
									<view class="detail" v-for="item in group.wuGroupInfo.abnormalTimeList"
										:key="item.abnormalTime">
										<text>{{item.abnormalTime}}</text><text>{{item.businessName}}</text><text>{{item.abnormalMntStr}}</text>
									</view>
									<view
										:class="['banner', group.wuGroupInfo.unrecorded || group.wuGroupInfo.abnormalTimeMessage  ? 'mt20' : '']"
										v-if="group.wuGroupInfo.abnormalMntMessage">
										<image :src="ImgUrl+'user/timeIcon.png'" class="icon icon2">
											{{group.wuGroupInfo.abnormalMntMessage}}
									</view>
									<view class="detail" v-for="money in group.wuGroupInfo.abnormalMntList"
										:key="money.abnormalTime">
										<text>{{money.abnormalTime}}</text><text>{{money.businessName}}</text><text>{{money.abnormalMntStr}}</text>
									</view>
								</view>
							</view>
							<view class="meal dinner" v-if="group.wanGroupInfo.isMessage">
								<view class="left">晚餐</view>
								<view class="right">
									<view class="banner" v-if="group.wanGroupInfo.unrecorded">
										<image :src="ImgUrl+'user/mealIcon.png'" class="icon icon1">无就餐记录
									</view>
									<view class="banner" v-if="group.wanGroupInfo.abnormalTimeMessage">
										<image :src="ImgUrl+'user/timeIcon.png'" class="icon icon2">
											{{group.wanGroupInfo.abnormalTimeMessage}}
									</view>
									<view class="detail" v-for="item in group.wanGroupInfo.abnormalTimeList"
										:key="item.abnormalTime">
										<text>{{item.abnormalTime}}</text><text>{{item.businessName}}</text><text>{{item.abnormalMntStr}}</text>
									</view>
									<view
										:class="['banner', group.wanGroupInfo.unrecorded || group.wanGroupInfo.abnormalTimeMessage  ? 'mt20' : '']"
										v-if="group.wanGroupInfo.abnormalMntMessage">
										<image :src="ImgUrl+'user/timeIcon.png'" class="icon icon2">
											{{group.wanGroupInfo.abnormalMntMessage}}
									</view>
									<view class="detail" v-for="money in group.wanGroupInfo.abnormalMntList"
										:key="money.abnormalTime">
										<text>{{money.abnormalTime}}</text><text>{{money.businessName}}</text><text>{{money.abnormalMntStr}}</text>
									</view>
								</view>
							</view>
						</view>
					</view>
					<view class="leftLine"></view>
				</view>
			</view>
			<view class="nodatatoday nodatatoday1" v-else>
				<view class="itemtitle">
					<image :src="ImgUrl+'user/remind.png'" class="img">
						<view class="subTitle">近30天消费异常</view>
				</view>
				<view class="nodataimg">
					<image :src="ImgUrl+'user/exception1.png'" class="nodata1">
				</view>
				<view class="tip">近30天内无异常</view>
			</view>
			<view class="more">
				<view>更多消费明细，请前往</view>
				<view class="green" @click="toDoOtherPage">钱包明细</view>
				<view class="ml15 green">》</view>
			</view>
		</view>
	</view>
</template>

<script>
	// 时间处理模块
	import dayjs from 'dayjs'
	import {
		Dialog
	} from 'vant';
	let gHost = "https://" + window.location.host;
	if (window.location.protocol != "https:") {
		gHost = "https://dev-az-cloud-api.xiaopay.net";
	}
	if (window.location.host == 'fpdev.xiaopay.net') {
		gHost = "https://dev-az-cloud-api.xiaopay.net";
	}
	if (window.location.host == 'uat.xiaopay.net') {
		gHost = "https://test-az-cloud-api.xiaopay.net";
	}
	if (window.location.host == 'pay.xiaopay.net') {
		gHost = "https://az-cloud-api.xiaopay.net";
	}
	export default {
		name: "AbnormalConsumption",
		data() {
			return {
				cateringAbnormalGroupList: [],
				ImgUrl: this.$ImgUrl,
				userInfo: {}
			};
		},
		onLoad(options) {
			console.warn(options)
			if (!options['schoolId'] || !options['userId']) {
				Dialog({
					title: '温馨提示！',
					message: '学生Id为必传参数！',
					confirmButtonText: "知道了"
				}).then(res => {
					window.close()
				})
				return;
			}
			this.CloudGatewayToken(options['schoolId'], options['userId'])
		},
		methods: {
			// 页面跳转
			toDoOtherPage() {

			},
			// 根据学生id获取用户信息
			getByStuInfo(studentId, Authorization, AuthOauthToken) {
				const header = {
					'Authorization': Authorization || '',
					'AuthOauthToken': AuthOauthToken || '',
				}
				const student1 = this.$http.get({
					// 云平台
					url: `${gHost}/cloud-gateway/basic-web/student/${studentId}`,
					header,
				})
				const student2 = this.$http.get({
					// 校园
					url: `${gHost}/cloud-gateway/basic-service/getByAzxyStuId/${studentId}`,
					header,
				})
				const student3 = this.$http.get({
					// 校智付
					url: `${gHost}/cloud-gateway/basic-service/getByXzfStuId/${studentId}`,
					header,
				})
				return Promise.all([student1, student2, student3])
			},
			// 获取云平台网关token
			async CloudGatewayToken(schoolId, userId) {
				let res = await this.$http.post({
					url: `${gHost}/cloud-gateway/auth/oauth/token`,
					header: {
						'Content-Type': 'application/x-www-form-urlencoded'
					},
				}, {
					client_id: 'az-billing-auth',
					client_secret: 'df385aef0389',
					grant_type: 'password'
				})
				if (res.code == 200) {
					const Authorization = res.data.tokenHead + res.data
						.token
					const AuthOauthToken = res.data.token
					uni.setStorageSync('Authorization', Authorization);
					uni.setStorageSync('AuthOauthToken', AuthOauthToken);
					// 查询记录
					this.getCateringAbnormalGroupList(schoolId, userId)
					// 获取学生信息
					const StuInfo = await this.getByStuInfo(userId, Authorization, AuthOauthToken)
					for (let s of StuInfo) {
						if (s.code == 10000 && s.data) {
							this.userInfo = s.data
						}
					}
				} else {
					uni.showToast({
						icon: 'none',
						title: '获取云平台token失败!'
					})
				}
			},
			// 用户消费异常列表分组信息
			async getCateringAbnormalGroupList(schoolId, userId) {
				const params = {
					userId,
					schoolId,
					startDate: dayjs().subtract(30, 'days').format("YYYY-M-DD"),
					endDate: dayjs().format("YYYY-M-DD"),
				}
				try {
					let data = await this.$http.post({
						header: {
							'Authorization': uni.getStorageSync('Authorization') || '',
							'AuthOauthToken': uni.getStorageSync('AuthOauthToken') || '',
							'Content-Type': 'application/x-www-form-urlencoded'
						},
						url: `${gHost}/cloud-gateway/bill/cateringAbnormal/getCateringAbnormalGroupList`,
					}, params)
					if (data.code != 10000) {
						uni.showToast({
							icon: 'none',
							title: data.message || '发生异常!'
						})
						return
					}
					let res = data.data;
					this.cateringAbnormalGroupList = res;
					if (res.length) {
						this.lastMeal = new Date(res[0].statisticalDate).getMonth() + 1 + "月" + new Date(res[0]
							.statisticalDate).getDate() + "日";
					}
				} catch (e) {
					console.warn(e)
					//TODO handle the exception
					uni.showToast({
						icon: 'none',
						title: "发生异常错误!"
					})
				}
			},
		}
	}
</script>

<style lang="scss">
	.exceptionContent {
		width: 100%;
		height: 100%;
		min-height: calc(100vh - 103rpx);
		background: #F0F1F1;
		padding: 24rpx 5vw 0;
		margin-left: -5vw;

		.nodatatoday {
			display: flex;
			flex-direction: column;
			background: white;
			margin-bottom: 34rpx;
			border-radius: 16rpx;

			.nodataimg {
				width: 100%;
				height: 254rpx;
				display: flex;
				justify-content: center;
				margin-top: 120rpx;

				.nodata {
					width: 501rpx;
					height: 254rpx;
				}
			}

			.tip {
				display: flex;
				width: 100%;
				justify-content: center;
				height: 40rpx;
				font-size: 28rpx;
				color: rgba(0, 0, 0, 0.45);
				line-height: 40rpx;
				padding-bottom: 84rpx;
			}
		}

		.nodatatoday1 {
			.nodataimg {
				margin-top: 130rpx;

				.nodata1 {
					width: 500rpx;
					height: 232rpx;
				}
			}
		}

		.itemtitle {
			width: 100%;
			height: 43rpx;
			display: flex;
			justify-content: center;
			margin-top: 40rpx;
			position: relative;
			margin-bottom: 45rpx;

			.img {
				width: 232rpx;
				height: 43rpx;
			}

			.subTitle {
				position: absolute;
				left: 50%;
				top: 46rpx;
				transform: translate(-50%, -50%);
				font-weight: 500;
				font-size: 34rpx;
				height: 48rpx;
				line-height: 48rpx;
			}
		}

		.itemBar {
			width: 100%;
			background: #FFFFFF;
			border-radius: 16rpx;
			display: flex;
			flex-direction: column;
			margin-bottom: 24rpx;
			padding-bottom: 32rpx;

			.record {
				font-size: 28rpx;
				color: rgba(0, 0, 0, 0.85);
				line-height: 40rpx;
				display: flex;
				flex-wrap: wrap;
				padding: 0 28rpx;

				p {
					display: flex;
					flex-wrap: wrap;
				}

				.redBlock {
					display: inline-block;
					position: relative;
					color: #EF4034;

					.line {
						position: absolute;
						left: 0;
						top: calc(100% - 10rpx);
						width: 100%;
						height: 5rpx;
						background: rgba(239, 64, 52, 0.14);
						display: block;
					}
				}

				.ml8 {
					margin-left: 8rpx;
				}
			}
		}

		.mealBar {
			margin: 20rpx 40rpx 0 40rpx;
			display: flex;
			flex-direction: column;
			background: #FCF5F5;
			border-radius: 12rpx;
			padding-top: 20rpx;
			padding-bottom: 28rpx;

			.meal {
				display: flex;
				margin-top: 13rpx;
				padding-bottom: 16rpx;

				.left {
					width: 88rpx;
					padding-right: 24rpx;
					line-height: 44rpx;
					font-weight: 500;
					color: rgba(0, 0, 0, 0.85);
					font-size: 28rpx;
					text-align: right;
				}

				.right {
					flex: 1;
					display: flex;
					flex-wrap: wrap;

					.banner {
						display: flex;
						width: auto;
						height: 44rpx;
						line-height: 44rpx;
						background: rgba(239, 64, 52, 0.09);
						padding-left: 14rpx;
						padding-right: 10rpx;
						border-radius: 5rpx;
						color: #EF4034;
						font-size: 28rpx;

						.icon {
							align-self: center;
							margin-right: 4rpx;
						}

						.icon1 {
							width: 29rpx;
							height: 24rpx;
						}

						.icon2 {
							width: 26rpx;
							height: 25rpx;
						}

						.icon3 {
							width: 25rpx;
							height: 25rpx;
						}
					}

					.mt20 {
						margin-top: 20rpx;
					}

					.detail {
						width: 100%;
						display: flex;
						height: 37rpx;
						margin-bottom: 10rpx;
						margin-top: 16rpx;

						text {
							margin-right: 12rpx;
							color: rgba(0, 0, 0, 0.85);
							font-size: 26rpx;
							line-height: 37rpx;
						}

						text:nth-child(2) {
							max-width: 180rpx;
							overflow: hidden;
							white-space: nowrap;
							text-overflow: ellipsis;
						}
					}

					.detail+.detail {
						margin-top: 0;
					}

					.detail:last-child {
						margin-bottom: 4rpx;
					}
				}
			}

			.breakfast,
			.lunch {
				// padding-bottom: 28rpx;
				border-bottom: 1rpx dashed #FFCBC9;
				;
			}

			.dinner {
				padding-top: 21rpx;
				padding-bottom: 32rpx;
			}

			.meal:last-child {
				padding-bottom: 0;
				border-bottom: 0;
			}
		}

		.tips {
			padding: 16rpx 50rpx 0 50rpx;
			height: 30rpx;
			font-size: 22rpx;
			color: rgba(0, 0, 0, 0.5);
			line-height: 30rpx;
		}

		.lastBar {
			width: 100%;
			display: flex;

			.lineBlock {
				width: 100%;
				display: flex;
				flex-direction: column;
				position: relative;

				.leftLine {
					position: absolute;
					left: 46rpx;
					top: 35rpx;
					width: 1rpx;
					background: #D2D2D2;
					height: calc(100% + 20rpx);
					z-index: 1;
				}
			}

			.lineBlock:last-child {
				.leftLine {
					height: 0;
				}
			}

			.lineBlock+.lineBlock {
				margin-top: 32rpx;
			}

			.week {
				display: flex;
				height: 56rpx;
				font-size: 44rpx;
				font-weight: 500;
				color: rgba(0, 0, 0, 0.85);
				padding-left: 40rpx;

				view {
					align-self: flex-end;
				}

				.dot {
					width: 12rpx;
					height: 12rpx;
					margin-right: 22rpx;
					background: #EF4034;
					border-radius: 50%;
					align-self: center;
					position: relative;
					z-index: 2;
				}

				view:last-child {
					margin-left: 15rpx;
					color: rgba(0, 0, 0, 0.85);
					font-size: 24rpx;
					font-weight: 400;
				}
			}

			.mealBar {
				margin: 20rpx 48rpx 0 76rpx;
				position: relative;

				.breakfast,
				.lunch {
					border-bottom: 0;
				}

				.lunch {
					padding-bottom: 0;
				}
			}


		}

		.more {
			width: 100%;
			display: inline-flex;
			height: 94rpx;
			line-height: 94rpx;
			justify-content: center;
			background: #FFFFFF;
			border-radius: 16rpx;
			font-size: 28rpx;
			color: rgba(0, 0, 0, 0.85);
			margin-bottom: 24rpx;

			.ml15 {
				margin-left: 15rpx;
			}

			.green {
				margin-left: 4rpx;
				font-weight: 500;
				color: #04B871;
			}
		}
	}
</style>