<template>
	<!-- 抽奖详情 抽奖活动详情页面 -->
	 <view class="LuckyDetails">
		<!-- 发布 抽奖 -->
		<view class="sendpage">
			
			<view class="send_cell_box" v-for="(item,index) in PrizeList" :key="index">
				<!-- 单个输入框 -->
				<view class="send_cell flex ali-c">
					<view class="inputname "  v-if="PrizeList.length<=1">奖品名称</view>
					<view class="inputname " v-if="PrizeList.length>1">{{numberarr[index]}}等奖</view>
					<view class="input_box flex1">
						<view class="input  oneline">{{item.title}}</view>
					</view>
				</view>
				
				<view class="send_cell flex ali-c">
					<view class="inputname">奖品数量</view>
					<view class="input_box">
						<view class="input">{{item.num}}份</view>
					</view>
				</view>
				<view class="send_cell flex ali-c">
					<view class="inputname">中奖后下单金额</view>
					<view class="input_box">
						<view class="input">{{item.price}}</view>
					</view>
				</view>
				<view class="uploadbox">
					<image class="unpoadimgshow" :src="staticUrl+item.img" mode=""></image>
				</view>
			</view>
			<!-- 大卡片end -->
		
			<!-- 抽奖说明 -->
			<view class="luckmsg flex ">
				<view class="titles">奖品说明</view>
				<view class="textareabox flex1">
					<view class="textarea textarea1">
						{{LotteryInfos.info}}
					</view>
				</view>
			</view>
			<!-- 抽奖说明end -->
			
			<!-- 抽奖设置 -->
			<view class="lucksys">
				<view class="send_cell flex ali-c">
					<view class="inputname">开奖方式</view>
					<view class="input_box flex1">
						<view class="input">满{{LotteryInfos.pepole_num}}人自动开奖</view>
					</view>
				</view>
				
				<!-- send_cell_boder -->
				<view class="send_cell flex ali-c ">
					<view class="inputname">抽奖发起人</view>
					<view class="input_box flex ali-c">
						<image class="usertx" :src="LotteryInfos.avatar" mode=""></image>
						<view class="input">{{LotteryInfos.nickname}}</view>
					</view>
				</view>
				
				
				
				<!-- 关闭按钮 只要发起人才有权限 -->
				 <!-- wx:if="{{is_shop && type != 2}}" -->
				<view class="send_cell flex ali-c send_cell_boder" v-if="LotteryInfos.is_shop && LotteryInfos.type != 2">
					<view class="inputname">关闭抽奖</view>
					<view class="input_box flex ali-c jus-e flex1">
						 <switch color="#ff6900" :checked="ischecked" @change="switch1Change" />
					</view>
				</view>
				
			</view>
			<!-- 抽奖设置end -->
			
			
			<!-- 中奖者名单 -->
			<view v-if="LotteryInfos.type==2">
				<view class="zprize"  >
					<view class="zprize_item">
						<view class="z_head">— 中奖者名单 —</view>
					</view>
					<view class="zprize_item zprize_itembor" v-for="(item,index) in  zjtitlelist" :key="index">
						<view class="z_title">{{numberarr[index]}}等奖：{{item}}</view>
						<view class="userlist jus-a flex">
							<view class="useritem" v-for="(itemdata,index1) in zjuserslist[index]" :key="index1">
								<image class="usertxss" :src="itemdata.avatar" mode=""></image>
								<view class="usernames oneline">{{itemdata.nickname}}</view>
							</view>
						</view>
						<view class="tolist" @tap="chakan(item)">查看全部中奖名单 ></view>
					</view>
				</view>
			</view>
			<!-- 中奖名单end -->
			
			
			<!-- 参与抽奖按钮 -->
			<view class="sysbtnPartake">
				
				<view @tap="topartake" class="Partakeboxmain ali-c" v-if="LotteryInfos.thisUserin == 0 && LotteryInfos.type == 1">
					<view class="Partake">
						<view class="texts texts1">点击</view>
						<text class="texts">抽奖</text>
					</view>
					<view class="Partakebox ali-c">
					</view>
				</view>
				
				
				<!-- waitfor -->
				<view class="Partakeboxmain ali-c" v-if="LotteryInfos.thisUserin == 1 && LotteryInfos.type == 1">
					<view class="Partake PartakewaitFor">
						<view class="texts">等待</view>
						<text class="texts">开奖</text>
					</view>
					<view class="Partakebox ali-c">
					</view>
				</view>
				
				<!-- 抽奖按钮end -->
				
				<view class="partaketext jus-c ali-c">
					已有<text class="text">{{LotteryInfos.inHum}}</text>人参与，<text class="text" @tap="chakancy">查看全部></text>
				</view>
				<view class="partakeuserlist flex jus-c">
					<image v-for="(item,index) in LotteryInfos.userAvatars" :key="index" class="usertxs" :src="item" mode=""></image>
				</view>
				
			</view>
			
			<view class="flexbutton" @tap="showshare">分享抽奖活动</view>
			
		</view>
		
		
		<share
			ref="share" 
			:contentHeight="580"
			:shareList="shareList"
			@sharereturn="getshare"
		></share>
		<!-- 分享组件 -->
		
	 </view>
</template>

<script>
	import {slotLotteryInfo,joinLottery,OpenLottery,prizeUserList,cancelLottery} from "@/utils/api/LuckDraw.js";
	import share from '@/components/share';//分享
	export default {
		components:{
			share,
		},
		data(){
			return {
				numberarr:["一","二","三","四","五","六","七","八","九","十"],
				current:1,//单选选中的值
				PrizeList:[
					// {name:"",conut:"",imgurl:"",price:""},
					// {name:"",conut:"",imgurl:"",price:""},
					// {name:"",conut:"",imgurl:""},
					// {name:"",conut:"",imgurl:""},
				],//奖品列表
				shuliang:"0",//开奖人数
				ischecked:true,//开关
				LotteryInfos:{},//数据集合
				
				//中奖数据
				zjtitlelist:[],
				zjuserslist:[],
				
				//分享配置
				shareList: [
					// {text:"生成海报分享",icon:require("../../../static/shenchbao.png"),types:"banner",isxcx:false},
					{text:"分享小程序卡片",icon:require("../../../static/share_xcx.png"),types:"WXSceneSession",isxcx:true},
					// {text:"分享到微信",icon:require("../../../static/share_wechat.png"),types:"WXSceneSession",isxcx:false},
					// {text:"分享到朋友圈",icon:require("../../../static/share_moment.png"),types:"WXSenceTimeline",isxcx:false},
					
				],
			}
		},
		computed: {
			staticUrl () {//静态资源地址
				return this.$store.state.staticUrl;
			}
		},
		onLoad(opdata) {
			this.lottery_id = opdata.id;
			this.getslotLotteryInfo();
		},
		methods:{
			//开关改变后的触发事件
			async switch1Change(e){
				
				let res = await cancelLottery({
					lottery_id:this.lottery_id,//活动id
					
				});
				
				if(res.code==0){
					this.$api.msg(res.data);
				}else{
					this.$api.msg(res.msg);
				}
			},
			//请求详情
			async getslotLotteryInfo(){
				let res = await slotLotteryInfo({
					lottery_id: this.lottery_id,
				});
				if(res.code==0){
					this.PrizeList = res.data.prize;//奖品列表
					
					this.LotteryInfos = res.data;//激活数据
					
					this.ischecked = res.data.type?false:true;//
					
					if (res.data.type == 2){
						//获取中奖名单
						this.getprizeUserList();
					}
					
				}else{
					this.$api.msg(res.msg);
				}
			},
			//参与抽奖方法
			topartake(){
				
				//this.$api.msg("");
				
				let that = this;
				joinLottery({
					lottery_id:that.lottery_id,
					//shop_id:that.LotteryInfos.shop_id
					user_id:that.LotteryInfos.shop_id,
					
				}).then(res=>{
				  if(res.code == 0){
					if (that.LotteryInfos.inHum + 1 == that.LotteryInfos.pepole_num){
					  OpenLottery({
						lottery_id:that.lottery_id,
					    //shop_id:that.LotteryInfos.shop_id
						user_id:that.LotteryInfos.shop_id
					  }).then(res1=>{
						if (res1.code == 0){
						  console.log("开奖成功");
						  this.$api.msg(res.data);
			
						 that.Reloadfun();//刷新
			
						}else{
			
						}
					  })
			
					  return false;
					}
					console.log("参与成功");

					this.$api.msg(res.data);
			
					that.Reloadfun();//刷新
			
				  }else{
					this.$api.msg(res.data);
				  }
				})
			},
			//刷新方法
			Reloadfun(){
				this.getslotLotteryInfo();//重新请求详情
			},
			//获取 中奖名单 接口 
			async getprizeUserList(){
				let res = await prizeUserList({
					grade:this.LotteryInfos.grade,   //？
					lottery_id:this.lottery_id
				});
				if(res.code==0){
					this.zjtitlelist = res.data.title;
					this.zjuserslist = res.data.users;
				}else{
					this.$api.msg(res.msg);
				}
			},
			//查看全部的中奖名单 2
			chakan(jpname){
				uni.navigateTo({
					url:`/pages/LuckDraw/PartakeUser/PartakeUser?type=2&grade=${this.LotteryInfos.grade}&lottery_id=${this.lottery_id}&jpname=${jpname}`,
				})
			},
			//查看全部的参与名单 1
			chakancy(){
				uni.navigateTo({
					url:`/pages/LuckDraw/PartakeUser/PartakeUser?type=1&grade=${this.LotteryInfos.grade}&lottery_id=${this.lottery_id}`,
				})
			},
			showshare(){
				this.$refs.share.toggleMask();
			},
			//分享方法
			getshare(e){
				
				if(e.isxcx){
					//分享成小程序
					
					uni.share({
					    provider: 'weixin',
					    scene: "WXSceneSession",
					    type: 5,
					    imageUrl: this.staticUrl+this.LotteryInfos.fenxiang_img,//分享的图片
					    title: "我正在使用鹿马APP参与抽奖 ,快来一起抽奖把！",
					    miniProgram: {
					        id: 'gh_9fb34b75051e',
					        path: `/pages/LuckDraw/LuckyDetails/LuckyDetails?lottery_id=${this.lottery_id}`,
					        type: 0,
					        webUrl: 'http://www.jxdsy.cn/'
					    },
					    success: ret => {
					        console.log(JSON.stringify(ret));
					    }
					});
					
				}else if(e.types=="banner"){
					this.$api.msg("敬请期待");
					// //生成海报
					// uni.navigateTo({
					// 	url:"/pages/SharePoster/SharePoster?shop_id="+this.goods.shop_id+"&goods_id="+this.goods.goods_id,
					// })
				}else{
					//普通分享
					uni.share({
						provider: "weixin",
						scene: e.types,
						type: 1,
						summary: "我正在使用鹿马APP参与抽奖,奖品很丰厚哦:#"+this.lottery_id+"# ,快来一起逛逛吧！(复制本段文字后打开APP即可快参与抽奖)",
						success:  (res)=> {
							console.log("success:" + JSON.stringify(res));
						},
						fail:  (err)=> {
							console.log("fail:" + JSON.stringify(err));
						}
					});
				}

			}
			
		}
	}
</script>

<style lang="scss">
	@import  "../send/send.scss";
	@import  "./LuckyDetails.scss";
</style>
