<% layout('/layouts/default.html', {title: '咨询帮助首页', bodyClass: ''}){ %>

<div id="pageayout" class="border" style="overflow: auto; padding: 0px;">
	<div id='help' class="help inner" style="margin: 10px;background: #fff; ">
		<div style="width: 100%;height: 100%;display: flex;justify-content: space-around;padding-top: 20px;">
			<div style="width:98%;height: 100%;margin:1%">
				<input type="hidden" id="searchType" value="全部">
				<div style="width: 100%;padding: 10px 0; display: flex;align-items: center;justify-content: space-between;">
					<div style="display: flex;align-items: center;">
						<div>状态:</div>
						<div class="dropdown">
							<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
								<span class="dataLabel">所有</span>
								<span class="caret"></span>
							</button>
							<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
								<li><a href="javascript:void(0);" onclick="changeLabel(this)" data="全部">所有</a></li>

								<li><a href="javascript:void(0);" onclick="changeLabel(this)"  data="me">我的</a></li>
							</ul>
						</div>
					</div>
					<div style="display: flex;align-items: center;">
						<div>回复:</div>
						<div class="dropdown">
							<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
								所有
								<span class="caret"></span>
							</button>
							<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
								<li><a href="http://192.168.1.56:8081/fwzx/zxbz#">所有</a></li>
								<li><a href="http://192.168.1.56:8081/fwzx/zxbz#">已回复</a></li>
								<li><a href="http://192.168.1.56:8081/fwzx/zxbz#">未回复</a></li>
							</ul>
						</div>
					</div>
					<div class="input-group">
						<input type="text" class="form-control" id="title" placeholder="请输入相关键词" aria-describedby="basic-addon2">
						<span class="input-group-addon" id="basic-addon2">
                        <button style="border: none;" onclick="fetchData()">搜索</button>
                    </span>
					</div>
					<div class="btn-group" role="group" aria-label="...">
						<button type="button" class="btn btn-default" onclick="toAddConsult()">我要咨询</button>
					</div>
				</div>
				<div style="width: 100%;height: 85%;overflow: auto;" class="frameBody">

					<div style="width: 100%;height: auto;background-color: #eee;padding: 10px 20px;margin-bottom: 15px;border: green 3px solid;display: none">
						<div class="media">
							<div class="media-left">
								<a href="http://192.168.1.56:8081/fwzx/zxbz#">
									<div style="width:50px;height:50px;border-radius:50%;background-color:#fff;display: flex;justify-content: space-around;align-items: center;overflow: hidden; ">
										<img class="media-object" src="./Document_files/wd1.png" width="40px">
									</div>
								</a>
							</div>
							<div class="media-body" style="">
								<h4 class="media-heading">${data}</h4>
								<div>怎么报英语四六级</div>
							</div>
						</div>
						<div style="width: 100%;display: flex;justify-content: flex-end;">
							<a>回复</a> <span>|</span> <a>评论(20)</a>
						</div>
						<div style="width:85%;margin-left: 15%;border-top: 1px solid #ccc;margin-top: 5px;border: 2px red solid">
							<div style="width: 100%;padding:10px 0 10px 20px;border-bottom: 1px solid #ccc;">
								<div style="width: 100%;display: flex;justify-content: space-between;align-items: center;">
									<div style="font-size: 16px;color:#2766b3;">
										教务处:
									</div>
									<div style="color: #888;">2022-3-14 13:00 <a>评论</a></div>
								</div>
								<div style="margin-top: 4px;">需要用校园网，考试成绩达标</div>
							</div>
							<div style="width: 100%;padding:10px 0 10px 20px;border-bottom: 1px solid #ccc;">
								<div style="width: 100%;display: flex;justify-content: space-between;align-items: center;">
									<div style="font-size: 16px;color:#2766b3;">
										小王同学:
									</div>
									<div style="color: #888;">2022-3-14 13:00 <a>评论</a></div>
								</div>
								<div style="margin-top: 4px;">英语成绩要70分及以上</div>
							</div>
							<div style="width: 100%;padding:10px 0 10px 20px;border-bottom: 1px solid #ccc;">
								<div style="width: 100%;display: flex;justify-content: space-between;align-items: center;">
									<div style="font-size: 16px;color:#2766b3;">
										小王同学:
									</div>
									<div style="color: #888;">2022-3-14 13:00 <a>评论</a></div>
								</div>
								<div style="margin-top: 4px;">英语成绩要70分及以上</div>
							</div>
						</div>
						<div style="width: 100%;display: flex;justify-content: flex-end;align-items: baseline;margin-top:10px;border: 2px blue dashed">
							<div style="color: #888;margin-right: 4px;">剩余3条评论</div>
							<a>点击查看</a>
							<button onclick="toAddComment()" style="border-color: #ccc;color: #2766b3;background-color: #fff;margin-left: 4px;">我要评论</button>
						</div>
					</div>

				</div>

				<div style="bottom: 0;width: 100%;text-align: center;display: none">
					<nav aria-label="Page navigation">
						<ul class="pagination">
							<li>
								<a href="http://192.168.1.56:8081/fwzx/zxbz#" aria-label="Previous">
									<span aria-hidden="true">«</span>
								</a>
							</li>
							<li class="active"><a href="http://192.168.1.56:8081/fwzx/zxbz#">1</a></li>
							<li><a href="http://192.168.1.56:8081/fwzx/zxbz#">2</a></li>
							<li><a href="http://192.168.1.56:8081/fwzx/zxbz#">3</a></li>
							<li><a href="http://192.168.1.56:8081/fwzx/zxbz#">4</a></li>
							<li><a href="http://192.168.1.56:8081/fwzx/zxbz#">5</a></li>
							<li>
								<a href="http://192.168.1.56:8081/fwzx/zxbz#" aria-label="Next">
									<span aria-hidden="true">»</span>
								</a>
							</li>
						</ul>
					</nav>
				</div>
			</div>
		</div>
	</div>
</div>
<% } %>

<style>
	html,body{
		background-color: white;
		height: auto;
	}


</style>
<script src="${ctxStatic}/schedule/fullcalendar/js/jquery-1.7.2.min.js"></script>
<script src="${ctxStatic}/schedule/jquery-ui/jquery-ui.min.js"></script>
<script type='text/javascript'>
	var tempDataList = null;
	var dictDataMap = '${dictMap}'
	//处理咨询类型字典
	var dictMap = new Map();
	dictDataMap = JSON.parse(dictDataMap)
	for(var key in dictDataMap){
		dictMap.set(key,dictDataMap[key])
	}
	$(document).ready(function () {
		fetchData()
	});

	//获取遍历的list数据
	function  fetchData(){
		var searchType = $("#searchType").val();
		var title = $("#title").val();
		$.ajax({
			url: "${ctx}/consult/consultHelp/allDataList",
			data: { searchType: searchType,title: title},
			dataType: "json",
			type: 'Post',
			async: false,
			success: function (data) {
				tempDataList = data.list
				initDomEle(tempDataList)
			}
		});
	}

	function initDomEle(dataList){
		$(".frameBody").empty();
		//每一个咨询的主键id
		var consultId = 'none'
		var footPart = null
		dataList.forEach(function (item){
			//总内容div盒子部分
			var domEle = '' +
					'<div style="width: 100%;height: auto;background-color: #eee;padding: 10px 20px;margin-bottom: 15px;" class="uuu">\n' +
					'      <div class="media">\n' +
					'       	<div class="media-left">\n' +
					'        		<a href="http://192.168.1.56:8081/fwzx/zxbz#">\n' +
					'         			<div style="width:50px;height:50px;border-radius:50%;background-color:#fff;display: flex;justify-content: space-around;align-items: center;overflow: hidden; ">\n' +
					'          				<img class="media-object" src="./Document_files/wd1.png" width="40px">\n' +
					'         			</div>\n' +
					'        		</a>\n' +
					'       	</div>\n' +
					'       	<div class="media-body" style="">\n' +
					'        		<h4 class="media-heading">'+dictMap.get(item.consultType)+'</h4>\n' +
					'        		<div>'+item.title+'</div>\n' +
					'       	</div>\n' +
					'      </div>\n' +
					'      <div style="width: 100%;display: flex;justify-content: flex-end;">\n' +
					'       	<a>回复</a> <span>|</span> <a>评论('+item.consultHelpSlaves.length+')</a>\n' +
					'      </div>\n'+
					'</div>'

			//所有回复评论的数据列表部分
			var bodyContentOuter = null;
			var bodyContentInner = '';
			console.log(item.consultHelpSlaves)
			if(item.consultHelpSlaves.length > 0){

				bodyContentOuter = '' +
						'<div style="width:85%;margin-left: 15%;border-top: 1px solid #ccc;margin-top: 5px;">\n' +

						'</div>\n';

				item.consultHelpSlaves.forEach(function (sonItem){
					bodyContentInner += ''+'' +
							'<div style="width: 100%;padding:10px 0 10px 20px;border-bottom: 1px solid #ccc;">\n' +
							'   <div style="width: 100%;display: flex;justify-content: space-between;align-items: center;">\n' +
							'       <div style="font-size: 16px;color:#2766b3;">\n' +
							'          	'+sonItem.userName+':\n' +
							'       </div>\n' +
							'       <div style="color: #888;">'+sonItem.createTime+' <a>评论</a></div>\n' +
							'    </div>\n' +
							'    <div style="margin-top: 4px;">'+sonItem.content+'</div>\n' +
							'</div>\n';
				});
			}
			//我要评论部分
			if(consultId != item.id){
				consultId = item.id;
				footPart = '' +
						'<div style="width: 100%;display: flex;justify-content: flex-end;align-items: baseline;margin-top:10px;">\n' +
						'       	<div style="color: #888;margin-right: 4px;">剩余3条评论</div>\n' +
						'       	<a>点击查看</a>\n' +
						'       	<button onclick="toAddComment(\''+item.id+'\')" style="border-color: #ccc;color: #2766b3;background-color: #fff;margin-left: 4px;">我要评论</button>\n' +
						'</div>';
			}

			bodyContentOuter == null ? $(".frameBody").append($(domEle).append($(footPart))) : $(".frameBody").append($(domEle).append(($(bodyContentOuter).append($(bodyContentInner)))).append($(footPart)));

		});
	}

	//跳转到添加咨询页面处
	function toAddConsult(){
		js.addTabPage(null, "新增咨询帮助", "${ctx}/consult/consultHelp/form2")
	}

	//发表评论
	function toAddComment(id){
		js.addTabPage(null, "新增咨询评论", "${ctx}/consult/consultHelpSlave/form?consultId="+id)
	}

	//状态下拉修改数据
	function changeLabel(obj){
		$("#dropdownMenu1 .dataLabel").text($(obj).text());
		$("#searchType").val($(obj).attr('data'))
	}
</script>

