<template>
	<!-- 预览抽奖详情 -->
	<view class="preview">
		
		<!-- 发布 抽奖 -->
		<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">
						{{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">满{{shuliang}}人自动开奖</view>
					</view>
				</view>
				
				<view class="send_cell flex ali-c send_cell_boder">
					<view class="inputname">抽奖发起人</view>
					<view class="input_box flex ali-c">
						<image class="usertx" :src="userinfodata.face" mode=""></image>
						<view class="input">{{userinfodata.nickname}}</view>
					</view>
				</view>
				
			</view>
			<!-- 抽奖设置end -->
			
			<view class="flexbutton" @tap="sendsubmit">发布抽奖</view>
			
		</view>
		
		
		<prizemodel ref="prizemodel" :shuliang="shuliang" @fromSubmitfun="fromSubmitfun"></prizemodel>
		<!-- 抽奖弹窗 -->
		
	</view>
</template>

<script>
	import prizemodel from "@/components/prizemodel/prizemodel.vue";//提示窗
	import {sendLottery} from "@/utils/api/LuckDraw.js";//发起抽奖的接口
	export default {
		components:{
			prizemodel,
		},
		data(){
			return {
				numberarr:["一","二","三","四","五","六","七","八","九","十"],
				shuliang:"0",//开奖人数
				//预览内容
				info:"",//奖品说明
				// pepole_num:0,//开奖人数
				PrizeList:[],//奖品列表
				way:0,
				current:1,//单选选中的值
			}
		},
		computed: {
			staticUrl () {//静态资源地址
				return this.$store.state.staticUrl;
			},
			//用户信息
			userinfodata(){
				return this.$store.state.userInfo;
			}
		},
		onLoad() {
			this.getpreviewdata();
		},
		methods:{
			//获取本地存储信息
			getpreviewdata(){
				let previewdata = uni.getStorageSync("previewdata");
				
				if(previewdata){
					this.info = previewdata.info;//说明
					this.shuliang = previewdata.pepole_num;//开奖人数
					this.PrizeList = previewdata.prize;//奖品列表
					this.current = previewdata.way;//
				}

			},
			sendsubmit(){
				if(this.shuliang==0){
					this.$api.msg("开奖人数不能为0");
				}else{
					this.$refs.prizemodel.show();//显示弹窗
				}
			},
			//表单提交最终的方法
			async fromSubmitfun(){
				console.info("表单提交");
				
				if(this.info.replace(/\s+/g,"")==""){
					this.$api.msg("抽奖说明不能为空");
					return false;
				}else if(this.shuliang<0){
					this.$api.msg("请输入正确的开奖人数");
					return false;
				}
				
				let res = await sendLottery({
					info: this.info,//奖品说明
					pepole_num: this.shuliang,//开奖人数
					prize: this.PrizeList,//奖品列表
					way: this.current,//开奖方式 满人开奖2  手动开奖3
				});
				
				if(res.code==0){
					this.$api.msg("抽奖发布成功");
					
					setTimeout(()=>{
						// uni.navigateBack({
							
						// })
						
						//进入活动详情
						uni.navigateTo({
							url:`/pages/LuckDraw/LuckyDetails/LuckyDetails?id=${res.data}`
						});
					},1000)
				}else{
					this.$api.msg(res.msg);
				}
			},
		}
	}
</script>

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