<template>
	<view class="content">
		<!-- 评论 -->
		<view class="theme_comment">
			<view class="comment_single">
				<!-- 人员信息 -->
				<view class="single_people layer_between">
					<!-- 左侧 -->
					<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="single_course">
					<!-- 课程名称 -->
					<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">
							<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 class="comment_msg">
					<!-- 点赞人员 -->
					<view class="point_people layer_nostar">
						<image src="../../static/dianzan_icon@2x.png" mode="widthFix"></image>
						<view class="point_detail flex_wrap_no">
							<view class="" v-for="(item, index) in pointList" :key="index">{{ item }},</view>
						</view>
					</view>
					<!-- 评论信息 -->
					<view class="msg_detail">
						<view class="detail_single ">
							<text>风格林:</text>
							有意义的人，并不就是年岁活得最大的人，而是对生活最有感受的人。
						</view>
					</view>
				</view>
			</view>
		</view>
			
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isShowImg: false,
				img: '',
				themeImg: require('../../static/banner_img@2x.png'),
				completeList: ['1', '2', '3'],
				complete: '',
				// 点赞
				isPoint: false,
				pointImg1: require("../../static/zan_icon@2x.png"),
				pointImg2: require("../../static/img_03.png"),
				// 点赞人员
				pointList: ['关心', '思想是根基', '陈cc', '莫妮卡', '莫妮卡', '大鹏', '思想是根基', '陈cc', '思想是根基', '陈cc', '莫妮卡']
			};
		},
		methods: {
			// 去打卡记录页
			toRecord() {
				uni.navigateTo({
					url: "/pages/course/recordClock"
				})
			},
			// 去提交打卡页
			toSubmit() {
				uni.navigateTo({
					url: "/pages/course/submitClock"
				})
			},
			// 完成事件打分
			changeComplete(e) {
				this.complete = e.detail.value;
			},
			// 放大图片
			enlargeImg() {
				this.isShowImg = true;
				this.img = this.themeImg;
			},
			// 关闭弹窗
			closeTheme() {
				this.isShowImg = false;
			},
			// 点赞
			changePoint() {
				this.isPoint = !this.isPoint
			},
		},
		onShow() {},
		onLoad() {}
	};
</script>

<style lang="scss">
	// 课程评论
	.theme_comment {
		padding: 32upx;
	
		// 单个
		.comment_single {
			background: rgba(255, 255, 255, 1);
			box-shadow: 0px 0px 6upx rgba(0, 0, 0, 0.04);
			border-radius: 8upx;
			padding: 56upx 32upx;
			margin-bottom: 32upx;
	
			// 人员信息
			.single_people {
				border-bottom: 1px solid #707070;
				padding-bottom: 42upx;
	
				// 左侧
				.people_l {
	
					// 头像
					image {
						width: 92upx;
						height: 92upx;
						margin-right: 32upx;
					}
	
					// 姓名
					.people_name {
						color: #06121e;
						font-size: 32upx;
						margin-bottom: 12upx;
					}
	
					// 课程进度
					.people_progress {
						color: #8c9198;
						font-size: 24upx;
					}
				}
	
				// 右侧
				.people_r {
					width: 112upx;
					height: 56upx;
					border: 1px solid rgba(238, 139, 39, 1);
					border-radius: 8upx;
					color: #ee8b27;
					font-size: 24upx;
					text-align: center;
					line-height: 56upx;
				}
			}
	
			// 课程信息
			.single_course {
				padding: 42upx 0;
				font-size: 28upx;
				color: #06121e;
	
				.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;
					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;
				}
			}
	
			// 评论信息
			.comment_msg {
				border-top: 1px solid #eee;
				padding-top: 30upx;
	
				// 点赞人员
				.point_people {
					margin-bottom: 28upx;
	
					image {
						width: 32upx;
						margin-right: 22upx;
					}
	
					.point_detail {
						color: #bdc4ce;
						font-size: 28upx;
						width: 556upx;
					}
				}
	
				// 评论信息
				.msg_detail {
					color: #5b5e63;
					font-size: 28upx;
	
					.detail_single {
						margin-bottom: 16upx;
	
						text {
							color: #ee8b27;
							font-weight: 600;
							margin-right: 10upx;
						}
					}
				}
			}
		}
	}
		
</style>