<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)">
				<view class="">
					<view class="title">{{item.title||''}}</view>
					<view class="sketch">{{item.sketch||''}}</view>
				</view>
				<view class="icon">
					<image :src="item.icon" mode="aspectFit"></image>
				</view>
			</view>
		</view>
		<!-- 会员尊享权益 -->
		<view class="menberImg">
			<image :src="this.$ImgUrl + 'applyCons/menberImg.png'" mode="aspectFit"></image>
			<view class="tomenber" @tap="openAzMenber"></view>
		</view>
	</view>
</template>

<script>
	import {
		Dialog
	} from 'vant';
	import config from '../common/config.js'
	import {
		requestGet,
		requestPost
	} from '../common/request.js'
	export default {
		name: "CampusConsumption",
		data() {
			return {
				ImgUrl: this.$ImgUrl,
				menuList: Array(4).fill(1).map((v, index) => {
					return {
						path: ['../ConsumptIoninfo/ConsumptIoninfo', '../ConsumptionQuota/ConsumptionQuota',
							'/pages/ConsumptionSystem/AbnormalConsumption/AbnormalConsumption?userId=4145549&schoolId=60804',
							'../CommonProblem/CommonProblem'
						][index],
						title: ['消费记录', '消费限额', '消费异常', '常见问题'][index],
						sketch: ['消费记录 笔笔可查', '设置额度 管控消费', '消费异常 每日提醒', '使用疑问 一一解答'][index],
						icon: this.$ImgUrl + `applyCons/menu${index+1}.png`
					}
				}),
				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
				}
			};
		},
		onLoad(options) {
			uni.setStorageSync('token',
				`eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJwaG9uZSI6IjE4OTQyNTA4MzY0IiwidXNlcklkIjoiMjA4ODIxMjM4MzI0MDM1MSIsImJpbmRVc2VySWQiOiI2MTMwMCIsImJpbmRVc2VyVHlwZSI6IjIiLCJiaW5kQWNjb3VudElkIjoiMTEzIiwic291cmNlIjoiYWxpcGF5IiwiZXhwIjoxNjg4NzE3MDQyLCJpc3MiOiJhZG1pbiIsIm5iZiI6MTY4ODcxMjQ0Mn0.TJIWWE85hrDLENglp5YVqh8sVFzi5hE-17DjfputrOg`
			)
			this.HomePageData()
			// if (!options['schoolId'] || !options['userId']) {
			// 	Dialog({
			// 		title: '系统提示！',
			// 		message: '学生Id或学校Id为必传参数！',
			// 		confirmButtonText: "知道了"
			// 	}).then(res => {
			// 		window.close()
			// 	})
			// 	return;
			// }
		},
		methods: {
			// 查询消费会员权益项
			async QueryProductContractItem() {
				const data = await requestPost('/cgi-xpay/app/h5/QueryProductContractItem', {
					accountId: this.HomeDataInfo['accountId'],
					serviceItemCode: '1008'
				})
				if (data['code'] != 200) {
					await Dialog({
						message: data['message'],
						confirmButtonText: "知道了"
					})
					return
				}
				console.warn(data)
			},
			// 获取首页数据
			async HomePageData() {
				const data = await requestPost('/cgi-xpay/app/h5/HomePageData', {})
				if (data['code'] != 200) {
					await Dialog({
						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
				// 查询消费会员权益项
				this.QueryProductContractItem()
			},
			// 跳转页面
			async goToPage(value) {
				switch (value) {
					case 1:
						break;
					case 2:
						break;
					case 3:
						break;
					default:
						break;
				}
			},
			// 跳转云平台权益中心
			async openAzMenber() {
				wx.miniProgram.navigateTo({
					url: '/pages/nationalCenterForLesbianRights/index'
				})
			},
			// 菜单跳转
			async menuClick(item) {
				console.warn(item)
				if (!item.path) {
					return
				}
				uni.switchTab({
					url: item.path,
					fail: () => {
						uni.navigateTo({
							url: item.path
						})
					}
				})
			}
		}
	}
</script>

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

	.CampusConsumption {
		.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>