<script setup>
import { reactive,toRefs,ref,computed } from 'vue'
import {useRoute, useRouter} from 'vue-router'
import { Icon,Field,Checkbox,Button,Toast,Divider,Tag,Dialog  } from 'vant'
import { setLike,publishMsg,delComment,getHotMessage,getMyMessage } from '@/api/hzyb/message'

const props = defineProps({
	info: {
		type: Object,
	}
})
const { report_info,report_chapter_item,research_report_type_info,research_report_info } = props.info;

const emits = defineEmits(['like_change'])

const userId = ref(localStorage.getItem('hzyb-userId') || '');//用户id

// 获取用户信息
import {apiUserInfo} from '@/api/hzyb/user'
const haveNick=ref(false)//是否设置过昵称
const getUserInfo=async ()=>{
    const { code,data }=await apiUserInfo({Authorization: localStorage.getItem('hzyb-token')})
    if(code !==200) return

		haveNick.value = data.nick_name ? true : false;

		!haveNick.value && Dialog.confirm({
			title: '',
			message: '检测到您还未设置头像和昵称，您的留言将发布为匿名，是否立即去设置？',
			confirmButtonText: '去设置',
			confirmButtonColor: '#E3B377',
			cancelButtonText: '暂时不用',
			cancelButtonColor: '#666'
		})
			.then(() => {
				wx.miniProgram.navigateTo({ url:'/pages-user/mysetting' })
			})
			.catch(() => {
				
			});
	
}

 //是否匿名 默认状态根据上次留言的勾选状态而定
const isHideRealName = ref(null);
//判断是否可以实名  再次获取最新信息 防止设置完返回页面昵称未同步
const checkNickHandle = async (val) => {
	const { code,data }=await apiUserInfo({Authorization: localStorage.getItem('hzyb-token')})
	if(code !==200) return

	haveNick.value = data.nick_name ? true : false;
	isHideRealName.value = haveNick.value ? val : true;

}

//显示写留言框
const isShowMessagebox = ref(false);
const message_content = ref('');
//展开留言框
const writeOrCancelMessage = () => {
	isShowMessagebox.value = !isShowMessagebox.value;

	isShowMessagebox.value === true && getUserInfo()
}
/* 发布留言 */
const publishMessageHandle = async() => {
	const { code } = await publishMsg({
		report_id:  report_info ? report_info.report_id : report_chapter_item ? report_chapter_item.report_id :  0,
		report_chapter_id: report_chapter_item ? report_chapter_item.report_chapter_id : 0,
		old_report_id:  research_report_info ? props.info.research_report_type_list[0].ResearchReportId : research_report_type_info ? research_report_type_info.research_report_id : 0,
		old_report_chapter_id: research_report_type_info ? research_report_type_info.research_report_type_id : 0,
		content: message_content.value,
		is_show_name: isHideRealName.value ? 0 : 1,
	})
	if( code !== 200) return
	Toast('已留言')
	message_content.value = ''
	isShowMessagebox.value = false
	setTimeout(() => {
		getMyMsgList();
		getHotMsgList();
	},300)
}


//我的留言列表
const myMessageList = ref([]);
const realMyList = ref([]);
//精选留言列表
const hotMessageList = ref([]);

// 当前选中哪种留言
let msgType=ref('全部留言')

/* 我的留言 */
const getMyMsgList = async () => {

	const { code,data } = await getMyMessage({
		report_id:  report_info ? report_info.report_id : report_chapter_item ? report_chapter_item.report_id :  '',
		report_chapter_id: report_chapter_item ? report_chapter_item.report_chapter_id : '',
		old_report_id:  research_report_info ? props.info.research_report_type_list[0].ResearchReportId : research_report_type_info ? research_report_type_info.research_report_id : '',
		old_report_chapter_id: research_report_type_info ? research_report_type_info.research_report_type_id : '',
	})

	if(code !== 200) return

	myMessageList.value = data.list || [];
	isHideRealName.value = data.is_show_name ? false :  true;
	// realMyList.value = myMessageList.value.length > 3  ? myMessageList.value.slice(0,3) : myMessageList.value;
}
/* 精选留言 */
const getHotMsgList = async () => {
	let page_size = 100000;//暂时不做分页

	const { code,data } = await getHotMessage({
		report_id:  report_info ? report_info.report_id : report_chapter_item ? report_chapter_item.report_id :  '',
		report_chapter_id: report_chapter_item ? report_chapter_item.report_chapter_id : '',
		old_report_id:  research_report_info ? props.info.research_report_type_list[0].ResearchReportId : research_report_type_info ? research_report_type_info.research_report_id : '',
		old_report_chapter_id: research_report_type_info ? research_report_type_info.research_report_type_id : '',
		current_index: 1,
		page_size
	})

	if(code !== 200) return

	hotMessageList.value = data.list || [];

}
getMyMsgList();
getHotMsgList();
//是否收起我的留言
// const isSlideMyMsg = ref(false);
// const slideMymessageHandle = () => {
// 	isSlideMyMsg.value = !isSlideMyMsg.value
// 	realMyList.value = isSlideMyMsg.value ? myMessageList.value : myMessageList.value.slice(0,3);
// }
// 留言类型切换
const msgTypeChange=(e)=>{
	msgType.value=e
	if(e==='全部留言'){
		getHotMsgList();
	}else{
		getMyMsgList();
	}
}



/* 点赞 */
const giveLikeHandle = async() => {
	const { code,data } = await setLike({
		report_id:  report_info ? report_info.report_id : report_chapter_item ? report_chapter_item.report_id :  0,
		report_chapter_id: report_chapter_item ? report_chapter_item.report_chapter_id : 0,
		old_report_id:  research_report_info ? props.info.research_report_type_list[0].ResearchReportId : research_report_type_info ? research_report_type_info.research_report_id : 0,
		old_report_chapter_id: research_report_type_info ? research_report_type_info.research_report_type_id : 0,
	})

	if( code !== 200 ) return
	Toast(`${data.like_enabled ? '点赞成功' : '取消点赞成功'}`)
	emits('like_change',data)
}
/* 删除留言 */
const delMessageHandle = ({ comment_id }) => {
	Dialog.confirm({
		title: "",
		message: "确定要删除该留言吗？",
		confirmButtonColor: "#6784A7",
	}).then( async() => {
		const { code } = await delComment({ comment_id });
		if( code !== 200 ) return

		Toast('删除成功')

		removeMessageByView(comment_id);
	});

	/* 删除页面上的留言 */
	const removeMessageByView = (comment_id) => {
		let index_my = myMessageList.value.findIndex(_ => _.comment_id === comment_id);
		let index_hot = hotMessageList.value.findIndex(_ => _.comment_id === comment_id);

		console.log(comment_id,index_my,index_hot)

		index_my !== -1 && myMessageList.value.splice(index_my, 1)
		index_hot !== -1 && hotMessageList.value.splice(index_hot, 1)
		// realMyList.value = isSlideMyMsg.value ? myMessageList.value : myMessageList.value.slice(0,3);
	}
}

	// 跳转到问答首页
	const linkToQuestionHandle = () => {
		// wx.miniProgram.switchTab({url:'/pages/question/question'})
		wx.miniProgram.navigateTo({url:'/pages-question/hasQuestion'})
	}

</script>

<template>
	<div class="givelike-container">
		<div class="like-top">
			<span @click="giveLikeHandle"> 
				<Icon :name="props.info.like_enabled ? 'good-job' : 'good-job-o'" />
				{{props.info.like_num || '' }} 
			</span> 
			<span @click="writeOrCancelMessage">{{ isShowMessagebox ? '取消发布' : '写留言'}}</span>
		</div>

		<div class="write-message-box" v-show="isShowMessagebox">
				<Field
					v-model="message_content"
					label=""
					type="textarea"
					placeholder="发布一条留言"
					autosize
				/>
				<div class="write-bottom">
					<div class="left">
						<Checkbox v-model="isHideRealName" icon-size="15px" shape="square" checked-color="#E3B377" @change="checkNickHandle"/>
						<span class="label">匿名发布</span>

						<icon name="question-o" color="#E3B377" @click="Toast({ message: '匿名发布的留言将使用默认头像和默认昵称，用户需设置头像和昵称后才能取消匿名',  position: 'bottom' })"/>
					</div>
					<Button type="primary" :disabled="!message_content" @click="publishMessageHandle">发布</Button>
				</div>
		</div>

		<div class="message-list-cont">
			<div class="tabs-box">
				<span 
					:class="msgType==='全部留言'?'active':''" 
					@click="msgTypeChange('全部留言')"
				>全部留言</span>
				<span 
					:class="msgType==='我的留言'?'active':''"
					@click="msgTypeChange('我的留言')"
				>我的留言</span>
			</div>
			<template v-if="msgType==='我的留言'">
				<div class="my-message message-section">
					<ul class="mesage-ul">
						<li class="message-item" v-for="item in myMessageList" :key="item.comment_id">
							<div class="message-cont">
								<img :src="item.user_img_url" alt="" class="avatar">
								<div class="info">
									<div class="info-top">
										<span class="name">
											{{item.user_name}}
											<Tag color="#DEDFE5" text-color="#fff" v-if="item.is_top==1">置顶</Tag>
										</span>
										<div class="right-tag">
											<!-- <span>{{item.IsHot ? '已精选' : '未精选'}}</span>
											<span class="divider">|</span> -->
											<span class="del" @click="delMessageHandle(item)">删除</span>
										</div>
									</div>
									<p class="content">{{item.content}}</p>
								</div>
							</div>
							<ul class="reply-list" v-if="item.ReplyList">
								<li class="message-cont" v-for="sub_item in item.ReplyList" :key="sub_item.comment_id">
									<img :src="sub_item.admin_img_url" alt="" class="reply-avatar">
									<div class="info">
										<span class="name">{{sub_item.admin_name}}</span>
										<p class="content">{{sub_item.content}}</p>
									</div>
								</li>
							</ul>
						</li>
						<!-- <li class="control" @click="slideMymessageHandle" v-if="myMessageList.length > 3">
							<span>{{isSlideMyMsg ? '收起' : '展开'}} <Icon :name="isSlideMyMsg ? 'arrow-up' : 'arrow-down'"/></span>
						</li> -->
					</ul>
				</div>
				<div 
					v-if="myMessageList.length==0" 
					style="text-align:center;font-size:14px;color:#999;line-height:100px"
				>
					暂无留言
				</div>
			</template>
			<template v-if="msgType==='全部留言'">
				<div class="wonder-message message-section" v-if="hotMessageList.length">
					<ul class="mesage-ul">
						<li class="message-item" v-for="item in hotMessageList" :key="item.comment_id">
							<div class="message-cont">
								<img :src="item.user_img_url" alt="" class="avatar">
								<div class="info">
									<div class="info-top">
										<span>
											{{item.user_name}}
											<Tag color="#DEDFE5" text-color="#fff" v-if="item.IsTop">置顶</Tag>
										</span>
										<span class="del" @click="delMessageHandle(item)" v-if="item.user_id === Number(userId)">删除</span>
									</div>
									<p class="content">{{item.content}}</p>
								</div>
							</div>	
							<ul class="reply-list" v-if="item.ReplyList">
								<li class="message-cont" v-for="sub_item in item.ReplyList" :key="sub_item.comment_id">
									<img :src="sub_item.admin_img_url" alt="" class="reply-avatar">
									<div class="info">
										<span class="name">{{sub_item.admin_name}}</span>
										<p class="content">{{sub_item.content}}</p>
									</div>
								</li>
							</ul>
						</li>
					</ul>
				</div>
				<div 
					v-if="hotMessageList.length==0" 
					style="text-align:center;font-size:14px;color:#999;line-height:100px"
				>
					暂无留言
				</div>
			</template>
			<!-- 跳转问答区域 -->
			<div class="link-to-question" @click="linkToQuestionHandle">
				想要一对一回复吗？去问答社区提问
			</div>
		</div>
	</div>

</template>

<style scoped lang="scss">
.givelike-container {
	.like-top{
		display: flex;
		align-items: center;
		justify-content: space-between;
		background-color: #fff;
		color: #E3B377;
		padding: 40px 30px;
		.van-icon-good-job-o {
			font-size: 48px;
		}
		.van-icon-good-job {
			font-size: 48px;
			/* color: #E3B377; */
		}
	}
	.write-message-box {
		background-color: #fff;
		padding: 0 30px 40px;
		.van-field {
			border-radius: 8px;
			border: 1px solid #E3B377;
			height: 400px;
			overflow-y: auto;
		}
		.write-bottom {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top: 30px;
			.left {
				display: flex;
				align-items: center;
				.label {
					font-size: 28px !important;
					margin: 0 10px;
					color: #E3B377;
				}
			}
			.van-button--primary {
				height: 58px;
				font-size: 24px;
				background-color: #E3B377;
				border-color: #E3B377;
			}
		}
	}

	.message-list-cont {
		padding: 70px 30px;
		background: #F5F6FA;
		.tabs-box{
			margin-bottom: 50px;
			span{
				font-size: 30px;
				display: inline-block;
				margin-right: 60px;
				color: #999;
			}
			.active{
				font-size: 32px;
				color: #333;
				position: relative;
				&::after{
					content: '';
					position: absolute;
					top: 105%;
					left: 50%;
					transform: translateX(-50%);
					width: 48px;
					height: 6px;
					background: #E3B377;
					border-radius: 4px;
				}
			}
			
		}
		.message-section {
			.section-label {
				color: #999;
				font-size: 28px;
			}
			.control {
				display: flex;
				justify-content: center;
				color: #6784A7;
			}
			.message-item  {
				margin: 20px 0 30px;
				.message-cont {
					display: flex;
					.avatar {
						width: 66px;
						height: 66px;
						margin-right: 20px;
					}
					.info {
						flex: 1;
						.name {
							font-size: 24px;
						}
						.info-top {
							display: flex;
							align-items: center;
							justify-content: space-between;
							color: #999;
							.divider {
								display: inline-block;
								margin: 0 10px;
							}
							.del {
								color: #6784A7;
							}
						}
						.content {
							font-size: 28px;
							color: #666;
						}
					}

				}
				.reply-list {
					margin: 20px 0;
					padding-left: 80px;
					.reply-avatar {
						width: 40px;
						height: 40px;
						margin-right: 20px;
					}
				}
			}
		}
	}

	.link-to-question {
		padding: 20px 0;
		text-align: center;
		color: #E3B377;
	}
}
</style>