<template>
	<view class="integral">
		<view class="header" :class="'bg-' + themeColor.name">
			<view class="title">当前步数</view>
			<text class="num">
				{{
					(todayStep) ||
						'0'
				}}
			</text>

			<view class="line" />
			<view class="nav">
				<view class="item" @tap="stepToBlance">
					<text class="num">
						兑换
					</text>
					<text class="title">兑换积分</text>
				</view>
				<view class="item">
					<text class="num">
						{{
							(
								allowStep ) || '0'
						}}
					</text>
					<text class="title">可兑换步数</text>
				</view>
				<view class="item">
					<text class="num">
						{{
							(allowStep/1000) ||
								'0'
						}}
					</text>
					<text class="title">可兑换积分</text>
				</view>
			</view>
			<view class="tab">
				<view class="item" :class="current === index ? `text-${themeColor.name} on` : ''" v-for="(item, index) in navList"
				 :key="index" @tap="nav(index)">
					{{ item.name }}
				</view>
			</view>
		</view>
		<view class="wrapper">
			<view class="list1" :hidden="current !== 1">
				<view class="tip acea-row row-middle">
					<span class="iconfont icon-shuoming"></span>提示：
				</view>
				<view class="list b-b" v-for="(item, index) in integralList" :key="index">
					<view class="wrapper">
						<view class="address-box">
							{{ index+1 }}
						</view>
						<view class="u-box">
							{{ item.userName  }}
						</view>
					</view>
					<text class="change-num" :class="
							userInfo.id==item.userId ? 'change-num-add' : 'change-num-reduce'
						">{{ item.step }}</text>
				</view>
	<rf-load-more class="load-more" :status="loadingType"></rf-load-more>
			</view>
			<view class="list1" :hidden="current !== 0">
				<view class="tip acea-row row-middle">
					<span class="iconfont icon-shuoming"></span>提示：
				</view>
				<view class="list b-b" v-for="(item, index) in integralOrderList" :key="index">
					<view class="wrapper">
						<view class="address-box">
							{{ index+1 }}
						</view>
						<view class="u-box">
							{{ item.data  }}
						</view>
					</view>
					<text class="change-num" :class="
                  							true ? 'change-num-add' : 'change-num-reduce'
                  						">{{ item.step }}</text>
				</view>
				<rf-load-more class="load-more" :status="loadingType"></rf-load-more>
			</view>
		</view>
		<!--加载动画-->
		<rfLoading isFullScreen :active="loading"></rfLoading>
	</view>
</template>
<script>
	/**
	 * @des 积分中心
	 *
	 * @author 237524947@qq.com
	 * @date 2020-01-10 15:24
	 * @copyright 2019
	 */
	import {
		runData,
		selectOrderBYStep,stepToBlance,
		queryStepData
	} from '@/api/userInfo';
	import rfLoadMore from '@/components/rf-load-more/rf-load-more.vue';

	import moment from '@/common/moment';
	export default {
		name: 'Integral',
		components: {
			rfLoadMore
		},
		data() {
			return {
				navList: [{
					name: '我的步数'
				}, {
					name: '步数排名'
				}],
				current: 0,
				allowStep:0,
				todayStep:0,
				pointAdd: 0,
				pointMin: 0,
				integralList: [],
				integralOrderList: [],
				loadingType: 'more',
				pageNum: 0,
				userInfo: {},
				loading: true
			};
		},
		// 小程序分享
// 下拉刷新
  		onPullDownRefresh() {

  			this.initData();
  			setTimeout(() => {
                						uni.stopPullDownRefresh();
                					}, 250);
  		},
    	 onShareAppMessage() {
          if (!this.hasLogin) {
          let userInfo = uni.getStorageSync('userInfo')
          						return {
                        			title: `邀请好友获取步数来兑换奖品吧!`,
                        			path: '/pages/index/index?recommondCode='+userInfo.selfRecommendCode
                        		};
          				} else {
          						return {
                        			title: `邀请好友获取步数来兑换奖品吧!`,
                        			path: '/pages/index/index'
                        		};
          				}

          	},
		onLoad(option) {
			this.initData(option);
		},
		filters: {
			time(val) {
				return moment(val * 1000).format('YYYY-MM-DD HH:mm:ss');
			},
			numFilter(val) {
				return val >= 0 ? `+${val.toString()}` : val;
			}
		},
		// 加载更多
		onReachBottom() {
			if (this.loadingType === 'nomore') return;
			this.pageNum++;
			this.getIntegralListList();
		},
		methods: {
			toCategory() {
				this.$mRouter.reLaunch({
					route: '/pages/category/category'
				});
			},
			nav(index) {
				this.loading = true;
				this.current = index;
				this.pageNum = 0;
				this.integralOrderList.length = 0;
				if (index == 1) {
					this.selectOrderBYStep();
				} else {
					this.queryStepData();
				}

			},
			async stepToBlance(){
			console.log(this.allowStep)
				if(this.allowStep<1001){
				  this.$mHelper.toast('步数不够1000，不能兑换');
			  	return false;
				}
				await this.$http
        				.get(`${stepToBlance}`, {

                					})
        				.then(r => {

        				this.$mHelper.toast('成功兑换'+r+'个积分');
        					this.pageNum = 0;
                				this.integralOrderList.length = 0;
                					this.initData();
        				});
			},
			initData(option) {
				// if (false) {
				if (this.$mStore.getters.hasLogin) {
					var baseUrl = `${this.$mConfig.baseUrl}`;
					let aStep =0;
					uni.authorize({
						scope: 'scope.werun',
						success() {
							wx.getWeRunData({
								success: function(res) {
									wx.request({
										url: baseUrl + `${runData}`,
										method: 'post',
										header: {
											'content-type': 'application/json',
											'Authorization': 'Bearer ' + uni.getStorageSync('accessToken')
										},
										data: {
											iv: res.iv,
											encryptedData: res.encryptedData,
											sessionKey: uni.getStorageSync('sessionKey')
										},
										success: res => {

											uni.setStorageSync('todayStep', res.data.data.currentStep)
											uni.setStorageSync('allowStep', res.data.data.allowStep)

										},
										fail: err => {
											console.log(err)
											wx.showModal({
												title: '提示',
												content: err,
												showCancel: false,
												confirmText: '知道了'
											})
										}
									})
								}
							})
						}
					})
					this.allowStep=uni.getStorageSync('allowStep')
					this.todayStep=uni.getStorageSync('todayStep')
				}
				this.userInfo = uni.getStorageSync('userInfo') || undefined;

				if (option && option.index == 1) {
					this.nav(1)
					this.selectOrderBYStep();
				} else {
					this.queryStepData();
				}


			},


			async queryStepData() {
				await this.$http
					.get(`${queryStepData}`, {
						pageNum: this.pageNum,

					})
					.then(r => {
						this.loading = false;
						if (r.rows) {
							this.loadingType = r.rows.length === 10 ? 'more' : 'nomore';
							this.integralOrderList = [...this.integralOrderList, ...r.rows];
						}
					})
					.catch(() => {
						this.loading = false;
					});
				uni.setStorageSync('todayStep', this.integralOrderList[0].step)
				this.allowStep=uni.getStorageSync('allowStep')
				this.todayStep=uni.getStorageSync('todayStep')
			},
			async selectOrderBYStep() {
				await this.$http
					.get(`${selectOrderBYStep}`, {
						pageNum: this.pageNum,
					})
					.then(r => {
						this.loading = false;
						this.integralList = r;
						var count = 0;
						this.integralList.forEach(level => {
						console.log(level.step+',,'+level.userId)
							count++;
							if (level.userId == this.userInfo.id) {

								if (count > 99) {
									uni.setStorageSync('todayRank', '99+' )
								} else { let counts=1;
								counts=count;
									uni.setStorageSync('todayRank', counts)
								}
								throw Error();
							}
						})

					})
					.catch(() => {
						this.loading = false;
					});
			}
		}
	};
</script>
<style scoped lang="scss">
	page {
		background-color: $color-white;
	}

	.integral {
		background-color: $color-white;
		/*  #ifndef H5  */
		height: 100vh;

		/*  #endif  */
		.header {
			opacity: 0.9;
			background-repeat: no-repeat;
			background-size: 100% 100%;
			width: 100%;
			height: 420upx;
			font-size: $font-base;
			color: #fff;
			padding: 20upx 0;
			text-align: center;
			position: relative;

			.title {
				font-size: $font-sm;
				margin: 10upx 0;
			}

			.num {
				/*<!--color: $base-color;-->*/
				font-size: $font-lg + 20upx;
				font-weight: lighter;
				line-height: 1;
			}

			.line {
				width: 10%;
				height: 3upx;
				background-color: #fff;
				margin: 20upx auto 30upx;
			}

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

				.item {
					flex: 1;

					.num {
						font-size: $font-lg + 4upx;
						display: block;
						line-height: 1;
					}
				}
			}

			.tab {
				position: absolute;
				bottom: -2upx;
				display: flex;
				width: 80%;
				margin: 0 10%;
				border-radius: 20upx 20upx 0 0;
				background-color: #f7f7f7;
				height: 80upx;
				line-height: 80upx;
				font-size: $font-base;
				color: #bbb;

				.item {
					flex: 1;
					text-align: center;
					line-height: 80upx;
				}

				.on {
					background-color: #fff;
					font-weight: bold;
					border-radius: 20upx 0 0 0;
				}

				.on:last-child {
					border-radius: 0 20upx 0 0;
				}
			}
		}
	}

	.wrapper .list1 {
		background-color: #fff;

		.tip {
			font-size: $font-sm;
			width: 90%;
			margin: $spacing-base 5%;
			height: 64upx;
			line-height: 64upx;
			border-radius: 30upx;
			background-color: #fff5e2;
			border: 1px solid #ffeac1;
			color: #c8a86b;
			text-align: center;
		}

		.list {
			display: flex;
			align-items: center;
			padding: 20upx 36upx;
			background: #fff;
			position: relative;

			.wrapper {
				display: flex;
				flex-direction: column;
				flex: 1;

				.address-box {
					display: flex;
					align-items: center;
					font-size: $font-base;
					color: $font-color-dark;
				}

				.u-box {
					color: $font-color-light;
					font-size: $font-sm;
				}
			}

			.change-num {
				font-size: $font-lg + 4upx;
				color: $font-color-base;
			}

			.change-num-add {
				color: #16ac57;
			}

			.change-num-reduce {
				color: $base-color;
			}
		}
	}

	.wrapper .list2 {
		/*background-color: #F76260;*/
	}

	.wrapper .list2 .item {
		background-image: linear-gradient(to right, #fff7e7 0%, #fffdf9 100%);
		width: 90%;
		margin: $spacing-base 5%;
		height: 120upx;
		line-height: 120upx;
		position: relative;
		border-radius: 20upx;
		padding: 0 20upx;
		display: flex;
	}

	.wrapper .list2 .item .pictrue {
		width: 60upx;
		height: 100upx;
		margin: 20upx 0;

		image {
			width: 80%;
			height: 80%;
		}
	}

	.wrapper .list2 .item .name {
		flex: 1;
		font-size: $font-sm;
		font-weight: bold;
		color: #c8a86b;
		margin: 0 20upx;
	}

	.wrapper .list2 .item .earn {
		font-size: $font-sm;
		color: #c8a86b;
		border: 2upx solid #c8a86b;
		text-align: center;
		height: 48upx;
		margin: 36upx 0;
		width: 120upx;
		border-radius: 10upx;
	}
</style>
