<template>
  <view style="padding-bottom: 50px;background-color: #C5121B;">
    <image class="wp100 img" mode="widthFix" src="https://oss-bq.ahduima.com/%E5%B0%8F%E7%A8%8B%E5%BA%8F/%E5%9B%BE%E7%89%87/%E5%8A%A9%E5%8A%9B%E4%B8%BB%E5%9B%BE.jpg"></image>
    <view class="relative tip">邀请好友帮助你进行助力即可有机会领取奖品</view>
    <view class="relative help_div">
		<!--  -->
		<view v-if="type == 1" class="relative help_card">
			<view class="relative help_tip">
				还差{{diffNum}}位好友助力即可领取奖品: 
			</view>
			<view v-if="winnerInfo.awards != undefined" class="relative help_tip" style="font-size: 40rpx;">
				{{winnerInfo.awards}}
			</view>
			<view class="help_list">
				<view v-for="item in helpUserList" class="help_item">
					<u-avatar class="help_item_avatar" :src="item.avatarUrl"></u-avatar>
					
					<!-- <view class="help_item_2_yao">
						<image :src="item.avatarUrl"></image>
					</view> -->
				</view>
				<view v-for="item in diffNum" class="help_item_2">
					<view class="help_item_2_yao">邀</view>
				</view>
			</view>
			<view class="help_btn" >
				<button open-type="share"  class="help_btn_font"> 邀请好友助力</button>
			</view>
		</view>
		
		<view v-if="type == 2" class="relative help_card">
			<view class="relative help_list" style="top: 200rpx;">
				<view v-if="winnerInfo.activityName  != undefined" class="help_tip" style="font-size: 40rpx; margin: 25rpx 0rpx;">
					{{winnerInfo.activityName}}
				</view>
				<view v-if="winnerInfo.schoolName != undefined" class="help_tip">
					举办单位：{{winnerInfo.schoolName}}
				</view>
				<view v-if="winnerInfo.awards != undefined" class="help_tip" style="font-size: 45rpx;margin: 25rpx 0rpx;">
					奖品：{{winnerInfo.awards}}
				</view>
			</view>
		
			<view class="help_btn" >
				<button class="help_btn_font" open-type="chooseAvatar" @chooseavatar="handleHelp" :disabled="disBtn">帮好友助力</button>
			</view>
		</view>
     </view>
  </view>
</template>

<script>
  import useUserStore from '@/jtools/store/user'
  import { queryActivityDetail,queryHelpInfo, saveHelpInfo, queryWinnerInfo } from '@/jtools/api/activity'
  export default {
    data() {
      return {
		winnerId: undefined,
        btnText: '点我刮奖',
        showBtn: true,
		helpUserList: [],
		drawNum: 0,
		diffNum: 3,
		phone: undefined,
		type: 2,
		winnerInfo: undefined,
		disBtn: false
      }
    },
    onLoad(op) {
	
	  this.winnerId = op.id
      // this.type = op.type ? Number(op.type) : 1
	  this.phone = useUserStore().userInfo?.phone || undefined
	  console.log(this.phone)
	  this.getWinnerInfo()
	  this.getHelpInfo()
	  this.disBtn = false
  
    },
	onShareAppMessage(res) {
	    if (res.from === 'button') {// 来自页面内分享按钮
	      console.log(res.target)
	    }
	    return {
	      title: '我正在参与领奖活动柜，请帮我助力',
	      path: '/pages/me/help?id='+this.winnerId + '&type=2'
	    }
	  },
	  
    methods: {
		//查询中奖信息
		getWinnerInfo(){
			// uni.request({
			//   url: 'http://192.168.1.6:8089/applet/activity/winner/info?winnerId='+this.winnerId
			// }).then(resp => {
			//   if(resp.data.code == 200) {
			//    console.log(resp)
			//    this.winnerInfo = resp.data.data;
			//    if(this.phone && this.winnerInfo.phone == this.phone){
			// 	   this.type == 1
			//    }
			//   }
			// })
			queryWinnerInfo({winnerId : this.winnerId}).then(resp => {
				if(resp.code == 200){
					console.log(resp)
					this.winnerInfo = resp.data;
					if(this.phone && this.winnerInfo.phone == this.phone){
						this.type = 1
					} else {
						this.type = 2
					}
				}
			})
			
		},
		//查询助力信息
		getHelpInfo(){
			// uni.request({
			//   url: 'http://192.168.1.6:8089/applet/activity/help/info?winnerId='+this.winnerId
			// }).then(resp => {
			//   if(resp.data.code == 200) {
			//    console.log(resp)
			//    this.drawNum = resp.data.data.helpNum;
			//    this.helpUserList = resp.data.data.helpUsers
			//    this.diffNum = (this.drawNum -  this.helpUserList.length) < 0 ? 0 : (this.drawNum -  this.helpUserList.length);
			//    console.log(this.drawNum)
			//    console.log(this.diffNum)
			//   }
			// })
			queryHelpInfo({winnerId : this.winnerId}).then(resp => {
				if(resp.code == 200){
					console.log(resp)
					this.drawNum = resp.data.helpNum;
					this.helpUserList = resp.data.helpUsers.map(item => ({
					  ...item,
					  avatarUrl: 'https://jwl.ahduima.com' + item.avatarUrl
					}));
					this.diffNum = (this.drawNum -  this.helpUserList.length) < 0 ? 0 : (this.drawNum -  this.helpUserList.length);
				}
			})
		},
		//点击助力
		handleHelp(e){
			this.disBtn = false
			console.log(e)
			uni.login({
			  provider: 'weixin', //使用微信登录
			  success:  (loginRes) => {
				  console.log(loginRes);
				  uni.uploadFile({
						url: 'https://jwl.ahduima.com/activity/applet/activity/help/save',
						 // url: 'http://192.168.1.6:8089/applet/activity/help/save',
						filePath: e.detail.avatarUrl,
						name: 'file',
						formData: {
							'code': loginRes.code,
							'winnerId': this.winnerId,
						},
						success: (uploadFileRes) => {
							console.log(uploadFileRes.data);
						    let resp = JSON.parse(uploadFileRes.data);
							console.log(resp);
							
							if(resp.code == 200){
								uni.showToast({
								  icon: 'none',
								  title: `助力成功`
								})
								this.disBtn = true
							} else {
								uni.showToast({
								  icon: 'error',
								  title: resp.msg
								})
								this.disBtn = true
							}
						}
				   });
				
			  }
			});
			// this.phone = "18855146869"
			// this.saveHelpInfo()
		},
		//保存助力信息
		saveHelpInfo(){
			
			uni.request({
			  url: 'http://192.168.1.6:8089/applet/activity/help/save',
			  method: 'post',
			  data: {
				winnerId: this.winnerId,
				phone: this.phone
				}
			}).then(resp => {
			  if(resp.data.code == 200) {
			   console.log(resp)
			 	  uni.showToast({
			 	    icon: 'none',
			 	    title: `助力成功`
			 	  })
			 	  this.disBtn = true
			  }
			})
			
			// saveHelpInfo({
			// 	winnerId: this.winnerId,
			// 	phone: this.phone
			// }).then(resp => {
			// 	if(resp.code == 200) {
			// 	  uni.showToast({
			// 	    icon: 'none',
			// 	    title: `助力成功`
			// 	  })
			// 	  this.disBtn = true
			// 	}
			// })
		}
    },
  }
</script>

<style scoped lang="scss">
	.img{
		  top: -130rpx !important;
	}
  .tip {
    height: 75px;
    font-family: PingFang SC;
    font-weight: 400;
    color: #FEFEFE;
    line-height: 48px;
	top: -520rpx;
	text-align: center;
	font-size: 35rpx;
  }
  .help_div{
	  width: 710rpx;
	  height: 996rpx;
	  top: -560rpx;
	  margin-left: 20rpx;
	  margin-right: 20rpx;
	  background: linear-gradient(0deg, #F33D2F 100%, rgba(197,18,27,0.01) 0%);
	  border-radius: 40rpx;
	  
	  
	  .help_card{
		 width: 630rpx;
		 height: 886rpx;
		 margin: 0rpx 39rpx;
		 top: 55rpx;
		 background: #FFFFFF;
		 border-radius: 24rpx;
		  
		  .help_tip{
			text-align: center;
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #010101;
			line-height: 55rpx;
			top: 15rpx;
		  }
		  
		  .help_list{
			  margin: 68rpx 25rpx 25rpx 20rpx;
			  height: 580rpx;
			  
			  .help_item{
				  display: inline-block;
				  padding: 35rpx;
				  width: 194rpx;
				  height: 194rpx;
				 
				  border-radius: 50%;
				  
				  .help_item_avatar{
					  margin: auto;
					  width: 56rpx;
					  height: 56rpx;
					  color: #CCCCCC;
					  background: #C42E13;
					  border: 4px solid #C42E13;
					  
					  image{
						  height: 45px;
						  width: 45px;
					  }
				  }
			  }
			  
			  .help_item_2{
				  display: inline-block;
				  margin: 35rpx;
				  width: 124rpx;
				  height: 124rpx;
				  border: 2px dotted #CCCCCC;
				  border-radius: 50%;
				  
				  .help_item_2_yao{
					  margin: 34rpx 33rpx;
					  width: 56rpx;
					  height: 56rpx;
					  font-size: 60rpx;
					  font-family: PingFang SC;
					  font-weight: 400;
					  color: #CCCCCC;
					  line-height: 48rpx;
				  }
				 
			  }
			  
			  
		  }
		  
		  .help_btn{
			  text-align: center;
			  margin: 0 75rpx;
			  margin-bottom: 30rpx;
			  width: 500rpx;
			  height: 86rpx;
			  background: linear-gradient(0deg, #DE4224 0%, #B81706 100%);
			  border-radius: 43rpx;
			  
			  .help_btn_font{
				  font-size: 32rpx;
				  font-family: PingFang SC;
				  font-weight: 400;
				  color: #FFFFFF;
				  line-height: 86rpx;
				  background: center;
			  }
		  }
	  }
	  
	  
  }
</style>