<template>
	<!-- 卡券发放 -->
	<!-- 卡券 -->
	<view class="CardSend yicode">
		<view class="cardhead flex ali-c ">
			<view class="tabitems flex1" :class="{active:tabactive==1}" @tap="taggleTab(1)" >
				<view class="titles">卡券发放</view>
			</view>
			<view class="tabitems flex1 " :class="{active:tabactive==2}" @tap="taggleTab(2)" >
				<view class="titles ">已发卡券</view>
			</view>
		</view>
		<!-- tab切换 -->
		
		
		<!-- 卡券发放 -->
		<view class="mainboxs" v-show="tabactive==1 && showshare==false">
			<!-- 输入框列表 -->
			<view class="inoutlist">
				

				<view class="inputitem flex">
					<view class="names">优惠券名称</view>
					<input type="text" placeholder="请填写优惠券名称" v-model="parameter.coupon_name" class="inputs" placeholder-class="plclass" >
				</view>
				
				<view class="inputitem flex">
					<view class="names">优惠金额</view>
					<input type="number" placeholder="请填写优惠金额" v-model="parameter.money" class="inputs" placeholder-class="plclass" >
				</view>
				
				<view class="inputitem flex">
					<view class="names">每人最大领取数</view>
					<input type="number" placeholder="请填写领取数 " v-model="parameter.max_fetch" class="inputs" placeholder-class="plclass" >
				</view>
				
				<view class="inputitem flex">
					<view class="names">满多少元可以使用</view>
					<input type="number" placeholder="请填写满多少元可以使用" v-model="parameter.at_least" class="inputs"  placeholder-class="plclass">
				</view>
				
				<view class="inputitem flex">
					<view class="names">发放数量</view>
					<input type="number" placeholder="请填写发放的数量" v-model="parameter.count" class="inputs"  placeholder-class="plclass">
				</view>
			</view>
			<!-- 第一块结束 -->
			
			
			<!-- 发放范围 -->
			<view class="Range Range1">
				<view class="title">发放范围</view>
				<view class="chilidlist flex">
					<radio-group class="flex  ali-c jus-b chilidlistbox" @change="radioChange">
						<label class="flex ali-c" >
							<view>
								<radio color="#FF6900" value="1" :checked="parameter.give_type==1" />
							</view>
							<view class="itemname">本店</view>
						</label>
						<!-- <label class="flex ali-c" >
							<view>
								<radio color="#FF6900" value="2" :checked="parameter.give_type==2" />
							</view>
							<view class="itemname">本地区</view>
						</label>
						<label class="flex ali-c" >
							<view>
								<radio color="#FF6900" value="3" :checked="parameter.give_type==3" />
							</view>
							<view class="itemname">全网</view>
						</label> -->
					</radio-group>
				</view>
			</view>
			<view class="Range">
				<view class="title" @tap="togglePopup">参与商品</view>
				<view class="chilidlist flex">
					<radio-group class="flex  ali-c  chilidlistbox" @change="radioChange1">
						<label class="flex ali-c mr_130" >
							<view>
								<radio color="#FF6900" value="1" :checked="parameter.range_type==1"  />
							</view>
							<view class="itemname">全部商品</view>
						</label>
						<label class="flex ali-c mr_130" @tap="showmodles">
							<view>
								<radio color="#FF6900" value="0" :checked="parameter.range_type==0" />
							</view>
							<view class="itemname">部分商品</view>
						</label>
					</radio-group>
				</view>
			</view>
			<!-- 单选endn -->
			
			<!-- //表单提交的参数
			parameter:{
				at_least: "10",//满多少可以用
				count: "100",//发放数量
				coupon_name: "测试优惠券",//优惠券名称
				end_time: "2019年12月03日",//结束时间
				start_time: "2019年12月03日",//开始时间
				give_type: "1",//发放范围 1本地 2本地区 3全网
				goods_id: ["1810", "5905", "5910"],//可用商品
				max_fetch: "2",//每人最大可以使用
				money: "9.9",//金额
				range_type: "0",//参与的商品  1全部 0部分
			}-->
			
			
			<!-- timebox 时间选择 -->
			<view class="timeboxs flex ali-c">
				<view class="title">发放时间</view>
				<view class="inputbox" @tap="showtime(1)">
					<input type="text" class="inputs" value="" v-model="parameter.start_time" disabled="disabled" placeholder="投放时间" placeholder-class="plclass" />
					<image class="jiantouicon" v-show="parameter.start_time==''" src="/static/news/xiamassfd.png" mode=""></image>
				</view>
				<view  style="margin-left: 10;">-</view>
				<view class="inputbox" style="margin-left: 0;" @tap="showtime(2)">
					<input type="text" class="inputs" value="" v-model="parameter.end_time" disabled="disabled" placeholder="到期时间" placeholder-class="plclass" />
					<image class="jiantouicon"  v-show="parameter.start_time==''" src="/static/news/xiamassfd.png" mode=""></image>
				</view>
				
			</view>
			
			<view class="submitbtns flexc" v-show="!parameter.id" :class="{active:istruesub}"  @tap="coupons" >确定发放</view>
			<view class="submitbtns flexc" v-show="parameter.id" :class="{active:istruesub}"  @tap="coupons" >编辑提交</view>
			<view class="submitbtns flexc" v-show="parameter.id" :class="{active:istruesub}"  @tap="colesedit" >取消编辑</view>
		</view>
		
		
		<!-- 已发卡券 -->
		<view class="yfcardlist" v-show="tabactive==2">
			
			<view class="yfcardItem flex" v-for="(item,index) in cardlist" :key="index">
				<view class="cardleft">
					<view class="kaiguanbox flex jus-b ali-c">
						<view class="leftkai">
							<view class="name oneline">{{item.coupon_name}}</view>
							<view class="status">当前状态：{{item.status==0?'投放中':'未投放'}}</view>
						</view>
						<view class="kaiguan flex ali-c">
							<view class="kai kgitem  flexc" @tap="switch_couponsFun(item,2,index)" :class="{active:item.status==0}">开启</view>
							<view class="kai kgitem flexc"  @tap="switch_couponsFun(item,0,index)" :class="{active:item.status==2}">关闭</view>
						</view>
					</view>
					<view class="quaninfos">
						<view class="text">每人领取{{item.max_fetch}}次  发放{{item.count}}张  已领取{{item.get_num}}张</view>
						<view class="text">发放范围 
							<text class="ml-10 mr-10" v-if="item.give_type==3">全网</text>
							<text class="ml-10 mr-10" v-else-if="item.give_type==2">本地区</text>
							<text class="ml-10 mr-10" v-else>本店</text>
							  
							  参与商品  <text class="ml-10 mr-10" v-if="item.range_type==1">全部</text> 
						   <text class="ml-10 mr-10" v-else>部分商品</text> 
							
							满{{item.at_least}}元使用
						</view>
						<view class="text flex ali-c jus-b">
							<text>有效期:{{item.start_time}}至{{item.end_time}}</text>
							<!-- <text v-if="item.get_num==0" class="bj pr-10" @tap="detailsFun(item)">编辑</text> -->
							
							
						</view>
					</view>
				</view>
				<view class="cardright flexc">
					<view>
						<text class="bj pr-10" @tap="detailsFun(item)">编辑</text>
						<view class="text">优惠</view>
						<view class="prcie mb-20">{{item.money}}元</view>
						<text class="bj pr-10" @tap="deleteFun(item)">删除</text>
					</view>
				</view>
				
			</view>
			
			<empty  v-if="cardlist.length==0"></empty>
			
		</view>
		
		
		
		
		<!-- 选择参与活动的商品的弹出 -->
		<!-- 底部分享弹窗 -->
		<uni-popup :show="showshare" style="z-index: 99;" :type="type" @change="change">
			<view class="childboxmain">
				<view class="titlebox">
					<view class="ali-c jus-b" style="margin-bottom: 20upx;">
						<view class="title">选择参与优惠的商品</view>
						<image class="imgs" @tap="showshare=false" src="/static/news/plicons.png" mode=""></image>
					</view>
					<input class="sousuo" @input="onKeyInput"  placeholder="请输入搜索内容" />
				</view>
				<!-- scroll  scroll-left="120" -->
				
				<!-- @scroll="" -->
				<scroll-view class="scroll-view_H" style="height: 50vh;" scroll-y="true" >
					<view class="chindlist ">
						<radio-group class="flex  ali-c   flex-wrap chilidlistbox" @change="radioChange2" v-model="parameter.goods_id">
							<label class="flex ali-c jus-b itemlable" v-for="(item,index) in shoplist" :key="index">
								<view class="itemname">{{item.product_name}}</view>
								<view class="checkbox">
									<radio color="#FF6900" @change="radioChange2" :value="item.product_id" :checked="item.checked" />
								</view>
							</label>
						</radio-group>
						<view class="xiayiye title" @tap="nextPage" v-if="xianshi" >下一页>>></view>
						<view class="xiayiye title" @tap="nextPage" v-else >没有更多了~</view>
					</view>
				</scroll-view>
				<view class="submitbtns active" @tap="showshare=false" >确定</view>
				<!-- 提交确认 -->
			</view>
		</uni-popup>
		
		
		<!-- 时间弹窗 -->

		
		<w-picker 
		mode="range" 
		startYear="2019" 
		endYear="2025"
		:defaultVal="defaultVal"
		:current="true"
		@confirm="onConfirm" 
		:selectList="[]"
		themeColor="#ff6900"
		ref="picker"
		></w-picker>
		
		
		

		
	</view>
</template>

<script>
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	import wPicker from "@/components/w-picker/w-picker.vue";//时间弹窗
	import { couponList, closedCoupons,couponGoods,addEditCoupons,couponsDetails,deleteCoupons} from "@/utils/api/coupon.js"
	import empty from "@/components/empty/empty.vue"
	export default {
		components:{
			uniPopup,
			wPicker,
			empty,
		},
		data() {
			return {
				keywords:'',
				xianshi:true,
				istruesub:true,
				tabactive:1,
				showshare: false,//弹窗
				type:"bottom",
				
				shoplist:[],//自己店铺的商品列表
				
				//表单提交的参数
				parameter:{
					at_least: "",//满多少可以用
					count: "",//发放数量
					coupon_name: "",//优惠券名称
					end_time: "",//结束时间
					start_time: "",//开始时间
					give_type: "1",//发放范围 1本地 2本地区 3全网
					goods_id: [],//可用商品 "1810", "5905", "5910"
					max_fetch: "",//每人最大可以使用
					money: "",//金额
					range_type: "1",//参与的商品  1全部 0部分
					action:"add",//编辑必传 方式（添加add，修改edit）
					
				},
				
				parameter1:{
					at_least: "10",//满多少可以用
					count: "100",//发放数量
					coupon_name: "测试优惠券",//优惠券名称
					end_time: "2019-12-03",//结束时间
					start_time: "2019-12-03",//开始时间
					give_type: "1",//发放范围 1本地 2本地区 3全网
					goods_id: [],//可用商品 "1810", "5905", "5910"
					max_fetch: "2",//每人最大可以使用
					money: "9.9",//金额
					range_type: "1",//参与的商品  1全部 0部分
				},
				
				//时间弹窗
				defaultVal:[],
				selectList:[],
				timetype:1,
				cardlist:[],//已发的卡券
				isallshow:false,
				page:0,
				pages:0,
			};
		},
		onLoad(){
			//获取商品列表
			this.shop_goodsFun();
			
		},
		//滚动到最底部
		onReachBottom(){
			console.log("11");
		
			if(!this.isallshow && this.tabactive==2){
				this.shop_couponFun();
			}
			
		},
		methods:{
			// 搜索
			onKeyInput: function(event) {
			            this.keywords = event.target.value
						this.pages = 0;
						this.shoplist=[];
						this.shop_goodsFun();
			        },
			nextPage:function(){
				this.pages++;
				this.shop_goodsFun();
			},
			//取消编辑
			colesedit(){
				this.parameter={
					at_least: "",//满多少可以用
					count: "",//发放数量
					coupon_name: "",//优惠券名称
					end_time: "",//结束时间
					start_time: "",//开始时间
					give_type: "1",//发放范围 1本地 2本地区 3全网
					goods_id: [],//可用商品 "1810", "5905", "5910"
					max_fetch: "",//每人最大可以使用
					money: "",//金额
					range_type: "1",//参与的商品  1全部 0部分
					//id:"", //优惠劵id 编辑必传
					action:"add",//编辑必传 方式（添加add，修改edit）
				}
				let list = this.shoplist
				list.map((item,index)=>{
					
					item.checked = false;
					return item;
				})
				this.shoplist = list;
			},
			//接口start
			
			//获取商城商品
			async shop_goodsFun(keywords){
				
				let res =  await couponGoods({
					page:this.pages,
					keywords:this.keywords
				});
				
					
					let list = res.data;
					list.map((item,index)=>{
						if(item.goods_id){
							item.product_id = item.goods_id.toString();
							item.product_name  = item.title;
						}else if(item.room_id){
							item.product_id = item.room_id.toString();
							item.product_name  = item.title;
						}else if(item.product_id){
							item.product_id = item.product_id.toString();
							
						}
						item.checked = false;
						return item;
					})
					// this.shoplist = list;
					if(res.code==0){
						if( list.length!=0){
							this.shoplist = [...this.shoplist,...list];
							console.log(this.shoplist)
							this.xianshi = true;
						}else{
							// this.$api.msg("没有更多了~");
							this.isallshow = true;
							this.xianshi = false;
							
						}
					
					
				}else{
					this.parameter.range_type=  1;
					this.$api.msg(res.msg);
				}
			},
			//coupons 商户发放卡券 提交发放卡券的方法 submit
			async coupons(){
				let can = this.parameter;
				// can.goods_id = can.goods_id.join(";");	
				let res =  await addEditCoupons(can);
				
				if(res.code==0){
					this.$api.msg(res.msg);
					
					setTimeout(()=>{
						this.chongzhi();//重置
						this.tabactive = 2;
					},1000)
				}else{
					this.$api.msg(res.msg);
				}
				
			},
			//已发卡券
			async shop_couponFun(){
				this.page++;
				console.info(this.page,'1111')
				let res =  await couponList({
					page:this.page,
				});
				
				if(res.code==0){
					
					if( res.data.length!=0){
						this.cardlist = [...this.cardlist,...res.data];
					}else{
						this.$api.msg("没有更多了~");
						this.isallshow = true;
						
					}
					
				}else{
					this.$api.msg(res.msg);
				}
			},
			//卡券单个的开关
			async switch_couponsFun(item,valse,index){
				let res =  await closedCoupons({
					id:item.id,
					status:item.status==0?2:0,//开启（0），关闭 2 //valse,//valse,//
				});
				
				if(res.code==0){
					this.$api.msg(res.msg);
					console.log("status",this.cardlist,index);
					this.cardlist[index].status = item.status==0?2:0;
					console.log("status",this.cardlist[index].status);
					
				}else{
					this.$api.msg(res.msg);
				}
			},
			
			//删除
			async deleteFun(item){
				
				let res =  await deleteCoupons({
					id:item.id
				});
				this.$api.msg(res.msg);
				if(res.code == 1){
					//已发卡券
					this.page = 0;
					this.cardlist = [];
					this.isallshow = false;
					this.shop_couponFun();
				}
				
			},
			
			//优惠券详情 编辑使用
			async detailsFun(item){
				let res =  await couponsDetails({
					id:item.id
				});
				
				if(item){
					//this.shoplist = res.data.coupons_goods;
					
					let parameter = {
						at_least:item.at_least,
						count:item.count,
						coupon_name:item.coupon_name,
						end_time:item.end_time,
						start_time:item.start_time,
						give_type:item.give_type,
						goods_id:item.goods_id,
						max_fetch:item.max_fetch,
						money:item.money,
						range_type:item.range_type,
						id:item.id,
						action:"edit",
					}
					// let iddata = [];
					
					this.shoplist = this.shoplist.map((item1,index)=>{//参与的商品默认选中的
						console.info(item1.product_id,"000");
						// if(){
							
						// }
						
						console.info(Number(item1.product_id),JSON.stringify(res.data.goods_ids),"item1.product_id");
						
						if(res.data.goods_ids.indexOf(item1.product_id)!=-1){
							item1.checked = true;
						}else{
							item1.checked = false;
						}
						return  item1
					})
					
					parameter.goods_id = res.data.goods_ids;
					
					this.parameter = parameter;
					
					this.tabactive = 1;
					
				}else{
					this.$api.msg(res.msg);
				}
			},
			
			//接口end
			chongzhi(){
				this.parameter = {
					at_least: "",//满多少可以用
					count: "",//发放数量
					coupon_name: "",//优惠券名称
					end_time: "",//结束时间
					start_time: "",//开始时间
					give_type: "1",//发放范围 1本地 2本地区 3全网
					goods_id: [],//可用商品
					max_fetch: "",//每人最大可以使用
					money: "",//金额
					range_type: "1",//参与的商品  1全部 0部分
					action:'add'
				};
			},
			taggleTab(inde){
				this.tabactive = inde;
			},
			//发放范围
			radioChange(e){
				console.log(e.detail.value);
				this.parameter.give_type = e.detail.value;
				
			},
			//参与的商品
			radioChange1(e){
				//console.log(e);
				this.parameter.range_type = e.detail.value;
			},
			radioChange2(e){
				//选择产品的单选
				console.log(e);
				
				this.parameter.goods_id  = e.detail.value;
				console.log(this.parameter.goods_id);
				console.log(this.shoplist);
				this.shoplist = this.shoplist.map((item1,index)=>{//参与的商品默认选中的
					if(this.parameter.goods_id.indexOf(item1.product_id)!=-1){
						item1.checked = true;
					}else{
						item1.checked = false;
					}
					return  item1
				})
				
				
			},
			//弹窗里面的方法
			togglePopup(type, open) {
				this.type = "bottom"
				this.showshare = true;
			},
			cancel(type) {
				this.showshare = false
			},
			change(e) {
				console.log('是否打开:' + e.show)
				if (!e.show) {
					this.showshare = false
				}
			},
			//时间组件事件
			onConfirm(e){
				console.log(e);
				// this.parameter.start_time = e.checkArr[0]+"年"+e.checkArr[1]+"月"+e.checkArr[2]+"日";
				// this.parameter.end_time = e.checkArr[3]+"年"+e.checkArr[4]+"月"+e.checkArr[5]+"日";
				
				
				this.parameter.start_time = e.checkArr[0]+"-"+e.checkArr[1]+"-"+e.checkArr[2];
				this.parameter.end_time = e.checkArr[3]+"-"+e.checkArr[4]+"-"+e.checkArr[5];
				
			},
			
			showtime(){
				this.$refs.picker.show()
			},
			hiddetime(){
				this.$refs.picker.hide()
			},
			//显示商品列表
			showmodles(){
				this.showshare = true;
			}
		},
		watch:{
			
			tabactive(e){
				console.log(e);
				
				if(e==2){
					//已发卡券
					this.page = 0;
					this.cardlist = [];
					this.isallshow = false;
					this.shop_couponFun();
				}
			}
		}
	}
</script>

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