<template>
	<view>

		<view class="projuctTab flex">
			<view class="tabitems flex1" :class="{active:tabactive==1}" @tap="taggletab(1)">
				<view class="tabtitle">参与人员</view>
				<!-- （{{count[0]}}） -->
			</view>
			<view class="tabitems flex1" :class="{active:tabactive==2}" @tap="taggletab(2)">
				<view class="tabtitle">核销人员</view>
				<!-- （{{count[1]}}） -->
			</view>
		</view>




		<view class="" style="margin-top:90upx ;" :hidden="!(tabactive==1)">
			<view class="">
				<view  class="" style="text-align: center;height: 120upx;line-height: 120upx;font-weight: bold;font-size: 32upx;">

					已有 <text style="color: #21B94C;font-size: 60upx;">{{receivePeopleNumber}}</text>人参与

				</view>
	
			</view>

			<view class="" style="height: 100upx;padding: 0 24upx;background-color: rgb(255, 255, 255);margin-bottom: 2upx;"v-for="(item,index) in getAllDetail">
				<view class="fx " style="justify-content: space-between;background-color: #fff;   align-items: center;height: 100%">
					<view class="fx" style="width: 75%;align-items: center;">
						<view style="height: 80upx;width: 80upx;border-radius: 120upx;text-align: center;line-height: 80upx;overflow: hidden;">
							<image :src="item.face" style="display: inline;"></image>

						</view>
						<view style="margin:0 0 0 10upx;width: 75%;padding: 20upx 10upx;">
							<view style="font: 34upx 微软雅黑;padding-bottom:10upx ;" class="oneline">{{item.nickname}}</view>
							<view style="font-size:20upx;color:rgb(116, 113, 113);padding-top: 10upx;">{{item.create_time}}</view>
						</view>

					</view>

					<view style="width: 15%;height: 104upx;">
						<!-- <image src="/static/lingqu.png" mode="" style="width:100% ;height: 100%;display: inline;"></image> -->
					</view>
					<!-- 关注插槽 -->
					<!-- <slot name="before"></slot> -->

				</view>

				<!-- <slot name="content"> </slot> -->
			</view>
			<view v-if="getAllDetail.length <= 0" style="text-align: center;width: 100%;height:1000upx;line-height: 1000upx;font-size: 50upx;color:#8C8C8C ;">
				<image src="https://luma.jxdsy.cn//static/applet5/images/uts/meiyoule.png" mode=""></image>
			</view>
		</view>


		<view class="" style="margin-top:90upx ;" :hidden="tabactive==1">
			<view class="">
				<view class="" style="text-align: center;height: 120upx;line-height: 120upx;font-weight: bold;font-size: 32upx;">

					已有 <text style="color: #21B94C;font-size: 60upx;">{{enterPeopleNumber}}</text>人核销

				</view>
			</view>

			<view class="" style="height: 100upx;padding: 0 24upx;background-color: rgb(255, 255, 255);margin-bottom: 2upx;"
			 v-for="(item,index) in getScanDetail">
				<view class="fx " style="justify-content: space-between;background-color: #fff;   align-items: center;
			height: 100%">
					<view class="fx" style="width: 75%;align-items: center;">
						<view style="height: 80upx;width: 80upx;border-radius: 120upx;text-align: center;line-height: 80upx;overflow: hidden;">
							<image :src="item.face" style="display: inline;"></image>

						</view>
						<view style="margin:0 0 0 10upx;width: 75%;padding: 20upx 10upx;">
							<view style="font: 34upx 微软雅黑;padding-bottom:10upx ;" class="oneline">{{item.nickname}}</view>
							<view style="font-size:20upx;color:rgb(116, 113, 113);padding-top: 10upx;">{{item.verification_time}}</view>
						</view>

					</view>

					<view style="width: 10%;height: 70upx;">
					
						<image src="/static/lingqu.png" mode="" style="width:100% ;height: 100%;display: inline;"></image>
					</view>
					<!-- 关注插槽 -->
					<!-- <slot name="before"></slot> -->

				</view>

				<!-- <slot name="content"> </slot> -->
			</view>
			<view v-if="getScanDetail.length <= 0" style="text-align: center;width: 100%;height:1000upx;line-height: 1000upx;font-size: 50upx;color:#8C8C8C ;">
				<image src="https://luma.jxdsy.cn//static/applet5/images/uts/meiyoule.png" mode=""></image>
			</view>
		</view>


	</view>
</template>

<script>
	import {
		activity_user
	} from '@/utils/api/merchant.js';
	export default {
		data() {
			return {
				shop_id: '',
				activity_id: '',
				getAllDetail: [], // 参与人员列表
				getScanDetail: [], //核销人员列表
				allpage: 0, // 参与人员分页数
				scanpage: 0, //核销人员分页数
				enterPeopleNumber:0,//核销人数
				receivePeopleNumber: 0, //参与人数
				// unreceivePeopleNumber: 0,
				tabactive: 1,

			}
		},

		onLoad(options) {
			let that = this
			that.activity_id = options.activity_id
			uni.getStorage({
				key: 'userInfo',
				success(res) {
					that.shop_id = res.data.shop_id
				}
			})

			this.activityUserAll(that.shop_id, that.activity_id); //获取参与人员
		},
		/**
		 * 触底事件
		 */
		onReachBottom() {
			// console.log('触底了',this.tabactive)
			if (this.tabactive == 1) {
				this.allpage++
				// this.activityUserAll(this.shop_id, this.activity_id, 0, this.allpage)
				activity_user({
					shop_id: shop_id,
					activity_id: activity_id,
					nucleus: 0,
					page: this.allpage
				}).then(res => {
					if (res.code == 0) {
						this.getScanDetail =[...this.getScanDetail,...res.data.list]
						
						this.receivePeopleNumber = res.data.receivePeopleNumber;
						// this.unreceivePeopleNumber = res.data.unreceivePeopleNumber;
					}
				})
			} else if (this.tabactive == 2) {
				this.scanpage++
				
				activity_user({
					shop_id: shop_id,
					activity_id: activity_id,
					nucleus: 1,
					page: this.scanpage
				}).then(res => {
					if (res.code == 0) {
						this.getScanDetail =[this.getScanDetail,...res.data.list]
						
						this.enterPeopleNumber = res.data.receivePeopleNumber;
						// this.unreceivePeopleNumber = res.data.unreceivePeopleNumber;
					}
				})
				
				// this.activityUserScan(this.shop_id, this.activity_id, 1, this.scanpage)
			} else {
				return false;
			}
		},

		/**
		 * 下拉刷新
		 */
		onPullDownRefresh() {
			this.allpage = 1
			this.scanpage = 1

			this.activityUserAll(this.shop_id, this.activity_id, )

			this.activityUserScan(this.shop_id, this.activity_id)

			uni.stopPullDownRefresh();

		},
		methods: {
			taggletab(index) {
				this.tabactive = index;
				if (index == 1) {
					this.activityUserAll(this.shop_id, this.activity_id, )
				} else if (index == 2) {
					this.activityUserScan(this.shop_id, this.activity_id)
				}

			},


			/**
			 * @param {Number} nucleus
			 * @param {Number} activity_id
			 * @param {Number} shop_id
			 */
			activityUserAll(shop_id, activity_id, nucleus = 0, pages = 0) {
				activity_user({
					shop_id: shop_id,
					activity_id: activity_id,
					nucleus: nucleus,
					page: pages
				}).then(res => {
					if (res.code == 0) {
						this.getAllDetail =res.data.list 
						this.receivePeopleNumber = res.data.receivePeopleNumber;
						// this.unreceivePeopleNumber = res.data.unreceivePeopleNumber;
					}
				})
			},
			/**
			 * @param {Number} nucleus
			 * @param {Number} activity_id
			 * @param {Number} shop_id
			 */
			activityUserScan(shop_id, activity_id, nucleus = 1, pages = 0) {
				activity_user({
					shop_id: shop_id,
					activity_id: activity_id,
					nucleus: nucleus,
					page: pages
				}).then(res => {
					if (res.code == 0) {
						this.getScanDetail =res.data.list
						
						this.enterPeopleNumber = res.data.receivePeopleNumber;
						// this.unreceivePeopleNumber = res.data.unreceivePeopleNumber;
					}
				})
			}


		},





	}
</script>

<style lang="scss">
	.projuctlist {
		margin: 130upx 24upx;
		padding-top: 18upx;
		background: rgba(255, 255, 255, 1);
		border-radius: 14upx;

		.itempro {
			position: relative;
			border-bottom: 1px solid rgba(220, 220, 220, 1);
			padding: 20upx;

			.thumbnail {
				width: 170upx;
				height: 170upx;
				border-radius: 6upx;
				margin-right: 27upx;
				margin-left: 20upx;
			}

			.infobox {

				.title {
					font-size: 34upx;
					color: rgba(51, 51, 51, 1);
					//margin-bottom: 5upx;
				}

				.time {
					//margin-bottom: 5upx;
				}

				.time,
				.price {
					font-size: 30upx;
					color: rgba(153, 153, 153, 1);
				}
			}

			.btnbox {
				position: absolute;
				bottom: 5px;
				right: 5px;

				.btns {
					width: 100upx;
					height: 60upx;
					line-height: 60upx;
					text-align: center;
					border: 1upx solid rgba(160, 160, 160, 1);
					border-radius: 4upx;
					font-size: 30upx;
					color: rgba(0, 0, 0, 1);
				}

				.btnboxdel {
					margin-left: 16upx;
				}

				.btnboxxj {
					background: #FF6900;
					color: #FFFFFF;
					border: 0;
					margin-left: 16upx;
				}
			}
		}

	}

	.projuctTab {
		background: #FFFFFF;
		width: 100%;
		height: 98upx;
		line-height: 98upx;
		position: fixed;
		top: 0;
		/* #ifdef H5 */
		top: 86upx;
		/* #endif */
		left: 0;
		z-index: 99;

		.tabitems {
			text-align: center;

			.tabtitle {
				text-align: center;
				height: 98upx;
				line-height: 98upx;
				font-size: 30upx;
				display: inline-block;
				box-sizing: border-box;
				color: #333333;
			}
		}

		.tabitems.active {
			.tabtitle {
				font-family: PingFang SC;
				font-weight: bold;
				color: #FF6900;
				border-bottom: 1px solid #FF6900;
			}
		}

	}


	.fx {
		display: flex;
	}

	.guanzhu {
		padding: 24upx;
		border-top: 2upx solid #eee;
		/* border-bottom: 1upx solid #eee; */
	}

	.pd24 {
		padding: 24upx
	}
</style>
