<template>
	<view class="col" style="width: 750rpx;">
		<scroll-view class="video-comment-scroll " scroll-y="true" :style="topheight" @scrolltolower="getData">
			<view class="list col">
				<view class="comment-item row ree" v-for="(item,index) of list" :key="index">
					<view class="user-avatar col_c">
						<image :src="item.user_portrait || '@/static/avatar/noavatar.png'"  mode="aspectFill" class="user-avatar-img"></image>
					</view>
					<view class="item-content col">
						<view class="comm-top row_b">
							<view class="row_s">
								<text class="user-name">{{item.user_nick_name || item.user_name}}</text>
								<view class="item-top-icon row_c" v-if="item.is_top">
									<text class="zd-txt">置顶</text>
								</view>
							</view>
							<view class="row_e" @click="digComment(index)">
								<uni-icons :type="item.is_up === 1 ? 'heart-filled' : 'heart'"
									:color="item.is_up === 1 ? '#fa3534' : '#b9bbbd'" size="16"></uni-icons>
								<text
									class="like-text">{{item.is_top === 1 ? '999+' : (item.is_up === 1 ? item.comment_up+1 : item.comment_up)}}</text>
							</view>
						</view>
						<view class="comm-bot row">
							<text class="comment-content">{{item.comment_content}}</text>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>

		<view class="comment-input row_b fid-b-l" v-if="videoTabsIndex==1">
			<input class='comment-input-textarea' type="text" v-model="comment" placeholder="请输入评论">
			<uni-icons type="paperplane-filled" :color="isLogin ? '#c8c9cc' : '#09a96a'" size="24"
				class="comment-input-send" @click="postData"></uni-icons>				
		</view>
	</view>
</template>

<script>
import { app, comment } from '@/utils/api'

	export default {
		components: {

		},
		props: {
			topheight: {
				type: String,
				default: '500px'
			},
			id: {
				type: Number,
				default: 0
			},
			videoTabsIndex: {
				type: Number,
				default: 0
			}
		},
		data() {
			return {
				list: [],
				comment: '',
				isLogin: false,
				page: 1,
				loaded: false,
				loadStatus: 'loadmore',
				scrollTop: 0
			}
		},
		mounted() {

		},
		methods: {
			init() {
				this.getData();
			},
			digComment(index) {
				console.log(index)
			},
			getData() {
			  if (this.loadStatus === 'nomore' || this.loadStatus === 'loading') {
			    return
			  }
			  this.loadStatus = 'loading'
			  comment.list(this.id, 1, this.page).then(res => {
			    const resData = res.data
			    if (this.page === 1) {
			      const token = getApp().globalData.userToken
			      this.isLogin = resData.is_login == 1 && !token ? true : false
			    }
			    if (resData.page < resData.page_total) {
			      this.loadStatus = 'loadmore'
			      this.page++
			    } else {
			      this.loadStatus = 'nomore'
			    }
				this.list.push(...resData.list);
			    // this.list = this.list.concat(resData.list)
			    this.loaded = true
			  }).catch(e => {
			    this.loadStatus = 'loadmore'
			  })
			},
			postData() {
			  const token = getApp().globalData.userToken
			  if (!this.isLogin || token) {
			    if (!this.comment) {
			      uni.showToast({
			          icon: 'none',
			          title: '评论内容不能为空~',
			          duration: 3000
			      })
			      return
			    }
			    uni.showLoading({
			      title: '正在发送',
			      mask: true
			    })
			    comment.add(this.id, 1, this.comment).then(res => {
			      if (res.code === 1) {
			        this.comment = ''
			        if (res.data) {
			          if (res.data['comment_status'] == 1) {
			            this.list.splice(1, 0, res.data)
			            if (this.loadStatus === 'loadmore') {
			              this.list.pop()
			            }
			            this.scrollTop = 0
			          }
			          if (res.data['task_coin']) {
			            this.$emit('reward', res.data['task_coin'])
			          }
			        }
			      }
			      uni.showToast({
			          icon: 'none',
			          title: res.msg,
			          duration: 3000
			      })
			    })
			  } else {
			    uni.navigateTo({
			      url: '/pages/user/login'
			    })
			  }
			},
			digComment(index) {
			  if (this.list[index].is_top) return
			  app.updateDig(this.list[index].comment_id, 4, 'up').then(res => {
			    if (res.code == 1) {
			      if (this.list[index].is_up === 1) {
			        this.$set(this.list[index], 'is_up', 0)
			      } else {
			        this.$set(this.list[index], 'is_up', 1)
			      }
			    } else {
			      uni.showToast({
			          icon: 'none',
			          title: res.msg,
			          duration: 3000
			      })
			    }
			  })
			},
			// onScroll({target:{scrollTop}}) {
			//   this.scrollTop = scrollTop
			// }
		}
	}
</script>

<style>
	@import "uni.scss";
	.list {
		width: 750rpx;
		padding: 0 30rpx;
	}

	.comment-item {
		width: 690rpx;
		margin-bottom: 20rpx;
	}

	.user-avatar {
		/* margin-top: 10rpx; */
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		overflow: hidden;
		margin-right: 20rpx;
	}
	.user-avatar-img{
		width: 80rpx;
		height: 80rpx;
		border-radius: 40rpx;
	}

	.item-content {
		width: 590rpx;

	}

	.comm-top {
		width: 590rpx;
		height: 40rpx;
	}

	.user-name {
		font-size: 30rpx;
		color: #000;
		font-weight: bold;
	}

	.item-top-icon {
		width: 60rpx;
		height: 30rpx;
		border-radius: 8rpx;
		background: red;
		margin-left: 18rpx;
	}

	.zd-txt {
		font-size: 20rpx;
		color: #fff;
	}

	.like-text {
		font-size: 13px;
		color: #b9bbbd;
	}

	.comm-bot {
		width: 590rpx;
		margin-top: 10rpx;
	}

	.comment-content {
		width: 590rpx;
		color: #333;
		font-size: 28rpx;
		line-height: 34rpx;
	}

	.comment-input {
		border-top: #f1f1f1 1px solid;
		width: 750rpx;
		height: 110rpx;
		padding: 0 30rpx;
		background-color: #fff;

	}

	.send-ipt {
		padding-left: 30rpx;
		width: 600rpx;
		height: 60rpx;
		border-radius: 30rpx;
		background-color: #f1f1f1;
		font-size: 30rpx;
	}

	.sen-btn {}

	.comment-input-textarea {
		padding-left: 30rpx;
		width: 600rpx;
		height: 60rpx;
		border-radius: 30rpx;
		background-color: #f1f1f1;
		font-size: 30rpx;

	}

	.comment-input-send {
		margin: 0 10px;
	}


	.video-intro {
		padding: 0 30rpx;
		width: 750rpx;

	}

	.video-intro-item {
		margin-top: 10px;
		display: flex;

	}

	.item-title {
		width: 110rpx;
		font-size: 14px;
		font-weight: 700;
		color: #1a1a2a;
		line-height: 25px;
	}

	.item-value {
		max-width: 580rpx;
		flex-wrap: wrap;
		white-space: pre-wrap
	}

	.intro-value {
		font-size: 14px;
		color: #888;
		line-height: 25px;
		margin-right: 6px;
	}
</style>
