<!DOCTYPE html>
<html>
	{include file="head.html"}
	<style>
		.w200{
			max-width: 200px;
		}
	</style>
	<body>
		<div class="header">
			<div class="header-back"></div>
			<div class="header-title">分类咨询</div>
		</div>
		<div class="header-row"></div>
		<div class="main-body">
			<div v-if="pageLoad" style="display: none;" :class="'flex-col'" class="list" id="app">
				 
				<div v-for="(item,index) in pageData.list" :key="index" class="bg-white pd-10">
					 
					<div class="flex" v-if="item.isme">
						<img :src="item.user_head+'.100x100.jpg'" class="wh-40 mgr-10" />
						
						<div class="flex-1">
							<div class="cl2 mgb-5">
								{{item.nickname}}
							</div>
							<div class="cl3">{{item.content}}</div>
						</div>
					</div>
					<div class="flex" v-else>
					<div class="flex-1"></div>
					<div class="w200">
						
						<div class="cl2 mgb-5 flex">
							<div class="flex-1"></div>
							{{item.to_nickname}}
						</div>
						<div class="cl3">{{item.content}}</div>
					</div>
				 
					<img :src="item.to_user_head+'.100x100.jpg'" class="wh-40 mgl-10" />
					</div>
				</div>
	 
			</div>
			<div class="footer-row"></div>
			<div style="position: fixed;bottom: 0;left: 0;right: 0;">
				<div class="input-flex">
					<input type="text" id="content" class="input-flex-text" />
					<div class="input-flex-btn" id="submit">发送</div>
				</div>
			</div>
		</div>
		{include file="footer.html"}
		<script src="/plugin/vue/vue.min.js"></script>
		<script>
			var id="{$fenlei.id}";
			var touserid="{$touserid}";
			var app=new Vue({
				el:"#app",
				data:function(){
					return {
						pageLoad:false,
						pageData:[]
					}
				},
				created:function(){
					this.getPage();
				},
				methods:{
					getPage:function(){
						var that=this;
						$.ajax({
							url:"/module.php?m=fenlei_guest&a=fenlei&ajax=1",
							data:{
								touserid:touserid,
								id:id
							},
							dataType:"json",
							success:function(res){
								that.pageLoad=true;
								that.pageData=res.data
								console.log(res.data);
							}
						})
					},
					submit:function(){
						
					}
				}
			})
			$(function(){
				setInterval(function(){
					app.getPage();
				},20000)
				$(document).on("click","#submit",function(){
					var content=$("#content").val();
					$.post("/module.php?m=fenlei_guest&a=save&ajax=1",{
						content:content,
						id:id,
						touserid:touserid
					},function(res){
						app.getPage();
						$("#content").val("");
					},"json")
				})
			})
		</script>
	</body>
</html>
