<template>
	<!-- 评论 -->
	<view class="course_comment">
		<view class="comment_content">
			<textarea v-model="content" placeholder="请输入评论内容，最多1000字" @input="entercomment" />

			<!-- 字数 -->
			<view class="word_num">{{content.length}}/1000</view>
			<view v-if="addpic">
				<!-- 添加图片 -->
				<view class="add_pic layer_star"  @click="uploadpic">
					<image src="../../static/tupian_icon@2x.png" mode="widthFix"></image>
					<view class="add_word">添加图片</view>
				</view>
				
			</view>
			
			<view class="picbox flexone" v-else>
				<!-- 上传的图片 -->
				<view class="flexone">
					<view class="upload_pic" v-for="(item,index) in image" :key="index">
						<image :src="item" mode=""></image>
						<view class="closeimg" @click="deleteimg(item)">
							<image src="../../static/close.png" mode=""></image>
						</view>
					</view>
				</view>
				
				<view class="upload_pic" @click="uploadImg()">
					<image :src="img" mode="widthFix"></image>
				</view>
			</view>
		</view>
		
		
		
		<!-- 按钮 -->
		<view class="send_wrap" @click="send">
			<view class="send_box">发送</view>
		</view>
		
		<view class="register" v-if="sendtrue">
			<view class="sendwrap">
				<view class="sendimg">
					<image src="/static/img_01.png"></image>
				</view>
				<view class="sendsuccess">发送成功</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	import app from "../../App.vue";
	export default {
		data() {
			return {
				content:"",
				img:"../../static/addpic.png",
				addpic:true,
				image:[],
				cimage:'',
				// 打卡记录id
				clock_log_id:'',
				//评论父级id
				comments_id:'',
				courseid:'',
				user_id:'',
				commenttype:'',
				customs_id:'',
				sendtrue:false
				
				
			}
		},
		methods: {
			// 输入评论内容
			entercomment(e){
				this.content=e.detail.value
			},
			uploadpic(){
				console.log(3874273487)
				this.addpic=false
			},
			// 上传图片
			
			uploadImg() {
			   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.push(res.url);
					 that.image=that.image
			          that.cimage=res.kurl
			       
							   
							   
			       }).catch((err) => {
			         console.log(err)
			       })
			     },
			     fail: function (res) { }
			   })
			 },
			 deleteimg(item){
			 	// console.log(e)
			 	// var url=e.currentTarget.dataset.url;
			 	for(var i=0;i<this.image.length;i++){
			 		if(item==this.image[i]){
			 			this.image.splice(i,1);
			 			
			 		}
			 	}
			 	this.image=this.image;
			 	
			 	
			 },
			 //发送
			 send(){
				 let that = this;
				 if(that.content==''){
					 uni.showToast({
					 	title:'请输入评价内容',
						icon:'none'
					 })
					 return false
				 }
				    var url = '/api/comments/commit';
				    var params = {
					  clock_log_id:that.clock_log_id,
				      comments_id: that.comments_id,
				     content:that.content,
					 images:that.image.join(",")
				    }
					console.log(this.clock_log_id)
					console.log(params)
					console.log(this.comments_id)
				    app.post(url, params).then((res) => {
				      console.log(res);
						// uni.showToast({
						// 	title:'提交成功',
						// 	icon:'none'
						// })
						that.sendtrue=true
						console.log(typeof(this.commenttype))
						console.log(this.commenttype)
				     setTimeout(function(){
						 if(that.commenttype==1){
							 
							 console.log(988765,that.courseid)
							uni.redirectTo({
								url:'/pages/course/courseDetail?id='+that.customs_id+'&courseid='+that.courseid
							}) 
						 }else if(that.commenttype==2){
							 console.log(9887)
							 uni.redirectTo({
							 	url:'/pages/course/recordClock?customs_id='+that.customs_id+'&user_id='+that.user_id+'&courseid='+that.courseid
							 })
						 }else if(that.commenttype==3){
							 console.log(9887)
							 uni.switchTab({
							 	url:'/pages/mine/mine'
							 })
						 }
						 
					 },1500)
				    }).catch((err) => {
						
				    }) 
			 }
		},
		
		onLoad(options) {
			console.log(options)
			this.commenttype=options.commenttype
			if(options.commenttype==2){
				this.courseid=options.courseid;
				this.user_id=options.user_id;
				this.clock_log_id=options.clock_log_id;
				
				this.customs_id=options.customs_id
				
				if(options.comments_id!=undefined){
					this.comments_id=options.comments_id;
				}
			}else if(options.commenttype==1){
				this.clock_log_id=options.clock_log_id;
				this.courseid=options.courseid
				this.customs_id=options.customs_id
				if(options.comments_id!=undefined){
					this.comments_id=options.comments_id;
				}
				
			}else{
				this.clock_log_id=options.clock_log_id;
				this.customs_id=options.customs_id
				if(options.comments_id!=undefined){
					this.comments_id=options.comments_id;
				}
			}
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #fafbfd;
	}
	.sendimg{
		width:100rpx;
		height:100rpx;
		font-size: 0;
	}
	.sendsuccess{
		color:#06121E;
		font-size:30rpx;
		margin-top:30rpx;
	}
	.sendwrap{
		width:446rpx;
		height:256rpx;
		background:rgba(255,255,255,1);
		box-shadow:0rpx 0rpx 6rpx rgba(0,0,0,0.08);
		opacity:1;
		border-radius:8rpx;
		position: absolute;
		top:50%;
		left:50%;
		transform: translate(-50%,-50%);
		display:flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		
	}
	.picbox{
		margin-top:85rpx;
	}
	.course_comment{
		padding: 36upx 32upx 150upx;
		// 信息
		.comment_content{
			position: relative;
			border:2upx solid rgba(189,196,206,1);
			padding: 26upx 28upx 50upx;
			background-color: #fff;
			textarea{
				width: 100%;
				
				
				
				box-sizing: border-box;
				height: 500upx;
			}
			// 添加图片
			.add_pic{
				position: absolute;
				left: 26upx;
				bottom: 14upx;
				image{
					width: 36upx;
					margin-right: 12upx;
				}
				.add_word{
					color: #3D444D;
					font-size: 24upx;
					border-bottom: 1px solid #000;
				}
			}
			// 字数
			.word_num{
				position: absolute;
				right: 26upx;
				top: 530upx;
				color: #3D444D;
				font-size: 24upx;
			}
		}
		// 上传的图片
		.upload_pic{
			width:200upx;
			height:200upx;
			font-size:0;
			position: relative;
			margin-right:32rpx;
			
		}
		
		
		.closeimg{
			width:36rpx;
			height:36rpx;
			font-size: 0;
			position: absolute;
			right:-20rpx;
			top:0
		}
		// 按钮
		.send_wrap{
			width: 100%;
			position: fixed;
			left: 0;
			padding-bottom: 36upx;
			bottom:0;
			left:0;
			display:flex;
			justify-content: center;
			background: #fff;
			.send_box{
				width:686upx;
				margin: 0 32upx;
				height: 96upx;
				text-align: center;
				line-height: 96upx;
				border-radius: 48upx;
				color: #fff;
				background-color: #EE8B27;
				font-size: 28upx;
				
			}
			
		}
		
	}
</style>