<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">
			打卡感悟：
			<view class="flex_star">
				<textarea v-model="content" value="" placeholder="请输入您的打卡感悟" @input="entertext" />
				<image class="add_img" :src="image==''?'../../static/tianjia_img@2x.png':image" mode="widthFix" @click="chooseImage"></image>
				
			</view>
		</view>
		<!-- 自我打分 -->
		<view class="self_mark">
			<view class="mark_title">自我打分：</view>
			<view class="layer_star no_icon_single">
				完成事件打分：
				<picker mode="selector" :range="completeList" @change="changeComplete">
					<view class="score_picker layer_between">
						<view>{{ completeList[complete] ? completeList[complete] : '请打分' }}</view>
						<image src="../../static/start_01.png" mode="widthFix"></image>
					</view>
				</picker>
			</view>
			<view class="layer_star no_icon_single">
				情绪状态打分：
				<picker mode="selector" :range="feeling" @change="changefeel">
					<view class="score_picker layer_between">
						<view>{{completeList[feelindex] ? completeList[feelindex] : '请打分' }}</view>
						<image src="../../static/start_01.png" mode="widthFix"></image>
					</view>
				</picker>
			</view>
		</view>
		<!-- 按钮 -->
		<view class="submit_btn" @click="submitClock()">打卡</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="canvas_dialog" v-if="isCanvas">
			<canvas style="width: 100%;height: 690;backgroundColor: #FFFFFF" canvas-id="myCanvas"></canvas>
			<!-- 保存、分享按钮 -->
			<view class="layer_around share_group_btn">
				<view class="layer_around share_btn">
					<image src="../../static/baocun_icon@2x.png" mode="widthFix"></image>
					保存图片
				</view>
				<view class="layer_around share_btn">
					<image src="../../static/fenxiang_icon@2x.png" mode="widthFix"></image>
					立即分享
					<button open-type="share"></button>
				</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:''
			
			
		};
	},
	methods: {
		
		// 设为隐私
		
		setpricy(){
			this.is_privacy=1
		},
		// 取消隐私
		cancelpricy(){
			this.is_privacy=2
		},
		
		// 获取打分项目
		getfenshu(){
			let that = this;
			    var url = '/api/clock/score_option';
			    var params = {
			     
			    }
			    app.post(url, params,"post").then((res) => {
					//事件id 情感id
			     that.eventid=res[0].id,
				 that.ganid=res[1].id
				  // 完成事件
				  if(res[0].min==res[0].max){
					  that.completeList.push(res[0].min)
					  
				  }else{
					  for(var i=res[0].min;i<res[0].max;i++){
					  					  console.log(i)
					  					 that.completeList.push(i) 
					  }
				  }
				  // 情感状态
				 
				  if(res[1].min==res[1].max){
				  			that.feeling.push(res[1].min)
				  					  
				  }else{
				  		for(var i=res[1].min;i<res[1].max;i++){
				  			console.log(i)
				  			that.feeling.push(i) 
				  		}
				  }
				  that.feeling=that.feeling;
				  console.log(that.feeling)
				  
			
			    }).catch((err) => {
			
			})
		},
		// 完成事件打分
		changeComplete(e) {
			let kid=this.eventid;
			let obj={
				
			}
			obj[this.eventid]=e.detail.value;
			this.complete = e.detail.value;
			this.scorearr[this.eventid]=e.detail.value;
			console.log(this.scorearr)
		},
		// 情感状态
		changefeel(e){
			let obj={
				
			}
			obj[this.ganid]=e.detail.value;
			this.feelindex=e.detail.value;
			this.scorearr[this.ganid]=e.detail.value;
			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){
					 this.gantext=e.detail.value ;
					 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);
				             that.image=res.url
				              that.cimage=res.kurl
				           
				   
				   
				           }).catch((err) => {
				             console.log(err)
				           })
				         },
				         fail: function (res) { }
				       })
				     },
				   
					   
				   
		// 提交
		submitClock() {
			var that = this;
				
			if (!that.isClick) {
			
				if(that.gantext==''){
					uni.showToast({
						title:'请输入打卡感悟',
						icon:"none"
					})
					
					return false
				}
				if(that.image==''){
					uni.showToast({
						title:'请上传图片',
						icon:"none"
					})
					
					return false
				}
				console.log(that.scorearr[that.eventid])
				if(that.scorearr[that.eventid]==undefined){
					uni.showToast({
						title:'请选择完成事件打分',
						icon:"none"
					})
					return false
				}
				if(that.scorearr[that.ganid]==undefined){
					uni.showToast({
						title:'请选择情感状态打分',
						icon:"none"
					})
					
					return false
				}
				
					console.log(that.scorearr)
					    var url = '/api/clock/clock';
					    var params = {
					      type: that.type,
						  content:that.gantext,
						  course_id:that.course_id,
						  customs_id:that.customs_id,
						  images:that.cimage,
						  array:JSON.stringify(that.scorearr),
						  is_privacy:that.is_privacy,
					    }
					    app.post(url, params).then((res) => {
					      console.log(res);
					     // this.isDialog = true;
					     // this.isContent = true;
					     uni.showToast({
					     	title: '打卡成功',
					     	icon: 'success',
					     	duration: 3000
					     });
					
					    }).catch((err) => {
							console.log(err)
					
					    })
					
					// setTimeout(function() {
					// 	// 海报
					// 	t.isCanvas = true;
					// 	t.isDialog = true;
					// 	t.getCanvas();
					// }, 3000);
				} 
			
		},
		// 绘制海报
		getCanvas() {
			var ctx = uni.createCanvasContext('myCanvas');
			// 背景图
			// ctx.drawImage("../../static/bg.png", 0, 0, 375, 550);
			// ctx.save();
			// // 头像圆
			// ctx.arc(198, 43, 30, 0, 2 * Math.PI)
			// ctx.arcTo(100, 100, 120, 120, 10)
			// ctx.setFillStyle('#fff')
			// ctx.fill()
			// ctx.save()
			// // 头像
			// ctx.drawImage("../../static/header.png",173,18,50,50);
			// ctx.save();
			// // 昵称
			// var name = "赚钱的小李";
			// ctx.setFontSize(14);
			// ctx.fillText(name,162,90);
			// ctx.save()
			// // 二维码
			// ctx.drawImage("../../static/qr.png",120,335,140,140);
			// ctx.save();
			// ctx.draw();
		},
		// 关闭弹窗
		closeDialog() {
			this.isDialog = false;
			this.isContent = false;
			this.isCanvas = false;
		},
		
	},
	onLoad(options) {
		console.log(options)
		this.customs_id=options.custom_id;
		this.course_id=options.courseid;
		console.log(this.customs_id);
		console.log(this.course_id)
		this.getfenshu()	
	},
	// 分享
	onShareAppMessage() {
		if (res.from === 'button') {
			// 来自页面内分享按钮
		}
		return {
			title: '打卡',
			path: '/pages/course/submitClock'
		};
	}
};
</script>

<style lang="scss">
	.clockimg{
		width:32rpx;
		height:32rpx;
		font-size: 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 {
		.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>