<template>
	<view class="bigShotsDetails">
		<view class="bigShotsDetails-1">
			<qxcplayer class="qxcplayer-style"  ref="qxcplayerRef"></qxcplayer>
			<view class="bigShotsDetails-1-c">视频专辑：{{ info.name }}</view>
		</view>
		<view class="bigShotsDetails-2">
			<view class="bigShotsDetails-2-1">
				共<text style="color: #2D81FF;">{{ info.comment_count }}</text>条评价
			</view>
			<view class="bigShotsDetails-2-2">
				<view class="bigShotsDetails-2-2-i" v-for="(item, index) in commitList" :key="item.id">
					<image class="bigShotsDetails-2-2-i-l" v-if="item.answer" :src="item.answer" mode="widthFix"></image>
					<image class="bigShotsDetails-2-2-i-l" v-else src="@/static/images/tx.png" mode="widthFix"></image>
					<view class="bigShotsDetails-2-2-i-r">
						<view class="bigShotsDetails-2-2-i-r-1">
							<view class="bigShotsDetails-2-2-i-r-1-l">{{ item.user_name }}</view>
							<view class="bigShotsDetails-2-2-i-r-1-r">{{ item.created_at }}</view>
						</view>
						<view class="bigShotsDetails-2-2-i-r-2">
							{{ item.comment }}
						</view>
					</view>
				</view>
				<u-empty
					v-if="notData"
					mode="data"
					text="暂无数据"
					icon="/static/imagesV2/icon24.png"
				>
				</u-empty>
			</view>
		</view>
		<view class="bigShotsDetails-3-c">
			<view class="bigShotsDetails-3">
				<view class="bigShotsDetails-3-l">
					<view class="bigShotsDetails-3-l-1">
						<input class="bigShotsDetails-3-l-1-in" v-model="commentText" type="text" placeholder="请输入"/>
					</view>
					<view class="bigShotsDetails-3-l-2" @click="release">
						发布
					</view>
				</view>
				<view class="bigShotsDetails-3-r">
					<view class="bigShotsDetails-3-r-i">
						<image class="bigShotsDetails-3-r-i-i" src="@/static/imagesV2/icon47.png" mode="widthFix"></image>
						<text>{{ info.comment_count }}</text>
					</view>
					<view class="bigShotsDetails-3-r-i" @click="like">
						<image class="bigShotsDetails-3-r-i-i" v-if="info.is_up" src="@/static/imagesV2/icon69.png" mode="widthFix"></image>
						<image class="bigShotsDetails-3-r-i-i" v-else src="@/static/imagesV2/icon48.png" mode="widthFix"></image>
						<text>{{ info.up_count }}</text>
					</view>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	import qxcplayer from "@/components/qxcplayer/qxcplayer.vue"
	export default {
		components: {
			qxcplayer
		},
		onUnload() {
			// 销毁
			this.$refs.qxcplayerRef.destory()
		},
		computed: {
			notData() {
				return this.status === 'nomore' && !this.commitList.length
			}
		},
		data() {
			return {
				id: null,
				page: 1,
				info: {},
				commitList: [],
				// 加载前值为loadmore，加载中为loading，没有数据为nomore
				status: 'loadmore',
				commentText: ''
			};
		},
		onLoad({ id }) {
			this.id = id
			this.getData()
			this.onRetry()
		},
		onReachBottom() {
			debugger
		},
		mounted() {
			
		},
		methods: {
			like() {
				this.$service.P_post('/course/up', {
					id: this.id
				}).then(res => {
					if(this.info.is_up){
						this.$set(this.info, 'up_count', this.info.up_count - 1)
					} else {
						this.$set(this.info, 'up_count', this.info.up_count + 1)
					}
					this.$set(this.info, 'is_up', !this.info.is_up)
				})
			},
			release() {
				this.$service.P_post('/course/comment_add', {
					id: this.id,
					comment: this.commentText
				}).then(res => {
					uni.showToast({
						icon: 'none',
						title: '评论成功，审核后可查看'
					})
				})
			},
			onRetry(){
				this.page=1
				this.commitList = []
				this.status = 'loadmore'
				this.getComment()
			},
			getComment() {
				if(this.status === 'loading' || this.status === 'nomore') return;
				this.status = 'loading';
				uni.showLoading({
					title: '加载中',
					mask: true
				})
				this.$service.P_get('/course/comment', { 
					page: this.page,
					id: this.id,
					
				}).then((res) => {
					if (res.code == 1) {
						this.page++;
						this.commitList = [
							...this.commitList,
							...res.data.data
						]
						this.status = res.data.data.length < res.data.per_page ? 'nomore' : 'loadmore'
					} else {
						this.status = 'loadmore';
						if (res.msg) {
							uni.showToast({
								icon: 'none',
								title: res.msg
							})
						} else {
							uni.showToast({
								icon: 'none',
								title: '获取数据失败'
							})
						}
					}
					console.log(res)
				})
			},
			getData() {
				this.$service.P_get('/course/info', { id: this.id }).then(res => {
					console.log(res.data.data)
					this.info = res.data.data
					this.$nextTick(() => {
						this.$refs.qxcplayerRef.initData({
							token: this.info.qxy_token,
							env: 'test',
							name: 'qxcname',
						})
					})
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.bigShotsDetails{
	.bigShotsDetails-1{
		background-color: #fff;
		position: sticky;
		top: 0;
		.bigShotsDetails-1-c{
			padding: 30rpx;
			font-size: 30rpx;
			color: #000000;
			font-weight: bold;
		}
	}
	.bigShotsDetails-2{
		padding: 0 30rpx;
		margin-top: 19rpx;
		background-color: #FFFFFF;
		.bigShotsDetails-2-1{
			font-size: 30rpx;
			color: #000000;
			font-weight: bold;
			padding: 30rpx 0;
		}
		.bigShotsDetails-2-2{
			padding-bottom: calc(env(safe-area-inset-bottom) + 120rpx);
			.bigShotsDetails-2-2-i{
				display: flex;
				padding-bottom: 30rpx;
				border-bottom: 1rpx solid #F3F3F7;
				margin-bottom: 30rpx;
				&:last-child{
					border-bottom: none;
				}
				.bigShotsDetails-2-2-i-l{
					height: 48rpx;
					width: 48rpx;
					border-radius: 100%;
					flex-shrink: 0;
				}
				.bigShotsDetails-2-2-i-r{
					margin-left: 20rpx;
					flex-grow: 1;
					.bigShotsDetails-2-2-i-r-1{
						line-height: 48rpx;
						display: flex;
						justify-content: space-between;
						.bigShotsDetails-2-2-i-r-1-l{
							font-size: 26rpx;
							color: #323232;
						}
						.bigShotsDetails-2-2-i-r-1-r{
							font-size: 24rpx;
							color: #979797;
						}
					}
					.bigShotsDetails-2-2-i-r-2{
						font-size: 26rpx;
						color: #323232;
						line-height: 39rpx;
						margin-top: 20rpx;
					}
				}
			}
		}
	}
	.bigShotsDetails-3-c{
		padding-bottom: env(safe-area-inset-bottom);
		background-color: #fff;
		position: fixed;
		bottom: 0;
		box-shadow: 0px 0px 24px 0px rgba(0,0,0,0.1);
		width: 100%;
		.bigShotsDetails-3{
			height: 120rpx;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			padding: 0 30rpx;
			.bigShotsDetails-3-l{
				display: flex;
				align-items: center;
				.bigShotsDetails-3-l-1{
					height: 68rpx;
					background-color: #F6F6F6;
					border-radius: 200rpx;
					flex-grow: 1;
					display: flex;
					align-items: center;
					padding: 0 33rpx;
					.bigShotsDetails-3-l-1-in{
						font-size: 28rpx;
					}
				}
				.bigShotsDetails-3-l-2{
					height: 56rpx;
					background-color: #2D81FF;
					border-radius: 200rpx;
					font-size: 28rpx;
					color: #fff;
					line-height: 56rpx;
					padding: 0 23rpx;
					flex-shrink: 0;
					margin-left: 20rpx;
				}
			}
			.bigShotsDetails-3-r{
				margin-left: 30rpx;
				display: flex;
				.bigShotsDetails-3-r-i{
					display: flex;
					align-items: center;
					font-size: 26rpx;
					color: #979797;
					line-height: 1.4;
					position: relative;
					&:first-child{
						padding-right: 20rpx;
						margin-right: 18rpx;
						&:before{
							position: absolute;
							right: 0;
							top: 50%;
							transform: translateY(-50%);
							content: '';
							height: 18rpx;
							border-right: #E6E6E6 solid 1rpx;
						}
					}
					.bigShotsDetails-3-r-i-i{
						height: 40rpx;
						width: 40rpx;
						margin-right: 12rpx;
					}
				}
			}
		}
	}
	
}
</style>