<template>
	<view class="container">
		<z-nav-bar title="我的打卡签到记录"></z-nav-bar>
		<!-- <view class="calendar_container">
			<zsy-calendar :mode="mode" @change="change" />
		</view> -->
		<view class="books">
			<view class="" style="background-color: #fff; padding: 10rpx;">
				<text style="font-size: 24rpx; color: #888;" v-if="bookList.length > 0">我的打卡书籍</text>	
				<text style="font-size: 24rpx; color: #888;" v-else>暂无可打卡书籍</text>	
			</view>
			<scroll-view class="scroll-view_H" scroll-x="true" @scroll="scroll" :scroll-left="scrollLeft">
				<view class="listenList flexbox" v-if="bookList.length > 0">
					<view :class="['item', selectIndex == index ? 'active' : '']" v-for="(item,index) in bookList" :key="index">
						<view class="videoBox" @click="selectOne(item.book,index)">
							<image v-if="item.book.images != ''" :src="item.book.images" mode="scaleToFill"></image>
							<image v-else src="../../static/icon/wufeng.jpg" mode="scaleToFill"></image>
						</view>
						<text class="bookName">{{item.book.name}}</text>
					</view>
				</view>
			</scroll-view>
		</view>
		<view class="container1">
			<view class="subContent" v-if="status==0">
				<!-- 已打卡 -->
				<view class="had" v-if="recordList.length> 0">
					<view class="item">						
						<view class="bookinfo">
							<view class="case" v-for="(item, index) in recordList" :key="index">
								<view class="book flexbox" >
									<!-- <image src="../../static/icon/home_icon_0.png" mode="aspectFill"></image> -->
									<view class="clockInfo" >
										<!-- <span>中医免疫学</span> -->
										<h3><span class="day">第 <em>{{item.dayId}}</em> 天</span><br/>#{{item.TaskHeading}}#</h3>
									</view>
								</view>

								<view :class="['content',item.zhankai ? 'active' : '']" >
									<view class="texttt" v-html="item.phtml" ></view>
									<view class="images flexbox" v-if="item.clockinimages.length>0">										
										<view class="box" v-for="(item1,index1) in item.clockinimages">
											<image  @click="previewImage(item1)"
												:src="item1"
												mode="aspectFill"></image>
										</view>
									</view>
									<view class="opBtns flexbox">
										<span class="flexbox"><u-icon name="clock" color="#b3b3b3"></u-icon>{{item.createTime}}</span>
									</view>
									<span class="viewMore" v-if="!item.zhankai" @click="changeHeight(item, index)">
										<u-icon style="display: inline-block;" name="arrow-down"
											color="#55aa00"></u-icon>
											展开</span>
									<span class="viewMore" v-else @click="changeHeight(item, index)">
											<u-icon style="display: inline-block;" name="arrow-down"
													color="#55aa00"></u-icon>
											收起</span>
								</view>

							</view>
						</view>
					</view>
				</view>
				<view v-else>
					<u-divider text="暂无打卡记录哦~"></u-divider>
				</view>
			</view>
			<view v-if="status==1">
				<u-divider text="全部加载完成"></u-divider>
			</view>			
			<view style="padding-bottom: 20rpx;">
				<u-back-top :scroll-top="scrollTop"></u-back-top>
			</view>
		</view>
		<music-play :playData="playData"></music-play>
		<z-navigation></z-navigation>
	</view>
</template>

<script>
	import emojiList1 from '../../bkhumor-emojiplus/emoji/biaoqin.js'
	import zsyCalendar from '@/components/zsy-calendar/zsy-calendar'
	import musicPlay from '@/components/music.vue'
	import {
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				playData: {},
				mode: 'open',
				status: 0,
				scrollLeft: 0,
				recordList: [],
				bookList: [],
				scrollTop: 0,
				bookinfo:{},
				selectIndex:0
			}
		},
		// 返回顶部
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		// 下拉刷新
		onReachBottom() {
			this.status = 0
		},
		onLoad() {			
			this.getfreeBook()
		},
		methods: {
			selectOne(val,index){
				// 点击某一个图书
				uni.showLoading()
				this.bookinfo = val
				this.selectIndex = index
				this.getmyWord()
			},
			scroll(e) {

			},
			// 获取打卡图书列表
			getfreeBook() {
				this.$http
					.post('book/userebookbuy/appbooklist', {
						'userId': this.userInfo.id,
						'page': this.page,
						'limit': 100
					})
					.then(res => {
						if (res.code == 0) {
							// this.ygtotalPage = res.resultlist.totalCount
							if(res.resultlist.length > 0) {
								this.bookList = res.resultlist
								this.bookinfo = this.bookList[0].book								
							    console.log(res, '已购买')
								this.getmyWord()
							// this.status = 3
							}else{
								this.bookList = []
							}
							
						}

					});
			},
			change(e) {
				console.log(e)
			},
			// 放大图片
			previewImage(url){				
				console.log(url, 'url')
				uni.previewImage({
					urls: [url]
				});
			},
			// 处理展开或者合并
			changeHeight(val, index){				
				this.recordList[index].zhankai = !this.recordList[index].zhankai				
			},
			// 处理格式
			getHtmlComment(comment) {
				// 格式化html
				// 这里处理 链接   换行符				
				let replacedStr = comment.replace(/\[([^(\]|\[)]*)\]/g, (item, index) => {
					// console.log(item, index)
					var indexss = emojiList1.findIndex(item1 => item1.alt === item)
					// console.log(indexss, 'indexss')
					return '<img src="https://www.nuttyreading.com/emojis/emojis/qq/' + emojiList1[indexss].url +
						'" width="18rpx">';
				});
				// console.log(replacedStr,'replacedStr')
				return replacedStr.replace(/(\r\n)|(\n)/g, '<br>');
			},
			getmyWord() {
				console.log(this.userInfo.id,this.bookinfo.id,'++++++++')
				this.$http
					.post('book/clockin/myinfo?userid=' + this.userInfo.id + '&bookid='+ this.bookinfo.id)
					.then(res => {
						console.log(res, '我的打卡内容')
						if (res.code == 0 && res.ClockinList.length > 0) {
							// this.recordList = res.ClockinList
							var arr = []
							res.ClockinList.forEach((item1)=>{
								   var pjstr = ''
								   var imgs = []
								   imgs = item1.clockinimages.split(',')
									pjstr = this.getHtmlComment(item1.content)
									item1.clockinimages = imgs
									//console.log(pjstr,'99999999999----------')
									 item1.zhankai = false
									 item1.phtml = pjstr									
									 arr.push(item1)
							})
							this.recordList = arr
						} else {
							this.recordList = []
						}
						uni.hideLoading()
					})
					.catch(e => {
						console.log(e.msg)
						uni.hideLoading()
					})
			},
		},
		components: {
			musicPlay,
			zsyCalendar
		},
		computed: {
			...mapState(['userInfo'])
		}
	}
</script>

<style lang="scss" scoped>
	.scroll-view_H{background-color: #fff;  padding:10rpx }
	.listenList { background-color: #fff; padding: 5rpx 0; 
		.item { padding: 10rpx; overflow: hidden;
			width: 150rpx !important; margin-right: 20rpx; border: 1px solid #fff;  border-radius: 10rpx;
			.videoBox{
				image{display: block; width:130rpx; 
				height: 170rpx; 
				}
			}
			.bookName{display: block; margin-top: 20rpx;   color: #666; font-size: 24rpx; white-space: nowrap;					
		overflow-x: hidden; overflow: hidden;
		text-overflow: ellipsis;}
		}
		.item.active{margin-right: 20rpx; border: 1px solid #55aa00;  border-radius: 10rpx;}
	}

	.task {
		margin-top: 40rpx 20rpx;

		.taskinfo {
			video {
				width: 100%;
			}
		}
	}

	.subContent {
		overflow: hidden;

		.clockTitle {
			color: #55aa7f;
			font-size: 38rpx;
			text-align: center;
			display: block;
			margin-top: 30rpx;
		}
	}

	.container1 {
		.margin-top {
			margin-top: 30rpx;
			overflow: hidden;
		}
	}

	.container {
		padding: 30rpx;
	}

	.calendar_container {
		//min-height: calc(60vh);
		background-color: #f5f5f5;
		//padding: 30rpx;
		box-sizing: border-box;
	}

	.had {
		margin-top: 30rpx;

		h3 {
			color: #8c9a92;
			font-size: 34rpx;
		}

		.content { 
			width: 100% !important; overflow: hidden;
			line-height: 60rpx;
			margin-top: 10rpx;
			font-size: 30rpx;
			color: #0e0e15;
			.texttt{margin-top: 10rpx; text-align: left !important;  word-wrap:break-word !important; word-break:break-all; width: 100%;
			font-size: 30rpx;
			color: #888;}
		}

		.images {
			height: 150rpx;
			overflow: hidden;
			margin-top: 30rpx;
			.box{
				width: 150rpx;height: 150rpx; margin: 0 10rpx;
			}
			image {
				width: 150rpx;
				
			}
		}

		.opBtns {
			margin-top: 30rpx;

			span {
				color: #b3b3b3;
				padding-left: 20rpx;
				font-size: 24rpx;
			}
		}

		.item {
			padding-left: 20rpx;
			margin-bottom: 40rpx;
			background-color: #fff;
			justify-content: space-between;

			.dateName {

				color: #444;
				text-align: center;
				align-items: center;
				width: 80rpx;
				padding-right: 20rpx;
				border-right: 1px solid #eee;

				span {
					display: inline-block;
					height: 120rpx;
					padding: 20rpx 0;
					border-radius: 50rpx;
					width: 100%;
					background-color: #d9e8f7;
					text-align: center;

					em {
						font-weight: bold;
						font-style: normal;
					}
				}
			}


			.bookinfo {
				text-align: center;
				// width: 100%;				
				// padding: 20rpx;
				margin-left: 20rpx;

				.case {
					margin-top: 30rpx;
					background-color: #fff; padding-bottom: 30rpx !important;
					padding:10rpx;
					border-bottom: 1px solid #efefef; margin-bottom: 20rpx ;
				}

				.content {
					position: relative;
					padding-bottom: 60rpx;
					height: 60px;
					overflow: hidden;

				}
				.content.active{height: auto !important;}
				.book {
					image {
						width: 200rpx;
						height: 150rpx;
						margin: 0 auto;
					}

					.clockInfo { margin-bottom: 10rpx;
						text-align: left;		
						.day{ color: #55aa7f; margin-bottom: 20rpx ; font-size: 36rpx !important; display: inline; padding: 20rpx; border-radius: 10rpx;}
						em{font-style: normal; font-size: 60rpx !important; padding: 0 10rpx;}
					}

					span {
						color: #444;
						display: block;
						font-weight: bold;
						margin-bottom: 20rpx;
					}
				}
			}
		}
	}

	.viewMore {
		position: absolute;
		bottom: 5rpx;
		right: 0;
		color: #55aa00;
		z-index: 1;
		text-align: right;
		width: 200rpx;
		background-image: url('@/static/icon/zuotouming.png');
		background-position: right;
		background-size: cover;
		background-repeat: no-repeat;
	}

	.flexbox {

		display: flex;
	}
</style>