<template>
	<view class="hole-page">
		<view class="nav-bar"></view>
		<view class="upper-card">
			<view class="card-tit">
				<span>当前积分</span>
				<view>
					<view @click="showHelp">积分说明</view>
					<image src="../../static/alert.png" mode=""></image>
				</view>
			</view>
			<view class="score">{{ score }}</view>
			<view class="sub-tit">今日积分</view>
			<view class="sub-cont">
				<h4>
					<span>学习项目</span>
					<span>0分</span>
				</h4>
				<h4>
					<span>考试</span>
					<span>0分</span>
				</h4>
				<h4>
					<span>自测练习</span>
					<span>0分</span>
				</h4>
			</view>
		</view>
		<view class="to-mall">
			<view class="mall-lef">
				<image src="../../static/mallSelected.png" mode=""></image>
				<span style="padding-left: 10rpx;">前往积分商城兑换商品</span>
			</view>
			<view class="mall-rig" @click="toggleMall">立即兑换</view>
		</view>
		<view class="lower-switch">
			<view 
				class="recieve"
				:class="[{ active: switchCount == 0 }]"
				@click="midSwitch(0)"
			>
				奖惩记录
			</view>
			<view 
				class="exchange"
				:class="[{ active: switchCount == 1 }]"
				@click="midSwitch(1)"
			>
				兑换记录
			</view>
		</view>
		<view 
			class="fetch-record"
			v-show="switchCount == 0"
		>
			
		</view>
		<view 
			class="exchange-record"
			v-show="switchCount == 1"
		>
			<view 
				class="single-record"
				v-for="(gift, index) in exchangeRecord"
				:key="index"
			>
				<view class="gift-upper">
					<h3>{{ gift.shopName }}*{{ gift.shopSum }}</h3>
					<span>-{{ gift.changePoint }}</span>
				</view>
				<view class="gift-lower">
					{{ gift.shopTime }}
				</view>
				<!-- <view>{{ gift.shopName }}</view>
				<view>{{ gift.shopSum }}</view>
				<view>-{{ gift.changePoint }}</view>
				<view>{{ gift.shopTime }}</view> -->
			</view>
		</view>
		<view
			class="exchange-record"
			v-show="switchCount == 0"
		>
			<view 
				class="single-record"
				v-for="(gift, index) in awardPunishRecord"
				:key="index"
			>
				<view class="gift-upper">
					<h3 style="font-size: 16px;">{{ gift.pointResource }}</h3>
					<span>{{ gift.changePoint }}</span>
				</view>
				<view class="gift-lower">
					{{ gift.shopTime }}
				</view>
				<!-- <view>{{ gift.shopName }}</view>
				<view>{{ gift.shopSum }}</view>
				<view>-{{ gift.changePoint }}</view>
				<view>{{ gift.shopTime }}</view> -->
			</view>
		</view>
		<uni-popup ref="popup" type="center" :mask-click="false">
			<view
				style="
					width: 75%; 
					height: 100%; 
					margin: 2% auto; 
					background-color: #fff; 
					box-sizing: border-box; 
					padding: 20rpx 40rpx;
					font-size: 14px;
					line-height: 30px;
					display: flex;
					flex-direction: column;
					justify-content: space-around;
				"
			>
				根据现场施工人员实名制花名册，统一录入至“安全管控平台”，并设施每人初始安全积分，初始积分为60分。
				<br>
				施工人员可以通过参加安全质量培训，安全知识自学，举报违章操作，及时发现安全隐患，完成隐患排查及整改，发现他人违章，个人违章自查自改，安全竞赛取得成效或名次等方式获取相应的安全积分。
				<br>
				当施工人员被举报违章，发生不符合安全文明施工的行为，安全问题整改通知单整改不及时，不参加站班会及各类安全会议等情况将扣除相应积分。
				<br>
				个人积分设置两个档位，一是当个人积分下降至40分时，系统会发出预警，提醒作业人员尽快完成积分的补充；二是当个人积分下降至30分时，后台及个人手机端将会“亮红灯”，禁止相关施工人员进入现场作业。“亮红灯”后，施工人员只有参加项目部组织的安全考试合格后，积分恢复至30分以上方可重新进场作业。
				<!-- <button 
					style="width: 100%; background-color: #04367a; color: #fff;"
					@click="closeHelp"
				>
					关闭说明
				</button> -->
				<view 
					style="
						width: 100%; 
						margin-top: 5vh;
						display: flex; 
						justify-content: center; 
						align-items: center; 
						box-sizing: border-box;
						padding: 10rpx 0;
						font-size: 14px;
						background-color: #219ef8;
						color: #fff;
						border-radius: 15rpx;
					"
					@click="closeHelp"
				>
					关闭说明
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
import { publicPath } from '../../public'
	export default {
		data() {
			return {
				score: uni.getStorageSync('point'),
				switchCount: 0,
				exchangeRecord: [],
				awardPunishRecord: []
			}
		},
		methods: {
			midSwitch (count) {
				this.switchCount = count
			},
			toggleMall () {
				uni.navigateTo({
					url: '/pages/pointsMall/pointsMall'
				})
			},
			showHelp () {
				this.$refs.popup.open()
			},
			closeHelp () {
				this.$refs.popup.close()
			}
		},
		onShow() {
			let that = this
			that.exchangeRecord = []
			// 获取奖品兑换记录
			uni.request({
				url: publicPath + '/backstage/appshoping/getchangehistory',
				method: 'POST',
				header: {
					'content-type':'application/x-www-form-urlencoded; charset=UTF-8'
				},
				data: {
					userId: uni.getStorageSync('id'),
					shopId: '0'
				},
				success: (res) => {
					console.log(res);
					if (res.data.length != 0) {
						that.exchangeRecord = res.data
					}
				}
			})
			// 获取奖惩记录
			uni.request({
				url: publicPath + '/backstage/appshoping/getchangehistory',
				method: 'POST',
				header: {
					'content-type':'application/x-www-form-urlencoded; charset=UTF-8'
				},
				data: {
					userId: uni.getStorageSync('id'),
					shopId: ''
				},
				success: (res) => {
					console.log(res);
					if (res.data.length != 0) {
						that.awardPunishRecord = res.data
					}
				}
			})
		}
	}
</script>

<style lang="scss">
	.hole-page{
		width: 100%;
		height: 100vh;
		background-color: #f7fbfe;
		.nav-bar{
			width: 100%;
			height: var(--status-bar-height);
			padding-top: var(--status-bar-height);
		}
		.upper-card{
			width: 95%;
			margin: 20rpx auto;
			border-radius: 25rpx;
			/* background-image: url('/static/pointsBgd.png');
			background-repeat: no-repeat;
			background-size: 100% 100%; */
			background: linear-gradient(90deg, #036acf, #1b8aec, #3fa7fe);
			box-sizing: border-box;
			padding: 25rpx;
			color: #fff;
			.card-tit{
				width: 100%;
				height: 40rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-size: 14px;
				view{
					width: 25%;
					height: 100%;
					display: flex;
					align-items: center;
					justify-content: space-around;
					image{
						width: 20%;
						height: 80%;
					}
					view{
						flex: 1;
						font-weight: bold;
					}
				}
			}
			.score{
				width: 100%;
				font-size: 40px;
				font-weight: bold;
				margin: 15rpx auto;
			}
			.sub-tit{
				font-size: 14px;
				margin: 15rpx auto;
			}
			.sub-cont{
				width: 100%;
				display: flex;
				h4{
					margin-right: 6vw;
					box-sizing: border-box;
					display: flex;
					align-items: center;
					font-size: 14px;
					font-weight: normal;
					border-radius: 15rpx;
					span:first-child{
						padding-right: 10rpx;
					}
				}
				h4:last-child{
					margin-right: 0;
				}
			}
		}
		.to-mall{
			width: 95%;
			margin: 20rpx auto;
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 14px;
			box-sizing: border-box;
			padding: 0 10rpx;
			.mall-lef{
				width: 50%;
				height: 40rpx;
				display: flex;
				align-items: center;
				image{
					width: 10%;
					height: 100%;
				}
			}
			.mall-rig{
				color: #219ef8;
			}
		}
		.lower-switch{
			width: 95%;
			margin: 20rpx auto;
			margin-bottom: 0;
			display: flex;
			align-items: center;
			background-color: #fff;
			box-sizing: border-box;
			padding: 20rpx;
			border-radius: 20rpx;
			view{
				display: flex;
				justify-content: center;
				align-items: center;
				box-sizing: border-box;
				padding: 15rpx;
				font-size: 16px;
				margin-right: 15rpx;
			}
			.active{
				color: #219ef8;
				border-bottom: 2px solid #219ef8;
			}
		}
		.fetch-record, .exchange-record{
			width: 95%;
			box-sizing: border-box;
			border-radius: 15rpx;
			padding: 10rpx;
			margin: 0 auto;
			background-color: #fff;
		}
		.fetch-record{
			// background-color: #0053FD;
		}
		.exchange-record{
			display: flex;
			flex-direction: column;
			.single-record{
				width: 100%;
				margin: 20rpx auto;
				box-sizing: border-box;
				padding: 20rpx;
				display: flex;
				flex-direction: column;
				border-bottom: 1px solid #dbdbdb;
				.gift-upper{
					width: 100%;
					margin-bottom: 10rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					h3{
						font-size: 20px;
					}
					span{
						font-size: 20px;
						font-weight: bold;
						color: red;
					}
				}
				.gift-lower{
					width: 100%;
					font-size: 14px;
					color: #7f7f7f;
				}
			}
		}
	}
</style>
