<template>
	<!-- 打卡记录 -->
	<view class="record_clock">
		<!-- 打卡人信息 -->
		<view class="record_people layer_nostar">
			<view class="people_l layer_nostar">
				<!-- 头像 -->
				<image src="../../static/header.png" mode="" @click="toRecord()"></image>
				<view class="">
					<!-- 姓名 -->
					<view class="people_name">张三</view>
					<!-- 课程进度 -->
					<view class="people_progress">已解锁2课时</view>
				</view>
			</view>
		</view>
		<!-- 本次打卡记录 -->
		<view class="record_msg">
			<!-- 课程信息 -->
			<view class="record_course">
				<!-- 右侧 -->
				<view class="people_r" @click="toSubmit()">修改</view>
				<!-- 课程名称 -->
				<view class="layer_star  course_name course_single">
					<image class="course_icon" src="../../static/icon_01.png" mode=""></image>
					<view class="">【深潜挑战】 21天专注力挑战</view>
				</view>
				<view class="layer_star  course_single">
					<image class="course_icon" src="../../static/icon_02.png" mode=""></image>
					<view class="">第2课</view>
				</view>
				<view class="layer_star no_icon_single"><view class="">学习时间：2019年12月26日</view></view>
				<view class="layer_star no_icon_single"><view class="">感悟：好</view></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="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_noend">
					<view class="course_btn justify_between" @click="toComment()">
						<image src="../../static/pinglun_icon@2x.png" mode="widthFix"></image>
						评论
					</view>
					<view class="course_btn justify_between" :class="{ active: isPoint }" @click="changePoint()">
						<image :src="isPoint ? pointImg2 : pointImg1" mode="widthFix"></image>
						点赞
					</view>
				</view>
			</view>
		</view>
	
	
	</view>
</template>

<script>
export default {
	data() {
		return {
			completeList: ['1', '2', '3'],
			complete: '',
			// 点赞
			isPoint:false,
			pointImg1:require("../../static/zan_icon@2x.png"),
			pointImg2:require("../../static/img_03.png"),
		};
	},
	methods: {
		// 去提交打卡页
		toSubmit(){
			uni.navigateTo({
				url:"/pages/course/submitClock"
			})
		},
		// 去评论页
		toComment(){
			uni.navigateTo({
				url:"/pages/course/courseComment"
			})
		},
		// 完成事件打分
		changeComplete(e) {
			this.complete = e.detail.value;
		},
		// 点赞
		changePoint(){
			this.isPoint = !this.isPoint
		},
	},
};
</script>

<style lang="scss">
	page{
		background-color: #fafbfd;
	}
.record_clock {
	// 打卡人信息
	.record_people {
		padding: 62upx 32upx;
		height: 254upx;
		background-color: #ee8b27;
		// 左侧
		.people_l {
			color: #fff;
			// 头像
			image {
				width: 92upx;
				height: 92upx;
				margin-right: 32upx;
			}
			// 姓名
			.people_name {
				font-size: 32upx;
				margin-bottom: 12upx;
			}
			// 课程进度
			.people_progress {
				font-size: 24upx;
			}
		}
	}
	// 本次打卡记录
	.record_msg {
		padding: 0 32upx;
		.record_course {
			position: relative;
			margin-top: -172upx;
			background-color: #fff;
			box-shadow: 0 0 12upx rgba(0, 0, 0, 0.04);
			border-radius: 8upx;
			padding: 56upx 32upx;
			// 修改按钮
			.people_r {
				width: 112upx;
				height: 56upx;
				position: absolute;
				top: 56upx;
				right: 32upx;
				border: 1px solid rgba(238, 139, 39, 1);
				border-radius: 8upx;
				color: #ee8b27;
				font-size: 24upx;
				text-align: center;
				line-height: 56upx;
			}
			.course_icon {
				width: 32upx;
				height: 32upx;
			}
			.course_name {
				color: #ee8b27;
			}
			.course_single {
				margin-bottom: 14upx;
				image {
					margin-right: 20upx;
				}
				view{
					width: 432upx;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}
			}
			// 无图标
			.no_icon_single {
				padding-left: 52upx;
				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;
					}
				}
			}
			// 评论、点赞
			.course_btn {
				padding: 12upx 28upx;
				color: #8C9198;
				font-size: 24upx;
				border: 2upx solid rgba(140, 145, 152, 1);
				border-radius: 8upx;
				margin-left: 24upx;
				margin-top: 34upx;
				image {
					width: 32upx;
					margin-right: 14upx;
				}
			}
			.active {
				border-color: #ff7441;
				color: #ff7441;
			}
		}
	}
}
</style>