<template>
	<!-- 发布 抽奖 -->
	<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">
					<input class="input" type="text" value="" v-model="item.title" placeholder="请输入奖品名称" />
				</view>
			</view>
			
			<view class="send_cell flex ali-c">
				<view class="inputname">奖品数量</view>
				<view class="input_box">
					<input type="number" value=""  v-model="item.num" placeholder="请输入奖品数量" />
				</view>
			</view>
			<view class="send_cell flex ali-c">
				<view class="inputname">金额</view>
				<view class="input_box">
					<input type="number" value=""  v-model="item.price" placeholder="请输入中奖后下单金额" />
				</view>
			</view>
			<view class="uploadbox" :class="{active:item.img==''}">
				<image class="unpoadimgshow" @tap="toselectshp(index)" v-if="item.img" :src="staticUrl+item.img" mode=""></image>
				<view class="uploadbtn"  v-else @tap="toselectshp(index)">
					<image class="unpoadimg" src="/static/LuckDraw/Prize_icon.png" mode=""></image>
					<view class="btnstext">选择奖品</view>
				</view>
				
				
				<!-- <image class="thumbnail" src="http://pic121.huitu.com/res/20190521/2134763_20190521094542188060_1.jpg" mode=""></image> -->
			</view>
		</view>
		<!-- 大卡片end -->
		
		<!-- 添加奖品 -->
		<view class="addluck flex jus-a">
			<view class="addbtns" v-if="PrizeList.length>1" @tap="delPrize">-删减奖品</view>
			<view class="addbtns" @tap="addPrize">+添加奖品</view>
		</view>
		
		<!-- 抽奖说明 -->
		<view class="luckmsg flex ">
			<view class="titles">奖品说明</view>
			<view class="textareabox flex1">
				<textarea class="textarea" value="" v-model="cjinfo" placeholder="请填写抽奖说明" />
			</view>
		</view>
		<!-- 抽奖说明end -->
		
		<!-- 抽奖设置 -->
		<view class="lucksys">
			<!-- <view class="send_cell flex ali-c">
				<view class="inputname">开奖方式</view>
				<view class="input_box flex1">
					<radio-group @change="radioChange" class="flex">
						<label class="uni-list-cell1" >
							<view class="flex">
								<radio value="2" color="#ff6900" :checked="current==2" />
								<view class="texts">满人开奖</view>
							</view>
						</label>
						<label class="uni-list-cell1 " >
							<view class="flex">
								<radio value="3" color="#ff6900" :checked="current==3" />
								<view class="texts">手动开奖</view>
							</view>
						</label>
					</radio-group>
				</view>
			</view> -->
			
			<view class="send_cell flex ali-c send_cell_boder">
				<view class="inputname">开奖人数</view>
				<view class="input_box">
					<input type="number" value="" v-model="shuliang" placeholder="请输入开奖人数" />
				</view>
			</view>
		</view>
		<!-- 抽奖设置end -->
		
		<!-- 提交按钮 -->
		<view class="LuckDrawsubmit flex">
			<button type="primary" class="subbtns1" @tap="toPreview">预览奖池</button>
			<button type="primary" class="subbtns2" @tap="sendsubmit">发布抽奖</button>
		</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:["一","二","三","四","五","六","七","八","九","十"],
				current:2,//单选选中的值
				PrizeList:[
					{
						closed: "1",//多余参数？
						goods_id: "",//商品id
						img: "",//产品图
						num: "",//奖品数量
						price: "",//中奖后的金额
						title: "",//抽奖名称
					},
				],//奖品列表
				
				
				shuliang:"0",//开奖人数
				cjinfo:"",//抽奖说明
				
			}
		},
		computed: {
			staticUrl () {//静态资源地址
				return this.$store.state.staticUrl;
			}
		},
		onLoad() {
			// setTimeout(()=>{
			// 	// this.$refs.prizemodel.show();//显示弹窗
			// },300)
		},
		onShow() {

			//取之前页面选的获取到的商品
			
			let selcarddata = uni.getStorageSync('selectaddres');
			console.info(selcarddata);
			if(selcarddata){
				let datas = selcarddata.data;
				let sendindex = selcarddata.sendindex;//插入索引
				let obj = {
					closed: "1",//多余参数？
					goods_id: datas.goods_id,//商品id
					img: datas.photo,//产品图
					num: this.PrizeList[sendindex].num?this.PrizeList[sendindex].num:1,//奖品数量
					price: datas.price,//中奖后的金额
					title: datas.title,//抽奖名称
				}
				
				console.info(obj,sendindex);

				//this.PrizeList[sendindex] = obj;//赋值
				
				this.$set(this.PrizeList, sendindex,obj);//赋值

				setTimeout(()=>{
					uni.removeStorageSync('selectaddres');//移除
				},1000)
			}
		},
		methods:{
			//单选触发事件 开奖方式
			radioChange(e){
				
				this.current  = e.detail.value;
			},
			//添加奖品
			addPrize(){
				this.PrizeList.push({
						closed: "1",//多余参数？
						goods_id: "",//商品id
						img: "",//产品图
						num: "1",//奖品数量
						price: "",//中奖后的金额
						title: "",//抽奖名称
				})
			},
			//删除奖品
			delPrize(){
				
				this.PrizeList.splice(this.PrizeList.length-1,1);
			},
			
			toPreview(){
				
				if(this.shuliang=="0" && this.shuliang==0){
					this.$api.msg("开奖人数不能为O");
					return false;
				}
				
				if(this.cjinfo==""){
					this.$api.msg("奖品说明必须要填哦,亲~");
					return false;
				}
				
				//预览
				uni.setStorageSync("previewdata",{
					info: this.cjinfo,//奖品说明
					pepole_num: this.shuliang,//开奖人数
					prize: this.PrizeList,//奖品列表
					way: this.current,//开奖方式 满人开奖2  手动开奖3
				});
				
				uni.navigateTo({
					url:"/pages/LuckDraw/preview/preview",
				})
			},
			//提交发布的是
			sendsubmit(){
				if(this.shuliang==0){
					this.$api.msg("开奖人数不能为0");
				}else{
					this.$refs.prizemodel.show();//显示弹窗
				}
			},
			//表单提交最终的方法
			async fromSubmitfun(){
				console.info("表单提交");
				
				if(this.cjinfo.replace(/\s+/g,"")==""){
					this.$api.msg("抽奖说明不能为空");
					return false;
				}else if(this.pepole_num<0){
					this.$api.msg("请输入正确的开奖人数");
					return false;
				}
				
				let res = await sendLottery({
					info: this.cjinfo,//奖品说明
					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);
				}
			},
			//去商品列表获取商品
			toselectshp(index){
				//传的是数组插入索引
				uni.navigateTo({
					url:`/pages/edit/pro_manage/pro_manage?isselect=1&sendindex=${index}`,
				})
			}
		}
	}
</script>

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