<template>
	<view class="content">
		<view class="topbox">
			<view class="top">
				<image src="../../static/topimg.png" mode=""></image>
				<view class="topboxitem">
					<view class="topboxitemtop ">
						<view class="topboxitemtopleft flexone">
							<view class="touimg">
								<image v-if="token" :src="avatarUrl" mode="widthFix"></image>
								<image v-else src="../../static/changehead.png" mode="widthFix"></image>
							</view>
							<view class="top_right">
								<view class="username" @click="toLogin()">{{ token ? userName : '用户登录' }}</view>
								<view class="bing_phone layout_row" >
									<view class="bind_content">
										<view class="">立即绑定手机号</view>
										<button class="bind_btn" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber()"></button>
									</view>

									<image src="../../static/yourow.png" mode="widthFix"></image>
								</view>
							</view>
						</view>
						<view v-show="token" class="editimg" @click="edit"><image src="../../static/edit.png" mode=""></image></view>
					</view>
				</view>

				<view class="boxbottom flextwo">
					<view class="boxbottomleft">
						<view class="rankname">{{industryName?industryName:"暂无行业"}}</view>
						<view class="rankkname">行业</view>
					</view>
					<view class="boxbottomleft">
						<view class="rankname">{{occupationName?occupationName:"暂无职业"}}</view>
						<view class="rankkname">职业</view>
					</view>
				</view>
			</view>
		</view>

		<view class="myrecord flexone">
			<view class="recordleft"><image src="../../static/theme.png" mode=""></image></view>
			<view class="recordright">我的记录</view>
		</view>
		<!-- 评论 -->
		<!-- 暂未登录 -->
		<view class="theme_comment nocomment" v-if="!token">
			<view class="norecordimg"><image src="../../static/norecord.png" mode=""></image></view>
			<view class="notext">
				<view class="notexttop">您当前未登录账户，无法获取更多内容</view>

				<view class="notexttop notextbot">请登录后方可进行操作</view>
			</view>
		</view>
		<!-- 已登录 -->
		<view class="commentlist" v-else>
			<view class="theme_comment">
				<view class="comment_single">
					<!-- 课程信息 -->
					<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="quxian" @click="circle">查看打卡分数记录曲线图</view>

						<!-- 评论、点赞按钮 -->
						<view class="layer_noend">
							<view class="set flexone">
								<view class="deltet flexone deleteset">
									<view class="deleteimg"><image src="../../static/delete.png" mode=""></image></view>
									<view class="deletename">删除</view>
								</view>

								<view>
									<view class="deltet flexone clockyin" v-if="yinsi == 1">
										<view class="deleteimg"><image src="../../static/colco.png" mode=""></image></view>
										<view class="deletename">设为隐私</view>
									</view>

									<view class="deltet flexone clockyin" v-else>
										<view class="deleteimg"><image src="../../static/jucolock.png" mode=""></image></view>
										<view class="deletename yisi">已设为隐私</view>
									</view>
								</view>
							</view>

							<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="../../static/dianzan_icon@2x.png" mode="widthFix"></image>
								点赞
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			yinsi: 1,
			token: '',
			// 昵称
			userName: '',
			avatarUrl: '',
			// 防连点
			isClick:false,
			// 行业
			industryName:"",
			// 职业
			occupationName:"",
		};
	},
	methods: {
		// 用户登录
		toLogin() {
			uni.navigateTo({
				url: '/pages/start/start'
			});
		},
		// 绑定手机号
		getPhoneNumber(e){
			if(!this.isClick){
				let t = this;
				t.isClick = true
				console.log(e)
			}
			
		},
		sure() {
			uni.navigateTo({
				url: '../registerone/registerone'
			});
		},
		// 修改个人信息
		edit() {
				uni.navigateTo({
					url: '/pages/mine/changeinfo'
				});
			
		},
		circle() {
			uni.navigateTo({
				url: '/pages/mine/circlepic'
			});
		}
	},

	onLaunch: function() {},
	onShow: function() {
		this.industryName = uni.getStorageSync("industyname");
		this.occupationName = uni.getStorageSync("occupationname");
	},
	onLoad() {
		this.token = uni.getStorageSync('token');
		this.userName = uni.getStorageSync('nickName');
		this.avatarUrl = uni.getStorageSync('avatarUrl');
	},
	onHide: function() {}
};
</script>

<style lang="scss">
page {
	background: #fcfbfc;
}

.content {
	padding: 0 32upx;
	box-sizing: border-box;

	.myrecord {
		margin-top: 46rpx;
		padding-bottom: 26rpx;
		box-sizing: border-box;
		border-bottom: 1rpx solid #f5f5f5;
	}

	.recordleft {
		width: 28upx;
		height: 30upx;
		font-size: 0;
	}

	.recordright {
		color: #595959;
		font-size: 36upx;
		font-weight: bold;
		margin-left: 20upx;
	}

	// 查看曲线
	.quxian {
		width: 265rpx;
		color: #ee8b27;
		font-size: 24upx;
		border-bottom: 1upx solid #ee8b27;
		margin-top: 10upx;
		margin-left: 50upx;
	}

	.deleteimg {
		width: 32rpx;
		height: 32rpx;
		font-size: 0;
		margin-right: 4rpx;
	}

	.deletename {
		color: #8c9198;
		font-size: 24rpx;
		margin-left: 6rpx;
	}
	.yisi {
		color: #ee8b27;
	}

	.deleteset {
		margin-right: 38rpx;
	}

	.clockyin {
		margin-right: 5rpx;
	}
}

// 头部
.topbox {
	.boxbottomleft {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.rankname {
		color: #fff;
		font-size: 32upx;
		width: 128upx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.rankkname {
		color: #ffcc98;
		font-size: 22upx;
		margin-top: 4upx;
	}

	.boxbottom {
		width: 100%;
		padding: 16upx 136upx;
		box-sizing: border-box;
		position: absolute;
		bottom: 0;
		left: 0;
	}

	.editimg {
		width: 36upx;
		height: 36upx;
		font-size: 0;
	}

	.top_right {
		margin-left: 46upx;
		color: #fff;
	}
	.username {
		font-size: 32upx;
		text-decoration: underline;
		margin-bottom: 8upx;
	}
	// 绑定手机号
	.bing_phone {
		font-size: 24upx;
		image {
			width: 24upx;
		}
		.bind_content {
			position: relative;
		}
		// 绑定按钮
		.bind_btn {
			width: 100%;
			height: 34upx;
			position:absolute;
			top: 0;
			left: 0;
			opacity: 0;
		}
	}

	.top {
		width: 686upx;
		height: 322upx;
		margin: 32upx auto 0;
		position: relative;
	}

	.topboxitem {
		width: 100%;
		position: absolute;
		top: 0;
		left: 0;
	}

	.topboxitemtop {
		display: flex;
		justify-content: space-between;
		padding: 26upx 36upx 44upx 50upx;
		box-sizing: border-box;
	}

	.touimg {
		width: 120upx;
		height: 120upx;
		font-size: 0;
		border-radius: 50%;
	}

	.touimg image {
		width: 120upx;
		border-radius: 50%;
	}
}

.nocomment {
	height: 682upx;
}

// 课程评论
.theme_comment {
	padding: 32upx;
	box-sizing: border-box;
	width: 686upx;
	margin: 0upx auto 26upx;
	background: rgba(255, 255, 255, 1);
	box-shadow: 0upx 0upx 6upx rgba(0, 0, 0, 0.04);
	opacity: 1;
	border-radius: 8upx;

	.norecordimg {
		width: 225upx;
		height: 213upx;
		font-size: 0;
		margin: 194upx auto 0;
	}

	.notexttop {
		color: #8c9198;
		font-size: 28rpx;
		text-align: center;
	}

	// 单个
	.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 22upx;
				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>