<template>
	<view class="video-comment">
		<view class="video-comment-scroll">
			<!-- <scroll-view style="height:100%;" scroll-y :scroll-top="scrollTop" @scroll="onScroll" @scrolltolower="getData"> -->
			<view class="comment-list">
				<view v-for="(item, index) in list" :key="index" style="border-bottom: 1px solid #f2f5fa">
					<Comment-bubble :item="item" @digComment="digComment" @reply="reply" :replyType="0" @more="more" :index="index"></Comment-bubble>
					<view class="item-content">
						<view v-for="(comment, i) in item.ImaginaryArray" :key="i" v-if="item.ImaginaryArray">
							<Comment-bubble :item="comment" @digComment="digComment" @reply="reply" @more="more" :replyType="1" :index="index"></Comment-bubble>
						</view>
						<view v-for="(comment, i) in replyCommentList" :key="i" v-if="item.expanded == 'open' || (item.expanded == 'showMore' && replyCommentList.length)">
							<Comment-bubble :item="comment" @digComment="digComment" @reply="reply" @more="more" :replyType="1" :index="index"></Comment-bubble>
						</view>
						<view v-if="item.comment_reply">
							<view class="item-expand" @click="more(item, index)" v-if="item.expanded == 'close'">
								展开{{ item.comment_reply }}条评论
								<uni-icons type="bottom" color="#ff5b5b"></uni-icons>
							</view>
							<view class="item-expand" @click="more(item, index)" v-else-if="item.expanded == 'showMore'">
								展开更多
								<uni-icons type="bottom" color="#ff5b5b"></uni-icons>
							</view>
							<view class="item-expand" @click="more(item, index)" v-else>
								收起评论
								<uni-icons type="top" color="#ff5b5b"></uni-icons>
							</view>
						</view>
					</view>
				</view>
				<u-empty
					v-if="loadStatus === 'nomore' && list.length === 0"
					icon="/static/images/empty.svg"
					width="200"
					text="暂无评论,发送评论抢首评～"
					textColor="#746a74"
					style="padding-top: 40px"
				/>
				<view class="load-more">
					<u-loadmore :status="loadStatus" loading-icon="semicircle" :margin-top="20" />
				</view>
			</view>
			<!-- </scroll-view> -->
		</view>
		<view style="height: 50px"></view>

		<view class="comment-input">
			<view class="comment-input-textarea">
				<textarea ref="input" v-model="comment" :focus="focus" @blur="focus = false" :placeholder="inputPlaceholder" auto-height :disabled="isLogin" />
				<uni-icons type="paperplane-filled" :color="isLogin ? '#c8c9cc' : '#DA2538'" size="24" class="comment-input-send" @click="postData"></uni-icons>
			</view>
		</view>
		<!-- <u-loading-page :loading="loaded === false" fontSize="16"></u-loading-page> -->
	</view>
</template>

<script>
import { app, comment } from '@/utils/api';
import CommentBubble from '@/components/Comment-bubble.vue';
import { commentDig } from '@/utils/dexie';
// #ifdef APP-PLUS
import DB from '@/utils/sqlite.js';
// #endif
export default {
	props: {
		id: {
			type: Number,
			default: 0
		},
		showinput: {
			type: Number,
			default: 0
		}
	},
	components: {
		CommentBubble
	},
	data() {
		return {
			list: [],
			comment: '',
			isLogin: false,
			page: 1,
			commentpage: 1,
			currentPage: true,
			previousCommentId: 0,
			loaded: false,
			loadStatus: 'loadmore',
			scrollTop: 0,
			tid: '',
			pid: '',
			uid: '',
			focus: false,
			index: 0,
			chlidindex: 0,
			inputPlaceholder: '请先登录才能进行评论~',
			replyCommentList: []
		};
	},
	mounted() {
		// #ifdef APP-PLUS
		let open = DB.isOpen();
		if (open) {
			DB.selectTableData('commentDig')
				.then((res) => {})
				.catch((error) => {
					let sql = '"id" INTEGER PRIMARY KEY AUTOINCREMENT,"comment_id" text,"up" text,"down" text';
					DB.createTable('commentDig', sql);
				});
		}
		// #endif
	},
	methods: {
		reply(type, item, index) {
			if (item.comment_status == 0) return;
			if (this.isLogin) return;
			this.inputPlaceholder = '回复' + item.user_name + ':' + item.comment_content;
			if (type == 0) {
				this.tid = item.comment_id;
				this.pid = item.comment_id;
				this.index = index;
			} else {
				this.tid = item.comment_tid;
				this.pid = item.comment_id;
				this.index = index;
			}
			this.uid = item.user_id;
			this.focus = true;
		},
		async more(item, index) {
			if (this.commentpage == 1) {
				this.replyCommentList = [];
			}
			if (this.previousCommentId !== item.comment_id) {
				this.commentpage = 1;
				this.replyCommentList = [];
				this.currentPage = true;
			}
			this.previousCommentId = item.comment_id;
			if (this.list[index].expanded == 'open') {
				this.list[index].expanded = 'close';
				return;
			}
			// if (!this.currentPage) {
			// 	this.list[index].expanded = 'open';
			// 	return
			// }
			try {
				const res = await comment.list(this.id, 1, this.commentpage, item.comment_id);
				const resData = res.data;
				// if (this.currentPage) {
				this.replyCommentList = this.replyCommentList.concat(resData.list);
				for (var i = 0; i < this.list.length; i++) {
					if (i != index) {
						this.list[i].expanded = 'close';
					}
				}
				// #ifdef APP-PLUS

				for (let i = 0; i < this.replyCommentList.length; i++) {
					const item = this.replyCommentList[i];
					if (item.comment_id) {
						DB.selectTableData('commentDig', 'comment_id', item.comment_id).then((res) => {
							let data = res[0];
							if (data) {
								this.replyCommentList[i].is_up = data.up == 1 ? true : false;
								this.replyCommentList[i].is_down = data.down == 1 ? true : false;
								if (this.replyCommentList[i].is_up) {
									this.replyCommentList[i].comment_up += 1;
								}
								if (this.replyCommentList[i].is_down) {
									this.replyCommentList[i].comment_down += 1;
								}
							}
						});
					}
				}

				// #endif
				// #ifdef H5

				for (let i = 0; i < this.replyCommentList.length; i++) {
					const item = this.replyCommentList[i];

					if (item.comment_id) {
						commentDig.get(item.comment_id).then((res) => {
							if (res) {
								this.$set(this.replyCommentList[i], 'is_up', res.up === 1 ? true : false);
								this.$set(this.replyCommentList[i], 'is_down', res.down === 1 ? true : false);
								console.log(this.replyCommentList[i].is_up, this.replyCommentList[i].comment_up);
								if (this.replyCommentList[i].is_up) {
									this.replyCommentList[i].comment_up += 1;
								}
								if (this.replyCommentList[i].is_down) {
									this.replyCommentList[i].comment_down += 1;
								}
							}
						});
					}
				}
				// #endif
				// }
				try {
					for (let i = 0; i < this.list[this.index].ImaginaryArray.length; i++) {
						const idToCompare = this.list[this.index].ImaginaryArray[i].comment_id;
						const foundIndex = this.replyCommentList.findIndex((item) => item.comment_id === idToCompare);
						if (foundIndex !== -1) {
							this.list[this.index].ImaginaryArray.splice(i, 1);
							i--;
						}
					}
				} catch (error) {}

				if (resData.page < resData.page_total) {
					this.commentpage++;
					this.currentPage = true;
					this.list[index].expanded = 'showMore';
					console.log(12321312);
				} else {
					console.log(222222);
					this.currentPage = false;
					this.list[index].expanded = 'open';
				}
				console.log(this.list[index].expanded);
			} catch (error) {}
		},
		init() {
			if (this.loaded === false) {
				this.getData();
			}
		},
		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;
						this.inputPlaceholder = this.isLogin ? '请先登录才能进行评论~' : '我来评论~';
					}
					if (resData.page < resData.page_total) {
						this.loadStatus = 'loadmore';
						this.page++;
					} else {
						this.loadStatus = 'nomore';
					}
					for (var i = 0; i < resData.list.length; i++) {
						resData.list[i].expanded = 'close';
					}

					// #ifdef H5
					for (let index = 0; index < resData.list.length; index++) {
						const item = resData.list[index];
						if (item.comment_id) {
							commentDig.get(item.comment_id).then((res) => {
								if (res) {
									this.$set(resData.list[index], 'is_up', res.up === 1 ? true : false);
									this.$set(resData.list[index], 'is_down', res.down === 1 ? true : false);
									if (resData.list[index].is_up) {
										resData.list[index].comment_up += 1;
									}
									if (resData.list[index].is_down) {
										resData.list[index].comment_down += 1;
									}
								}
							});
						}
					}
					// #endif
					// #ifdef APP-PLUS
					for (let index = 0; index < resData.list.length; index++) {
						const item = resData.list[index];
						if (item.comment_id) {
							DB.selectTableData('commentDig', 'comment_id', item.comment_id).then((res) => {
								let data = res[0];
								if (data) {
									resData.list[index].is_up = data.up == 1 ? true : false;
									resData.list[index].is_down = data.down == 1 ? true : false;
									if (resData.list[index].is_up) {
										resData.list[index].comment_up += 1;
									}
									if (resData.list[index].is_down) {
										resData.list[index].comment_down += 1;
									}
								}
							});
						}
					}

					// #endif
					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
				});

				let timestamp = Date.now() / 1000;
				comment.add(this.id, 1, this.comment, this.tid, this.pid, this.uid, timestamp).then((res) => {
					if (res.code === 1) {
						this.comment = '';
						if (res.data) {
							if (res.data['comment_status'] == 1 && !this.tid && !this.pid) {
								this.list.splice(1, 0, res.data);
								if (this.loadStatus === 'loadmore') {
									this.list.pop();
								}
								this.scrollTop = 0;
							}
							if (this.tid && this.pid) {
								this.list[this.index].ImaginaryArray = this.list[this.index].ImaginaryArray || [];
								this.list[this.index].ImaginaryArray.splice(1, 0, res.data);
							}
							if (res.data['task_coin']) {
								this.$emit('reward', res.data['task_coin']);
							}
						}
						this.tid = '';
						this.pid = '';
						this.uid = '';
						this.inputPlaceholder = this.isLogin ? '请先登录才能进行评论~' : '我来评论~';
					}
					uni.showToast({
						icon: 'none',
						title: res.msg,
						duration: 3000
					});
				});
			} else {
				uni.navigateTo({
					url: '/pages/user/login'
				});
			}
		},
		digComment(item, type, index) {
			const status = item['is_' + type] ? 0 : 1;

			if (item.is_top === 1) {
				item['is_' + type] = status;
				if (type == 'down') {
					if (status === 1) {
						item['comment_' + type] = 1;
					} else {
						item['comment_' + type] = 0;
					}
				}
				return;
			}

			app.updateDig(item.comment_id, 4, type, status).then((res) => {
				if (res.code == 1) {
					item['is_' + type] = status === 1 ? true : false;
					if (status === 1) {
						item['comment_' + type] += 1;
					} else if (item['comment_' + type] > 0) {
						item['comment_' + type] -= 1;
					}
					let data = {};
					data[type] = status;
					// #ifdef APP-PLUS
					DB.selectTableData('commentDig', 'comment_id', item.comment_id).then((res) => {
						if (res.length) {
							let condition = `${type} = '${status}'`;
							DB.updateTableData('commentDig', condition, 'comment_id', item.comment_id);
						} else {
							let sql = `'${item.comment_id}','${status}'`;
							let condition = `'comment_id','${type}'`;
							DB.insertTableData('commentDig', sql, condition);
						}
					});
					// #endif
					// #ifdef H5
					if ('indexedDB' in window) {
						commentDig.get(item.comment_id).then((res) => {
							if (res) {
								commentDig.update(item.comment_id, data);
							} else {
								data.id = item.comment_id;
								commentDig.add(data);
							}
						});
					}
					// #endif
				} else {
					uni.showToast({
						icon: 'none',
						title: res.msg,
						duration: 3000
					});
				}
			});
		},
		onScroll({ target: { scrollTop } }) {
			this.scrollTop = scrollTop;
		}
	}
};
</script>

<style lang="scss">
.video-comment {
	height: 100%;
	display: flex;
	flex-direction: column;

	.item-expand {
		margin-left: 50px;
		padding-bottom: 10px;
		margin-top: 0px;
		color: #ff5b5b;
		font-size: 12px;
	}

	.item-content {
		margin-left: 15px;
		padding-bottom: 15px;
		flex: 1 1 0%;
	}

	.video-comment-scroll {
		height: 0;
		flex: 1 1 0%;

		.comment-list {
			padding: 10px 15px 0;
			padding-bottom: 55px;

			.comment-item {
				padding: 5px 0;
				display: flex;

				.user-avatar {
					width: 40px;
					height: 40px;
					border-radius: 50%;
				}

				.item-reply {
					margin-left: 5px;
					color: #ff5b5b;
					font-size: 12px;
					border: 1px solid #ff5b5b;
					padding: 2px;
				}

				.item-expand {
					margin-left: 20px;
					margin-top: 10px;
					color: #ff5b5b;
					font-size: 12px;
				}

				.item-content {
					margin-left: 10px;
					padding-bottom: 15px;
					flex: 1 1 0%;
					border-bottom: 1px solid #f2f5fa;

					.item-title-box {
						margin: 2px 0 5px;
						display: flex;
						align-items: center;

						.user-name {
							font-size: 14px;
							font-weight: 700;
							color: #fff;
						}

						.item-top-icon {
							margin-left: 8px;
							padding: 1px 4px;
							text-align: center;
							background-color: #ff5b5b;
							border-radius: 2px;
							font-size: 11px;
							color: #fff;
						}

						.item-statistics {
							font-size: 13px;
							color: #a7a8b0;
							display: flex;
							align-content: center;

							.uni-icons {
								margin-right: 4px;
							}
						}
					}

					.comment-content {
						font-size: 14px;
						color: #a7a8b0;
						line-height: 1.4;
					}
				}
			}
		}
	}

	.comment-input {
		border-top: 1px solid rgba(0, 0, 0, 0.1);
		position: fixed;
		width: 750rpx;

		bottom: 20px;
		z-index: 999;

		.comment-input-textarea {
			margin: 10px 15px;
			padding: 8px 0;
			border-radius: 20px;
			background-color: #f1f5f8;
			min-height: 40px;
			display: flex;
			align-items: center;
			width: 90%;
			height: 50px;

			uni-textarea {
				width: 100%;
				margin-left: 20px;
				font-size: 15px;
			}

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

		.comment-login {
			display: flex;
			align-items: center;
			justify-content: center;
			background-color: rgba(255, 255, 255, 0.3);
			border-radius: 20px;
			position: absolute;
			left: 15px;
			right: 15px;
			top: 10px;
			bottom: 10px;
		}
	}
}
</style>
