<template>
	<view class="CampusConsumption">
		<!-- 头部卡片 -->
		<view class="cardInfo"
			:style="'background-image: url('+this.$ImgUrl + (HomeDataInfo['vipStatus']==1? 'applyCons/bgm.png':'applyCons/bgm1.png')+')'">
			<view class="userInfo">
				<view class="left">
					<view class="useravatar" :style="'background-image: url('+this.$ImgUrl + 'applyCons/icon.png'+')'">
					</view>
					<view class="name"
						:style="HomeDataInfo['vipStatus']==1 ?'color: #512C19;':'color: rgba(0,0,0,0.85);' ">
						{{HomeDataInfo['userName']||'安小智'}}
					</view>
				</view>
				<view class="right">
					<image v-if="HomeDataInfo['vipStatus']==1" :src="this.$ImgUrl + 'applyCons/menber.png'"
						mode="aspectFit"></image>
					<view class="lable" v-if="HomeDataInfo['vipStatus']==1">
						您已开通消费会员
					</view>
					<view class="lable" v-else :style="HomeDataInfo['vipStatus']==1 ?'':'color: rgba(0,0,0,0.85);' ">
						您尚未开通消费会员
					</view>
				</view>
			</view>
			<!-- 消费数据 -->
			<view class="cdatabox">
				<view class="cdatal">
					<span class="integer">{{HomeDataInfo['schoolConsumption']['dailySpend_integer']}}</span>
					<span class="decimal">.{{HomeDataInfo['schoolConsumption']['dailySpend_decimal']}}</span>
					<view class="lable">
						今日消费(元）
					</view>
				</view>
				<view class="cdatar">
					<span class="integer">{{HomeDataInfo['schoolConsumption']['monthlySpend_integer']}}</span>
					<span class="decimal">.{{HomeDataInfo['schoolConsumption']['monthlySpend_decimal']}}</span>
					<view class="lable">
						本月消费(元）
					</view>
				</view>
			</view>
			<!--  -->
			<view class="cdatabox2">
				<view class="cdatal"
					:style="HomeDataInfo['schoolConsumption']['pendingcharge_decimal']>0?'color: red;':''"
					@click="goToPage(1)">
					<span class="integer">{{HomeDataInfo['schoolConsumption']['pendingcharge_integer']}}</span>
					<span class="decimal">.{{HomeDataInfo['schoolConsumption']['pendingcharge_decimal']}}</span>
					<view class="lable">
						<span>待还款订单</span>
						<image class="rigth" :src="this.$ImgUrl + 'applyCons/rigth.png'" mode="aspectFit"></image>
					</view>
				</view>
				<view class="cdatar" @click="goToPage(2)">
					<span class="integer">{{HomeDataInfo['schoolConsumption']['amount_integer']}}</span>
					<span class="decimal">.{{HomeDataInfo['schoolConsumption']['amount_decimal']}}</span>
					<view class="lable">
						<span>钱包余额</span>
						<image class="rigth" :src="this.$ImgUrl + 'applyCons/rigth.png'" mode="aspectFit"></image>
					</view>
				</view>
				<view class="cdatar" @click="goToPage(3)">
					<span class="integer">{{HomeDataInfo['schoolConsumption']['subsidyBalance_integer']}}</span>
					<span class="decimal">.{{HomeDataInfo['schoolConsumption']['subsidyBalance_decimal']}}</span>
					<view class="lable">
						<span>补助金</span>
						<image style="visibility: hidden;" class="rigth" :src="this.$ImgUrl + 'applyCons/rigth.png'"
							mode="aspectFit"></image>
					</view>
				</view>
			</view>
		</view>
		<!-- 功能菜单 -->
		<view class="menuList">
			<view class="menuitem" v-for="(item,index) in menuList" :key="index" @click="menuClick(item,index+1)">
				<view class="">
					<view class="title">{{item.title||''}}</view>
					<view class="sketch">{{item.sketch||''}}</view>
				</view>
				<view class="icon">
					<image :src="index+1 != 5 ? item.icon : 'https://xiaopay2020.oss-cn-shenzhen.aliyuncs.com/static/weapp/applyCons/menu3.png'" mode="aspectFit"></image>
				</view>
			</view>
		</view>
		<!-- 会员尊享权益 -->
		<view class="menberImg" v-if="HomeDataInfo['vipStatus']!=1&&HomeDataInfo['membershipStatus']==1">
			<image :src="this.$ImgUrl + 'applyCons/menberImg.png'" mode="aspectFit"></image>
			<view class="tomenber" @tap="openAzMenber"></view>
		</view>
		<!-- 消费会员限制弹框 -->
		<van-dialog v-model="contractMenber" :show-confirm-button="false">
			<view class="modalDlgBox">
				<view class="modalDlgHeader">
					<text>您还未开通消费会员</text>
				</view>
				<view class="contentt">
					<image class="quanyi" :src="ImgUrl2+'quanyi.png'" mode="aspectFit"></image>
				</view>
				<view class="btngroup">
					<button @tap="BtnEvent(1)" style="border: none;">残忍拒绝</button>
					<button @tap="BtnEvent(2)" style="border: none;">立即开通</button>
				</view>
			</view>
		</van-dialog>
	</view>
</template>

<script>
	import {
		Dialog
	} from 'vant';
	import config from '../common/config.js'
	// console.warn(config['ServiceEnum'])
	import {
		requestGet,
		requestPost
	} from '../common/request.js'
	export default {
		name: "CampusConsumption",
		data() {
			return {
				ImgUrl: this.$ImgUrl,
				ImgUrl2: this.$ImgUrl + 'xzfalipay/',
				menuList: Array(5).fill(1).map((v, index) => {
					return {
						path: ['../ConsumptIoninfo/ConsumptIoninfo', '../ConsumptionQuota/ConsumptionQuota',
							'/pages/ConsumptionSystem/AbnormalConsumption/AbnormalConsumption',
							'../CommonProblem/CommonProblem', '../campusReport/campusReport'
						][index],
						title: ['消费记录', '消费限额', '消费异常', '常见问题', '校园报告'][index],
						sketch: ['消费记录 笔笔可查', '设置额度 管控消费', '消费异常 每日提醒', '使用疑问 一一解答', '校园报告'][index],
						icon: this.$ImgUrl + `applyCons/menu${index+1}.png`,
						// 是否需要鉴权
						auth: [true, true, true, false, false][index],
						// 鉴权服务项code
						serviceItemCode: [config['ServiceEnum']['Auth10'], config['ServiceEnum']['Auth8'], config[
								'ServiceEnum']['Auth11'], '', config[
								'ServiceEnum']['Auth2']]
							[index]
					}
				}),
				HomeDataInfo: {
					// 账户id
					"accountId": 0,
					"schoolConsumption": {
						// 钱包余额 单位分
						"amount": 0,
						// 今日消费 单位分
						"dailySpend": 0,
						// 本月消费 单位分
						"monthlySpend": 0,
						// 欠款金额 单位分
						"pendingcharge": 0,
						// 补助余额 单位分
						"subsidyBalance": 0
					},
					// 用户姓名
					"userName": "",
					// 刷脸消费会员剩余天数
					"vipDaysRemaining": 0,
					// 刷脸消费会员到期时间
					"vipExpiredDt": "",
					// 刷脸消费会员开通状态 1已开通并生效 2未开通 3已过期 4未生效
					"vipStatus": 1,
					// 学校是否开通消费会员
					"membershipStatus": 0,
					// 学生id
					"schoolId": 0
				},
				// 学校 学生id
				userInfo: {
					schoolId: '',
					userId: '',
					userType: '',
				},
				// 消费会员弹框
				contractMenber: false,
			};
		},
		onLoad(options) {
			if (!options['token']) {
				Dialog({
					title: '系统提示',
					message: 'token为空！',
					confirmButtonText: "知道了"
				}).then(res => {
					window.close()
				})
				return;
			}
			this.UserLogin(options['token'])
		},
		methods: {
			// 弹框点击事情
			async BtnEvent(type) {
				if (type == 1) {
					// setTimeout(() => {
					// 	uni.navigateBack()
					// }, 300)
				}
				if (type == 2) {
					jWeixin.miniProgram.navigateTo({
						url: '/pages/nationalCenterForLesbianRights/index?productId=3'
					})
				}
				this.contractMenber = false
			},
			//登录获取用户信息
			async UserLogin(token) {
				let data = await requestPost('/cgi-xpay/app/Login', {
					grantType: 'GT_azCloud_h5',
					code: token,
				})
				if (data['code'] != 200) {
					await Dialog({
						title: '温馨提示',
						message: data['message'],
						confirmButtonText: "知道了"
					})
					return
				}
				uni.setStorageSync('token', data.data['token'])
				this.HomePageData()
			},
			// 查询消费会员权益项
			async QueryProductContractItem(serviceItemCode = '1008') {
				const data = await requestPost('/cgi-xpay/app/h5/QueryProductContractItem', {
					accountId: this.HomeDataInfo['accountId'],
					serviceItemCode
				})
				if (data['code'] != 200) {
					await Dialog({
						title: '温馨提示',
						message: data['message'],
						confirmButtonText: "知道了"
					})
					return
				}
				this.userInfo = {
					schoolId: data.data['schoolId'] || '',
					userId: data.data['userId'],
					userType: data.data['userType'] || ''
				}
				return data.data['result']
			},
			// 获取首页数据
			async HomePageData() {
				const data = await requestPost('/cgi-xpay/app/h5/HomePageData', {})
				if (data['code'] != 200) {
					await Dialog({
						title: '温馨提示',
						message: data['message'],
						confirmButtonText: "知道了"
					})
					return
				}
				const schoolConsumption = data.data['schoolConsumption']
				for (let s in schoolConsumption) {
					let integer = 0,
						decimal = 0
					const value = (schoolConsumption[s] / 100).toFixed(2)
					integer = value.split(".")[0]
					decimal = value.split(".")[1]
					schoolConsumption[`${s}_integer`] = integer
					schoolConsumption[`${s}_decimal`] = decimal
				}
				data.data['schoolConsumption'] = schoolConsumption
				this.HomeDataInfo = data.data
				sessionStorage.setItem('HomeDataInfo', JSON.stringify(this.HomeDataInfo))
				sessionStorage.setItem('accountId', this.HomeDataInfo['accountId'])
				// 查询消费会员权益项
				this.QueryProductContractItem()
			},
			// 跳转页面
			async goToPage(value) {
				switch (value) {
					case 1:
						uni.navigateTo({
							url: '../pendingOrder/pendingOrder'
						})
						break;
					case 2:
						uni.navigateTo({
							url: '../topupDetail/topupDetail'
						})
						break;
					case 3:
						break;
					default:
						break;
				}

			},
			// 跳转云平台权益中心
			async openAzMenber() {
				jWeixin.miniProgram.navigateTo({
					url: '/pages/nationalCenterForLesbianRights/index?productId=3'
				})
			},
			// 菜单跳转
			async menuClick(item, index) {
				if (!item.path) {
					return
				}
				if (this.HomeDataInfo['membershipStatus'] == 1) {
					if (item['auth'] && item['serviceItemCode']) {
						// 查询消费会员权益项
						const result = await this.QueryProductContractItem(item['serviceItemCode'])
						if (result == "fail") {
							this.contractMenber = true
							throw ('您还未开通消费会员，')
						}
					}
				}
				const query =
					`?name=${this.HomeDataInfo['userName']}&accountId=${this.HomeDataInfo['accountId']}&userId=${this.userInfo['userId']}&schoolId=${this.userInfo['schoolId']}&userType=${this.userInfo['userType']}`
					console.log(item.path + query)
				uni.switchTab({
					url: item.path + query,
					fail: () => {
						uni.navigateTo({
							url: item.path + query
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		width: 100%;
		background: #F1F1F3;
	}

	.CampusConsumption {

		.modalDlgBox {
			width: 100%;
			height: 467rpx;
			top: 480rpx;
			background-color: #FFFFFF;
			border-radius: 26rpx;
			margin: 0 auto;


			background-image: url(https://xiaopay2020.oss-cn-shenzhen.aliyuncs.com/static/weapp/xzfalipay/dlgb.png);
			background-size: 100% 100%;
			background-repeat: no-repeat;

			.modalDlgHeader {
				width: 100%;
				height: 124rpx;
				border-radius: 20rpx 20rpx 0rpx 0rpx;
				line-height: 124rpx;

				font-size: 36rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 600;
				color: #512C19;
				text-align: center;
			}


			.contentt {
				width: 504rpx;
				height: 189rpx;
				margin: 0 auto;
				text-align: center;

				// margin-top: 33rpx;
				// line-height: 45rpx;
				.quanyi {
					position: relative;
					height: 100%;
					width: 100%;
				}

				.line1 {
					font-size: 34rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 600;
					color: rgba(0, 0, 0, 0.85);
				}

				.line2 {
					margin-top: 14rpx;
					font-size: 28rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: rgba(0, 0, 0, 0.85);
				}
			}

			.btngroup {
				display: flex;
				position: absolute;
				left: 0;
				right: 0;
				bottom: 40rpx;
				justify-content: space-around;

				button {
					width: 234rpx;
					height: 78rpx;
					border-radius: 12rpx;
					line-height: 78rpx;
					text-align: center;

					font-size: 30rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
				}

				button::after {
					border: none;
				}

				button:nth-child(1) {
					background: #EBEBEB;
					border-radius: 12rpx;
				}

				button:nth-child(2) {
					background: linear-gradient(90deg, #FFE25E 0%, #FFC222 100%);
					opacity: 0.9;
				}
			}
		}

		.cardInfo {
			width: 686rpx;
			height: 435rpx;
			margin: 0 auto;
			margin-top: 24rpx;
			background-size: 100% 100%;
			background-repeat: no-repeat;
			position: relative;

			.cdatabox2 {
				display: flex;
				justify-content: space-around;
				margin-top: 57rpx;

				.cdatal,
				.cdatar {
					font-family: DINAlternate-Bold, DINAlternate;
					color: rgba(0, 0, 0, 0.85);

					.lable {
						display: flex;
						align-items: center;
						height: 37rpx;
						font-size: 26rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: rgba(0, 0, 0, 0.4);
						line-height: 37rpx;

						.rigth {
							position: relative;
							height: 24rpx;
							width: 24rpx;
							left: 5rpx;
						}
					}
				}

				.integer {
					display: inline-block;
					font-size: 36rpx;
				}

				.integer::before {
					content: '\00A5';
					font-size: 28rpx;
					font-family: DIN Alternate Bold;
					font-weight: bold;
				}

				.decimal {
					font-size: 30rpx;
				}
			}

			.cdatabox {
				display: flex;
				margin-top: 20rpx;

				.cdatal,
				.cdatar {
					font-family: DINAlternate-Bold, DINAlternate;
					color: rgba(0, 0, 0, 0.85);

					.lable {
						height: 40rpx;
						font-size: 28rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: rgba(0, 0, 0, 0.4);
						line-height: 40rpx;
					}
				}

				.cdatal {
					margin-left: 53rpx;
				}

				.cdatar {
					margin-left: 219rpx;
				}

				.integer {
					font-size: 60rpx;
				}

				.decimal {
					font-size: 30rpx;
				}
			}

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

				.left {
					display: flex;
					align-items: center;
					padding-left: 30rpx;

					.name {
						margin-left: 14rpx;
						font-size: 34rpx;
						font-family: PingFangSC-Medium, PingFang SC;
						font-weight: 500;
					}

					.useravatar {
						height: 52rpx;
						width: 52rpx;
						border-radius: 50%;
						background-color: white;
						background-size: 100% 100%;
						background-repeat: no-repeat;
						border: 4rpx solid white;
					}

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

				.right {
					padding-right: 24rpx;
					display: flex;
					align-items: center;

					.lable {
						font-size: 28rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: rgba(81, 44, 25, 0.7);
					}

					image {
						position: relative;
						height: 36rpx;
						width: 36rpx;
						left: -9rpx;
					}
				}
			}
		}

		.menberImg {
			height: 516rpx;
			width: 686rpx;
			margin: 0 auto;
			margin-top: 32rpx;
			position: relative;

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

			.tomenber {
				width: 600rpx;
				height: 90rpx;
				background: linear-gradient(270deg, #FDC359 0%, #FADDA3 100%);
				border-radius: 12rpx;
				position: absolute;
				margin: 0 auto;
				left: 0;
				right: 0;
				bottom: 35rpx;
				opacity: 0;
			}
		}

		.menuList {
			width: 686rpx;
			background: #F1F1F3;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			align-items: center;
			margin: 0 auto;

			.menuitem {
				width: 331rpx;
				height: 136rpx;
				background: #FFFFFF;
				border-radius: 16rpx;
				margin-top: 24rpx;
				display: flex;
				align-items: center;
				justify-content: space-evenly;

				.title {
					height: 42rpx;
					font-size: 30rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #333333;
					line-height: 42rpx;
				}

				.sketch {
					height: 28rpx;
					font-size: 20rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: rgba(0, 0, 0, 0.3);
					line-height: 28rpx;
				}

				image {
					position: relative;
					height: 80rpx;
					width: 80rpx;
				}
			}
		}
	}
</style>