<template>
	<!-- 提交内容 -->
	<view class="submit_clock">
		<!-- 标题 -->
		<view class="layer_between clock_title">
			<view class="layer_star">
				<image src="../../static/theme.png" mode="widthFix"></image>
				<view class="title_l">提交内容</view>
			</view>
			<view class="layer_star flexone" v-if="is_privacy==2" @click="setpricy">
				<view class="clockimg">
					<image src="../../static/colco.png" mode="widthFix"></image>
				</view>
				<view class="title_r">设为隐私</view>
			</view>
			<view class="layer_star flexone" v-else @click="cancelpricy">
				<view class="clockimg">
					<image src="../../static/jucolock.png" mode="widthFix"></image>
				</view>
				<view class="title_r juse">取消隐私</view>
			</view>
		</view>
		<!-- 打卡 -->

		<!-- <picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
			<view class="clock_single layer_nostar">打卡时间：{{date}}</view>
		</picker> -->
		<view class="clock_single layer_nostar">
			<text class='dakaganwu'>打卡感悟：</text>
			
			<view class="flex_star">
				<textarea v-model="gantext" value="gantext" placeholder="请输入您的打卡感悟" @input="entertext" maxlength="2000"/>

				<view class="flexone imagebox">
					
						<view class="addimg"  v-for="(item,index) in image" :key="index">
							<image class="add_img" :src="item" mode=""></image>
							<view class="closeimg" @click="deleteimg" :data-url="item">
								<image src="../../static/close.png"></image>
							</view>
						</view>
					
					<view class="imgadd">
						<image class="add_img" src="../../static/addpic.png" mode="widthFix" @click="chooseImage"></image>
					</view>
				</view>
			</view>
		</view>
		<!-- 自我打分 -->
		<view class="self_mark">
			<view class="mark_title">自我打分：</view>
			<view class="layer_star no_icon_single" v-for="(item,index) in scorelist" :key="index">
				{{item.title}}：
				<picker mode="selector" :range="item.score" @change="changeComplete" :value="item.indexk" :data-index="index">
					<view class="score_picker layer_between">
						<view>{{item.name}}</view>
						<image src="../../static/start_01.png" mode="widthFix"></image>
					</view>
				</picker>
			</view>
		</view>
		<!-- 按钮 -->
		<view  v-if="item==''">
			<view class="submit_btn" @click="submitClock()" v-if="daka==false">打卡</view>
			<view class="submit_btn" v-else>打卡</view>
		</view>
		
		<view v-else>
			<view class="submit_btn" @click="editClock()" v-if="dakak==false">
				修改
			</view>
			<view class="submit_btn" v-else>修改</view>
			
		</view>
		
		<!-- 弹窗 -->
		<view class="tx_mask" v-if="isDialog" @click="closeDialog"></view>
		<view class="mask_content" v-if="isContent">
			<view class="content_tips">打卡内容不能为空，请重新编辑</view>
			<view class="content_btn" @click="closeDialog">确定</view>
		</view>
		
		
		<!-- 海报 -->
		<view class="register" v-if="isCanvas">
			<view class="canvas_dialog" >
				<!-- <canvas style="width: 100%;height: 690;backgroundColor: #FFFFFF" canvas-id="myCanvas"></canvas> -->
				<view class="topimg">
					<image :src="posterimg"></image>
				</view>
				<!-- 保存、分享按钮 -->
				<view class="layer_around share_group_btn">
					<view class="layer_around share_btn" @click="cancel">
						<image src="../../static/baocun_icon@2x.png" mode="widthFix"></image>
						取消
					</view>
					<view class="layer_around share_btn" @click='baocun'>
						<image src="../../static/baocun_icon@2x.png" mode="widthFix"></image>
						保存图片
						<!-- <button open-type="share"></button> -->
					</view>
				</view>
			</view>
				
				
			
		</view>
		
	
	</view>
</template>

<script>
	import app from "../../App.vue";
export default {
	
	data() {
		const currentDate = this.getDate({
		            format: true
		        })
		return {
			completeList: [],
			complete: '',
			feeling:[],
			feelindex:'',
			content: '',
			// 弹窗
			isDialog: false,
			// 必填提示
			isContent: false,
			// 海报
			isCanvas: false,
			// 防连点
			isClick: false,
			
			date: currentDate,
			// 打卡感悟
			gantext:'',
			type:1,
			course_id:'',
			customs_id:'',
			score:[],
			// 是否是隐私
			is_privacy:2,
			images:'',
			// 打卡分数
			scorearr:{},
			// 显示的图片
			image:[],
			// 传的图片
			cimage:[],
			eventid:'',
			ganid:'',
			item:'',
			change:'',
			posterimg:'',
			// 打分数组
			scorelist:[],
			clock_log_id:'',
			changetype:'',
			daka:false,
			dakak:false
			
			
		};
	},
	methods: {
		
		// 设为隐私
		
		setpricy(){
			
			this.is_privacy=1;
			// let that=this;
			// let url='/api/clock/set_privacy'
			// let param = {
			// 	clock_log_id:this.clock_log_id
			// }
			// app.post(url, param)
			// 	.then(r => {
			// 		console.log(r)
			// 		uni.showToast({
			// 			title:'设为隐私成功',
			// 			icon:'none'
			// 		})
			// 	})
		},
		// 取消隐私
		cancelpricy(){
			this.is_privacy=2;
			// let that=this;
			// let url='/api/clock/set_privacy'
			
			// let param = {
			// 	clock_log_id:this.clock_log_id
			// }
			// app.post(url, param)
			// 	.then(r => {
			// 		console.log(r)
			// 		uni.showToast({
			// 			title:'取消隐私成功',
			// 			icon:'none'
			// 		})
			// 	})
		},
		
		// 获取打分项目
		getfenshu(){
			let that = this;
			    var url = '/api/clock/score_option';
			    var params = {
			     course_id:that.course_id
			    }
			    app.post(url, params,"post").then((res) => {
					
					for(var obj of res){
						obj.score=[];
						obj.name='请打分';
						obj.indexk=0;
						if(obj.min==obj.max){
							obj.score.push(obj.max)
						}else{
							for(var i=obj.min;i<=obj.max;i++){
							 obj.score.unshift(i)
							}
						}
					}
					that.scorelist=res
					
					// 给打分项赋默认值
					if(that.item!=''){
						for(var i=0;i<that.scorelist.length;i++){
							for(var j=0;j<that.item.clock_score.length;j++)
							if(that.scorelist[i].title==that.item.clock_score[j].title){
								that.scorelist[i].name=that.item.clock_score[j].score;
								for(var k=0;k<that.scorelist[i].score.length;k++){
									if(that.scorelist[i].score[k]==that.item.clock_score[j].score){
										that.scorelist[i].indexk=k
										
									}
								}
							}
						}
						// 给打分项赋值
						that.scorelist.forEach(function(value,index,array){
							that.scorearr[value.id]=value.name
						})
					}
					that.scorearr=that.scorearr;
					that.scorelist=that.scorelist
			
			    }).catch((err) => {
			
			})
		},
		// 完成事件打分
		changeComplete(e) {
			
			console.log(e)
			let index=e.currentTarget.dataset.index;
			let indexk=e.detail.value
			let newscorelist=this.scorelist;
			newscorelist[index].name=newscorelist[index].score[indexk];
			this.scorelist=newscorelist;
			// 传值
			this.scorearr[newscorelist[index].id]=newscorelist[index].score[indexk];
			console.log(this.scorearr)
		},
	
		// 修改日期
		 getDate(type) {
		            const date = new Date();
		            let year = date.getFullYear();
		            let month = date.getMonth() + 1;
		            let day = date.getDate();
		
		            if (type === 'start') {
		                year = year - 60;
		            } else if (type === 'end') {
		                year = year + 2;
		            }
		            month = month > 9 ? month : '0' + month;;
		            day = day > 9 ? day : '0' + day;
		            return `${year}-${month}-${day}`;
		        },
		 bindDateChange: function(e) {
		               this.date = e.target.value
		           },
				   
				   // 输入打卡感悟
				   entertext(e){
					   let str=e.detail.value;
					 str = str.split('&hc').join('\n');
					 this.gantext=str ;
					 console.log(this.gantext)
					  
				   },
				   // 上传图片
				   
				    chooseImage() {
				       let that = this;
				       uni.chooseImage({
				         count: 1,
				         sizeType: ['original', 'compressed'],
				         success: function (res) {
				           console.log(res.tempFilePaths[0])
				           app.upload('image', res.tempFilePaths[0],"post").then((res) => {
				             console.log('上传文件', res);
							 console.log('99887',that.image)
							 let newimage=that.image;
							 newimage.push(res.url);
							 console.log(newimage)
							 console.log(res.url)
							 that.iamge=newimage
				              // that.image.push(res.url)
				              // that.cimage.push(res.kurl)
							  // that.image=that.image;
							  // that.cimage=that.cimage
				           }).catch((err) => {
				             console.log(err)
				           })
				         },
				         fail: function (res) { }
				       })
				     },
		
		// 删除图片
		deleteimg(e){
			console.log(e)
			var url=e.currentTarget.dataset.url;
			console.log(url)
			for(var i=0;i<this.image.length;i++){
				if(url==this.image[i]){
					this.image.splice(i,1);
					// this.cimage.splice(i,1)
				}
			}
			this.image=this.image;
			this.cimage=this.cimage;
			
		},
		
		// 获取详情
		getcordtail(){
			let that=this;
			let url='/api/clock/edit_clock_view'
			
			let param = {
				clock_log_id:that.clock_log_id
			}
			app.post(url, param)
				.then(r => {
					console.log(r)
					that.item=r;
					console.log('7896754',that.item)
					
					this.gantext=r.content;
					this.date=r.createtime;
					this.is_privacy=r.is_privacy;
					this.image=r.images==null?[]:r.images;
					this.cimage=r.images==null?[]:r.images;
					
					console.log(this.image)
					
					that.getfenshu()

				})
		},
		
		// 提交
		
		submitClock() {
			var that = this;
			that.daka=true
				
			if (!that.isClick) {
				
				if(that.gantext==''){
					uni.showToast({
						title:'请输入打卡感悟',
						icon:"none"
					})
					that.daka=false
					return false
				}
				
				
				for(var obj of that.scorelist){
					if(obj.name=='请打分'){
						uni.showToast({
							title:'请选择打分事项',
							icon:'none'
						})
						that.daka=false
						return false
					}
				}
				uni.showLoading({
				    title: '加载中'
				});
					
					    var url = '/api/clock/clock';
					    var params = {
						  content:that.gantext,
						  course_id:that.course_id,
						  customs_id:that.customs_id,
						  images:that.image.join(","),
						  clock_score:JSON.stringify(that.scorearr),
						  is_privacy:that.is_privacy,
					    }
					    app.post(url, params).then((res) => {
							 uni.hideLoading();
					      console.log(res);
						 
						  setTimeout(function(){
							  uni.showToast({
							  	title: '打卡成功',
							  	icon: 'success',
							  	
							  });
						  },200)
						
							 
							 setTimeout(function() {
								 uni.showLoading({
								     title: '海报加载中'
								 });
							 }, 800);
							
							
							that.posterimg=res.poster;
							 that.savefilecode();
							 
							 setTimeout(function(){
								 
								  uni.hideLoading();
							 		
							 		that.isCanvas=true;
							 },2000)
							 
							 // setTimeout(function() {
								
							 // }, 3500);
					    }).catch((err) => {
							console.log(err)
							uni.showToast({
								title:err.msg,
								icon:'none'
							})
					
					    })
				} 
			
		},
		
		// 修改打卡
		editClock(){
			var that=this;
			console.log('448958989')
			 that.dakak=true
			if (!that.isClick) {
			
				if(that.gantext==''){
					
					uni.showToast({
						title:'请输入打卡感悟',
						icon:"none"
					})
					 that.dakak=false
					return false
				}
				// if(that.image==''){
				// 	uni.showToast({
				// 		title:'请上传图片',
				// 		icon:"none"
				// 	})
					
				// 	return false
				// }
				
				for(var obj of that.scorelist){
					if(obj.name=='请打分'){
						uni.showToast({
							title:'请选择打分事项',
							icon:'none'
						})
						 that.dakak=false
						return false
					}
				}
				
					console.log(that.scorearr)
					    var url = '/api/clock/edit_clock';
					    var params = {
						  id:that.clock_log_id,
						  content:that.gantext,
						  course_id:that.course_id,
						  customs_id:that.customs_id,
						  images:that.image==null?'':that.image.join(","),
						  clock_score:JSON.stringify(that.scorearr),
						  is_privacy:that.is_privacy,
					    }
					    app.post(url, params).then((res) => {
							
					      console.log(res);
							 uni.showToast({
							 	title: '修改成功',
							 	icon: 'seccess',
							 	duration:1000
							 });
							 console.log(that.changetype)
							 
							 setTimeout(function(){
								 if(that.changetype==1){
									 uni.navigateTo({
									 	url:"/pages/course/courseDetail?id="+that.customs_id+'&courseid='+that.course_id
									 })
								 }else{
									 uni.switchTab({
									 	url:'/pages/mine/mine'
									 })
								 }
							 },1500)
							 
					
					    }).catch((err) => {
							console.log(err)
					
					    })
				}
		},
		
		
		baocun: function () {
		    console.log(999)
		    var that = this
		    uni.getSetting({
		      success(res) {
		        if (!res.authSetting['scope.writePhotosAlbum']) {
		          uni.authorize({
		            scope: 'scope.writePhotosAlbum',
		            success() { //这里是用户同意授权后的回调
		
		
		              uni.saveImageToPhotosAlbum({
		                filePath: that.posterimg,
		                success(res) {
		                  uni.showModal({
		                    content: '图片已保存到相册',
		                    showCancel: false,
		                    confirmText: '好的',
		                    confirmColor: '#333',
		                    success: function (res) {
		                      if (res.confirm) {
		                        console.log('用户点击确定');
								setTimeout(function(){
									uni.navigateTo({
										url:"/pages/course/courseDetail?id="+that.customs_id+'&courseid='+that.course_id
									})
								},1500)
		                        /* 该隐藏的隐藏 */
		                        // that.setData({
		                        //   maskHidden: false
		                        // })
		                      }else{
								  
							  }
		                    },
		                    fail: function (res) {
		
		                    }
		                  })
		                }
		              })
		
		
		
		            },
		            fail() { //这里是用户拒绝授权后的回调
		
		              uni.showModal({
		                title: '提示',
		                content: '您取消授权，无法保存图片，点击确定打开权限',
		                success(res) {
		                  if (res.confirm) {
		                    console.log('用户点击确定')
		                    uni.openSetting({
		                      success(res) {
		                        console.log(res.authSetting)
		                        // res.authSetting = {
		                        //   "scope.userInfo": true,
		                        //   "scope.userLocation": true
		                        // }
		                      }
		                    })
		                  } else if (res.cancel) {
		                    console.log('用户点击取消')
		                  }
		                }
		              })
		
		            }
		          })
		        } else { //用户已经授权过了
		
		          // console.log(that.data.codeurl)
		          uni.saveImageToPhotosAlbum({
		            filePath: that.posterimg,
		            success(res) {
		              uni.showModal({
		                content: '图片已保存到相册',
		                showCancel: false,
		                confirmText: '好的',
		                confirmColor: '#333',
		                success: function (res) {
		                  if (res.confirm) {
		                    console.log('用户点击确定');
							setTimeout(function(){
								uni.redirectTo({
								
									url:"/pages/course/courseDetail?id="+that.customs_id+'&courseid='+that.course_id
								})
							},1500)
		                    /* 该隐藏的隐藏 */
		                    // that.setData({
		                    //   maskHidden: false
		                    // })
		                  }else{
							  
						  }
		                },
		                fail: function (res) {
		
		                }
		              })
		            }
		          })
		        }
		      }
		    })
		
		  },
		
		  savefilecode() {
		    let that = this;
		    
		    uni.downloadFile({
		      url: that.posterimg,
		      header: {},
		      success: function (res) {
		        console.log('下载图片下载图片下载图片', res)
		        var tempFilePath = res.tempFilePath
		        //console.log('临时文件地址是：' + tempFilePath)
		        uni.saveFile({
		          tempFilePath: tempFilePath,
		          success: function (res) {
		            console.log(res)
		            var saveFilePath = res.savedFilePath;
					that.posterimg=res.savedFilePath
		            
		
		            console.log('123456855555555', that.posterimg)
		
		          }, //可以将saveFilePath写入到页面数据中
		          fail: function (res) { },
		          complete: function (res) {
		            console.log('complete后的res数据：')
		          },
		        }) //,
		      },
		      // fail: function (res) {
		      //   wx.showModal({
		      //     title: '下载失败',
		      //     content: '请联系管理员',
		      //   })
		      // },
		      complete: function (res) { },
		    })
		  },
		//关闭海报
		
		cancel(){
			let that=this;
			this.isCanvas=false  
			setTimeout(function(){
				uni.redirectTo({
					url:"/pages/course/courseDetail?id="+that.customs_id+'&courseid='+that.course_id
				})
			},100)
		},
		
		// 关闭弹窗
		closeDialog() {
			this.isDialog = false;
			this.isContent = false;
			this.isCanvas = false;
		},
		
	},
	onLoad(options) {
		console.log('999',options)
		this.customs_id=options.custom_id;
		this.course_id=options.courseid;
		if(options.changetype!=undefined){
			this.changetype=options.changetype
		}
		
		if(options.change==1){
			console.log(8888)
			// var item=JSON.parse(options.item)
			// console.log(item)
			this.clock_log_id=options.clock_log_id;
			
			this.getcordtail()
		}
		
		
		this.getfenshu()	
	},
	// 分享
	onShareAppMessage() {
		if (res.from === 'button') {
			// 来自页面内分享按钮
		}
		return {
			title: '打卡',
			path: '/pages/course/submitClock'
		};
	}
};
</script>

<style lang="scss">
	.register{
		z-index:9999;
		
	}
	.canvas_dialog{
		z-index:99999;
	}
	.clockimg{
		width:32rpx;
		height:32rpx;
		font-size: 0;
	}
	.dakaganwu{
		width:353rpx;
	}
	.imagebox{
		flex-wrap: wrap;
	}
	.topimg{
		width:100%;
		height:905rpx;
	}
	.addimg{
		position: relative;
		margin-right:32rpx;
	}
	.closeimg{
		width:36rpx;
		height:36rpx;
		font-size: 0;
		position: absolute;
		right:-20rpx;
		top:0
	}
.submit_clock {
	border-top: 24upx solid #fafbfd;
	padding: 50upx 32upx;
	// 标题
	.clock_title {
		margin-bottom: 76upx;
		image {
			width: 32upx;
			margin-right: 10upx;
		}
		.title_l {
			color: #595959;
			font-size: 36upx;
		}
		.title_r {
			color: #8c9198;
			font-size: 24upx;
		}
		.juse{
			color:#EE8B27;
		}
	}
	// 打卡
	.clock_single {
		color: #06121e;
		font-size: 32upx;
		margin-bottom: 32upx;
		textarea {
			padding: 12upx 24upx;
			width: 516upx;
			box-sizing: border-box;
			background-color: #f9f9f9;
			font-size: 28upx;
		}
		.add_img {
			width: 140upx;
			height: 140upx;
			margin-top: 26upx;
		}
	}
	// 自我打分
	.self_mark {
		.mark_title {
			margin-bottom: 36upx;
		}
		.no_icon_single {
			font-size: 28upx;
			color: #06121e;
			margin-bottom: 14upx;
			// 选择框
			.score_picker {
				width: 156upx;
				height: 46upx;
				background: rgba(249, 249, 249, 1);
				border-radius: 8upx;
				padding: 0 12upx 0 46upx;
				color: #bdc4ce;
				font-size: 24upx;
				image {
					width: 20upx;
				}
			}
		}
	}
	// 按钮
	.submit_btn {
		height: 96upx;
		line-height: 96upx;
		width: 100%;
		text-align: center;
		color: #fff;
		font-size: 28upx;
		box-shadow: 0px 6upx 6upx rgba(238, 139, 39, 0.16);
		border-radius: 48upx;
		background-color: #ee8b27;
		margin-top: 100upx;
	}
	// 提示弹窗
	.content_tips {
		margin: 80upx 0 100upx;
		color: #06121e;
		font-size: 28upx;
		text-align: center;
	}
	.content_btn {
		width: 252upx;
		height: 60upx;
		background: rgba(238, 139, 39, 1);
		border-radius: 8upx;
		font-size: 28upx;
		line-height: 60upx;
		text-align: center;
		margin: 0 auto;
		color: #fff;
		margin-bottom: 66upx;
	}
	// 分享按钮
	.share_group_btn {
		margin-top:25rpx;
		.share_btn {
			width: 192upx;
			height: 62upx;
			border: 1px solid #fff;
			border-radius: 8upx;
			color: #fff;
			position: relative;
			image {
				width: 32upx;
			}
			button{
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				z-index: 101;
				opacity: 0;
			}
		}
	}
}
</style>