<template>
	<view class="productpages" style="margin-top: 20upx;">
		
		<view class="boxcss" style="padding: 30upx">
			<view class="littleTitle">
				<text>活动时间</text>
			</view>
			<view class="flex">
				<view class="" style="flex:4;text-align: center;margin: auto;background-color:#F0F0F0;height: 60upx;padding: 6upx;"  @click="bindDateStartChange(1)">
					<input disabled class="inputs" type="text" v-model="form.start_time" placeholder="选择开始时间"/>
				</view>
				
				
				<view class="" style="flex:2;text-align: center;margin: auto;background-color:#fff;height: 60upx;"></view>


				<view class="" style="flex:4;text-align: center;margin: auto;background-color:#F0F0F0; height: 60upx;padding: 7upx;"  @click="bindDateStartChange(2)">
					<input disabled class="inputs" type="text" v-model="form.end_time" placeholder="选择结束时间" />
				</view>
			</view>
		</view>

		<view class="boxcss"  style="padding: 30upx">
			<view class="littleTitle">
				<text>填写产品标题</text>
			</view>
			<view>
				<view class="" style="background-color:#F0F0F0;height: 60upx;padding: 6upx;">
					<input  class="inputs" type="text" v-model="form.title" placeholder="请填写产品标题" />
				</view>
			</view>
		</view>
		
		<view class="boxcss"  style="padding: 30upx">
			<view class="littleTitle">
				<text>分享标题标题</text>
			</view>
			<view>
				<view class="" style="background-color:#F0F0F0;height: 60upx;padding: 6upx;">
					<input class="inputs" type="text" v-model="form.share_title" placeholder="分享标题标题" />
				</view>
			</view>
		</view>
		
		<view class="boxcss"  style="padding: 30upx">
			<view class="littleTitle">
				<text>请填写产品领取总份数</text>
			</view>
			<view>
				<view class="" style="background-color:#F0F0F0;height: 60upx;padding: 6upx;">
					<input class="inputs" type="number" v-model="form.limit_stock" placeholder="请填写产品领取总份数" />
				</view>
			</view>
		</view>
		
		<view class="boxcss"  style="padding: 30upx">
			<view class="littleTitle">
				<text>填写产品限购购数</text>
			</view>
			<view>
				<view class="" style="background-color:#F0F0F0;height: 60upx;padding: 6upx;">
					<input class="inputs" type="number" v-model="form.limit_get" placeholder="请填写产品领取总份数" />
				</view>
			</view>
		</view>
		
		<view style="background-color:#fff;margin:2rpx 0 10rpx 0;padding: 30upx"  >
				<view style="font-size:30rpx ;font-weight: bold; padding:24rpx 0 60rpx 24rpx;">添加一张分享图</view>
				<view style="padding:0 0 24rpx 24rpx;display:flex;flex-wrap:wrap;">
					<!--  -->
					<view style="height:160rpx;width:160rpx;margin: 0 20rpx 20rpx 0;" v-for=" (item,index) in sharepictureArr">
						<image :src="staticUrl + item" style="display: inline;" @click="showshareImg(index)"></image>
						
						<view @click="clearshareImg(index)" style="width: 30rpx;height: 30rpx;background-color: black; color: #fff;line-height: 30rpx;text-align: center;position: relative;border-radius: 30rpx;left: 140rpx;top:-170rpx">
							<text>×</text>
						</view>
					</view>
					<view   :hidden="!shareshowUpload" style="padding: 1rpx;height:160rpx;width:160rpx" @tap="uploadshareImg">
						<image style="display: inline;" src="https://luma.jxdsy.cn/static/applet5/images/slices/addimage.png"></image>
					</view>
				</view>
		</view>
		
		
		
		<view style="background-color:#fff;margin:2rpx 0 10rpx 0;padding: 30upx"  >
				<view style="font-size:30rpx ;font-weight: bold; padding:24rpx 0 60rpx 24rpx;">添加图片</view>
				<view style="padding:0 0 24rpx 24rpx;display:flex;flex-wrap:wrap;">
					<!--  -->
					<view style="height:160rpx;width:160rpx;margin: 0 20rpx 20rpx 0;" v-for=" (item,index) in pictureArr">
						<image :src="staticUrl + item" style="display: inline;" @click="showImg(index)"></image>
						<view @click="clearImg(index)" style="width: 30rpx;height: 30rpx;background-color: black; color: #fff;line-height: 30rpx;text-align: center;position: relative;border-radius: 30rpx;left: 140rpx;top:-170rpx">
							<text>×</text>
						</view>
					</view>
					
					<!-- 服务器 -->
					<!-- <view style="height:160rpx;width:160rpx;margin: 0 20rpx 20rpx 0;" v-for=" (item,index) in uploaderList">
						<image :src="item" style="display: inline;" @click="showImg(index)"></image>
						<view @click="clearImg(index)" style="width: 30rpx;height: 30rpx;background-color: black; color: #fff;line-height: 30rpx;text-align: center;position: relative;border-radius: 30rpx;left: 140rpx;top:-170rpx">
							<text>×</text>
						</view>
					</view> -->
					
					<view   :hidden="!showUpload" style="padding: 1rpx;height:160rpx;width:160rpx" @tap="uploadImg">
						<image style="display: inline;" src="https://luma.jxdsy.cn/static/applet5/images/slices/addimage.png"></image>
					</view>
				</view>
		</view>
		
		<view style="text-align:center;height:300upx;background-color: #EEEEEE;">
			<button  style="top: 35%;width:300upx;color:#fff;background-color: #21B94C;"  @tap="publishActivity(publishtype)">确定发布</button>
		</view>
		
		<borydateTimePicker
			ref='dateTime'
			type='datetime' 
			:datestring='dateString' 
			@change='dateTimeChange'>
		</borydateTimePicker> 
		

	</view>
</template>

<script>
	import borydateTimePicker from '@/components/bory-dateTimePicker/bory-dateTimePicker.vue'; //时间弹窗
	import{activity_add,activity_find,activity_update} from "@/utils/api/merchant.js";
	export default {
		components:{
			borydateTimePicker
		},

		data() {
			return {
				shareuploaderList:[],
				sharejoinString: '',//上传图片字符
				shareimagesrc: '', //上传时后端返回的图片ID,拼接后存入	
				shareuploaderList: [], //保存上传图片url的数组
				shareuploaderNum: 0, //已经上传的图片数目
				shareshowUpload: true, //控制上传框的显隐
				sharepictureArr: [],//存放上传图片地址
				
				publishopen:true,
				
				publishtype:'',
				dateString:'',
				
				joinString: '',//上传图片字符
				imagesrc: '', //上传时后端返回的图片ID,拼接后存入	
				uploaderList: [], //保存上传图片url的数组
				uploaderNum: 0, //已经上传的图片数目
				showUpload: true, //控制上传框的显隐
				pictureArr: [],//存放上传图片地址
				
				publishContent: "", //评论内容  
				goods_id: '', //商品id
				goods_title: '',
				is_open:1,
				
				form: {
					start_time: '',
					end_time: '',
					title:'',
					limit_stock:'',
					limit_get:'',
					shop_id:'',
					share_title:''
				},
				
			}
		},
		computed: {
			staticUrl() {
				// https://luma.jxdsy.cn/api/File_upload/uploadify
				//静态资源地址
				return this.$store.state.staticUrl;
			},
			staticUrl1() {
				return this.$store.state.staticUrl1;
			},
		},
		onLoad(options) {
			let that = this
			this.activity_id = options.id
			this.publishtype = options.type
			
			// console.log(options)
			
			uni.getStorage({
				key:'userInfo',
				success(res) {
					console.log(res)
					that.form.shop_id=res.data.shop_id
				}
			})
			if(this.publishtype == 'edit'){
				this.activity_find(options.id);
			}
			
		},

		onShow() {
			
		},

		methods: {
			/**
			 * 查询产品
			 */
			activity_find(activity_id){
				console.log('修改')
				activity_find({
					shop_id:this.$data.shop_id,
					activity_id:activity_id
				}).then(res=>{
					if(res.code == 0){
						this.form.start_time = res.data.data.start,
						this.form.end_time = res.data.data.end,
						this.form.title = res.data.data.goods_name,
						this.form.limit_stock = res.data.data.limit_stock,
						this.form.limit_get = res.data.data.limit_get,
						this.pictureArr = res.data.data.picture,
						this.form.share_title = res.data.data.share_title,
						this.sharepictureArr[0] = res.data.data.share_pictures
						 
						console.log(this.share_title) 
						if(this.sharepictureArr[0]){
							this.shareshowUpload = false
						}
						
						if(this.pictureArr.length == 3){
							this.showUpload = false
						}
					}
				})
			},
			
			publishActivity(e) {
				
				
				
				if((!this.form.start_time) || (!this.form.end_time)){
					this.$api.msg('开始或结束时间未选择') 
					return false;
				}
				
				if(new Date(this.form.end_time).getTime() <=  new Date(this.form.start_time).getTime()){
					this.$api.msg('活动开始时间不可以大于结束时间')
					return false;
				}
				
				if(this.form.title==''){
					this.$api.msg('没有填写活动标题')
					return false;
				}
				
				if(this.form.limit_stock==''){
					this.$api.msg('没有填写领取总份数')
					return false;
				}
				if(this.form.share_title==''){
					this.$api.msg('没有填写分享标题')
					return false;
				}
				
				if(this.form.limit_get==''){
					this.$api.msg('没有填写限购购数')
					return false;
				}
				if(this.pictureArr.length==0){
					this.$api.msg('没有上传图片')
					return false;
				}
				
				if(this.sharepictureArr.length==0){
					this.$api.msg('没有上传分享图')
					return false;
				}
				
				let picString = '';
				for (let index = 0; index < this.pictureArr.length; index++) {
				  // console.log(this.pictureArr[index]) 
				  picString = picString + this.pictureArr[index] + ','
				}
				
				picString=picString.slice(0,picString.length-1)
				
				let param = {
					start:this.form.start_time,    //开始时间
					end	:	this.form.end_time,	//	结束时间
					limit_stock: this.form.limit_stock,// 领取数量
					limit_get:this.form.limit_get,	//限购购数
					shop_id: this.form.shop_id,// 商家id
					goods_name:this.form.title , //商品名称
					picture: picString,  //商品图片字符串逗哈分割
					share_pictures:this.sharepictureArr[0],
					share_title:this.form.share_title
				}
				console.log(this.publishtype , 125215154)
				
			
				 if(this.publishtype == 'edit'){
					param.activity_id = this.activity_id
					activity_update(param).then(res=>{
						if(res.code == 0){
							this.$api.msg(res.msg);
							setTimeout(()=>{
								uni.navigateBack()
							},1000)
						}
					})
				}else{
					console.log(this.publishopen)
					if(this.publishopen){
						this.publishopen = false;
						console.log(this.publishopen)
						activity_add(param).then(res=>{
							if(res.code == 0){
								this.$api.msg(res.msg);
								setTimeout(()=>{
									this.publishopen= true;
									uni.navigateBack()
								},1000)
							}
						})
					}else{
						this.$api.msg('不要连续点击')
					}
					
				}
				
			},
			
			bindDateStartChange(e) {
				this.is_open = e
				console.log(e)
				this.$refs.dateTime.show()
			},
			
			dateTimeChange(dataTime){
				if(this.is_open == 1){
					this.form.start_time = dataTime
				}else if(this.is_open == 2){
				this.form.end_time = dataTime
				}
			},
			
			uploadshareImg:function(e){
				let that = this;
				uni.chooseImage({
					count: 1 - that.shareuploaderNum, // 默认6
					sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
					success: function(res) {
						// 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
							
						that.shareuploaderList.concat(res.tempFilePaths);
						
						let uploaderList = res.tempFilePaths;
						
						// console.log(uploaderList);
						uni.showLoading({
							title: '图片上传中'
						});
						that.shareuploaderList = that.shareuploaderList.concat(res.tempFilePaths)
							
						that.shareuploaderNum = that.shareuploaderList.length
						
				
						
							
						let host_url = 'https://luma.jxdsy.cn/api/File_upload/uploadify';
							
						for (let i = 0; i < uploaderList.length; i++) {
							
							uni.uploadFile({
								url: host_url,
								filePath: uploaderList[i],
								name: 'files',
								formData: {
									files: uploaderList,
								},
								success: function(res) {
									// console.log(res)
									let json = res.data;
									json = json.replace(/\ufeff/g, "");
									let data = JSON.parse(json);
									// console.log(data)
							
									that.shareimagesrc = data.data
							
									that.sharepictureArr.push(that.shareimagesrc)
									
								
										uni.hideLoading()
										if (that.sharepictureArr.length == 1) {
					
											that.shareshowUpload = false
																
										}
								}
							})
							
							// console.log(that.pictureArr)
							
						}
							
					}
				})
			
							
					
			
			},
		
			//上传图片
			uploadImg: function(e) {
				let that = this;
				uni.chooseImage({
					count: 3 - that.uploaderNum, // 默认6
					sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
					success: function(res) {
						// 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
			
						that.uploaderList.concat(res.tempFilePaths);
						
						let uploaderList = res.tempFilePaths;
						
						// console.log(uploaderList);
						uni.showLoading({
							title: '图片上传中'
						});
						that.uploaderList = that.uploaderList.concat(res.tempFilePaths)
			
						that.uploaderNum = that.uploaderList.length
						

						
			
						let host_url = 'https://luma.jxdsy.cn/api/File_upload/uploadify';
			
						for (let i = 0; i < uploaderList.length; i++) {
			
							uni.uploadFile({
								url: host_url,
								filePath: uploaderList[i],
								name: 'files',
								formData: {
									files: uploaderList,
								},
								success: function(res) {
									// console.log(res)
									let json = res.data;
									json = json.replace(/\ufeff/g, "");
									let data = JSON.parse(json);
									// console.log(data)
			
									that.imagesrc = data.data
			
									that.pictureArr.push(that.imagesrc)
									
								
										uni.hideLoading()
										if (that.pictureArr.length == 3) {
	
											that.showUpload = false
																
										}
								}
							})
							
							// console.log(that.pictureArr)
							
						}
			
					}
				})
			},
			// 删除图片
			clearImg: function (index) {
			    var that = this
			    // var nowList = []; //新数据
			    // var pictureArr = that.pictureArr; //原数据
			
			    that.pictureArr.splice(index,1);
				
				that.uploaderNum =  that.uploaderNum - 1
				 // uploaderList: nowList,
				 that.showUpload= true
			    
			  },
			  // 删除图片
			  clearshareImg: function (index) {
			      var that = this
			      // var nowList = []; //新数据
			      // var pictureArr = that.pictureArr; //原数据
			  
			      that.sharepictureArr.splice(index,1);
			  	
			  	that.shareuploaderNum =  that.shareuploaderNum - 1
			  	 // uploaderList: nowList,
			  	 that.shareshowUpload= true
			      
			    },
			  
			  showImg(index){
				  var imgArr = this.pictureArr.map((value, index) => {
				  	return "https://luma.jxdsy.cn/attachs/" + value
				  })
				  let url = imgArr[index]
				  uni.previewImage({
				  	current: url,
				  	urls: imgArr,
				  })
			  },
			  
			  showshareImg(index){
			  				  var imgArr = this.sharepictureArr.map((value, index) => {
			  				  	return "https://luma.jxdsy.cn/attachs/" + value
			  				  })
			  				  let url = imgArr[index]
			  				  uni.previewImage({
			  				  	current: url,
			  				  	urls: imgArr,
			  				  })
			  }
		// }
	}
	}
</script>

<style>
	.productpages {
		background: #FFFFFF;
		/* padding: 30upx; */
		width: 100%;
	}

	.inputs {
		border: ;
	}
	.showUpload {
		display: none;
	}

	.littleTitle {
		font-size: 30upx;
		font-weight: bold;
		padding: 20upx 0;
	}
	.boxcss{
		padding: 20upx 0 ;
	}
</style>
