{layout name="layout" /}
<style>
.laytable-cell-1-index_img {
    width: 100px;
	height:100%;
}
.config-input{
	line-height: 40px;
	display: inline-block;
	width: 192px;
	height: 40px;
    margin-left: 5px;
    font-size: 14px;
    color: #666;
    border:none;
}
.layui-input {
	
}
.anw{
	display: none;
}
.anw_user{
	width: 100%;
	height: auto;
	margin-top: 10px;
}
.anw_user li{
	width: auto;
	height: 30px;
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	align-items: center;
	flex-wrap: wrap;
	float: left;
	margin: 3px 0;
}
.anw_user li img{
	width: 30px;
	height: 30px;
	border-radius: 15em;
}
.anw_user li span{
	width: auto;
	height: 30px;
	line-height: 30px;
	color: #333;
	font-size:13px;
	padding: 0 10px; 
}
.layui-table-cell {

    height: 32px;
    line-height: 32px;

}
.layui-table thead tr, .layui-table-header, .layui-table-fixed-l tr, .layui-table-tool, .layui-table-patch, .layui-table-mend {
    background-color: #f2f2f2;
}
</style>
    <div class="if_wrap">
        <div id="if_con">
        	<div class="cus-con">
                <div class="set-top">                   
				{$topmenu}
                </div>
                <table class="layui-table" lay-data="{ url:'{:url('vip/evaluationquestionnaire/userinfo');}', page:true, id:'idTest',skin: 'row', even: true}" lay-filter="demo">
                    <thead>
                    <tr>
                      	<td lay-data="{width:90,field:'id', sort: true,templet: '#indexTpl'}">序号</td>
                        <td lay-data="{width:400,field:'title'}">题目名称</td>
                        <td lay-data="{width:200,field:'create_time'}">创建时间</td>   
                        <td lay-data="{width: 240, align:'center', toolbar: '#barDemo'}">操作</td>
                    </tr>
                    </thead>
                </table>
            
            </div>
            
        </div>
    </div>

<div id="userinfo" class="type-wrap" style="display: none;padding: 20px">
    <div class="" id="userinfo_data">
        <div class="snw_nav" id="set-type" style="border-bottom: 1px solid #e7e7e7;">
        	 <div id="answer" autocomplete="off" style="float: left;" class="layui-input config-input"></div>
        	 <div id="answer_num" autocomplete="off" style="" class="layui-input config-input"></div>
        	 <button class="layui-btn layui-btn-sm">评价用户</button>
        </div>
       <!--  <div class="config-btm flex" style="border-bottom: 1px solid #e7e7e7;">
            <input type="text" id="answer" autocomplete="off" style="border: none;" class="layui-input config-input">
        </div> -->
    </div>
    <div class="anw_cc">
    	<div class="anw">
    		<ul class="anw_user">
    			<li><img src="__PUBLIC__front/img/add-php.png"><span>小飞该刹</span></li>
    		</ul>
    	</div>
    </div>
    <script>
	    $('body').on('click','.snw_nav',function(){
			$(".anw").eq($(this).index()).show().siblings().hide();
		})
	</script>
</div>
<script type="text/html" id="indexTpl">
    {{d.LAY_TABLE_INDEX+1}}
</script>

<script type="text/html" id="barDemo">

	<a class="layui-btn layui-btn-xs" lay-event="userinfo" data-id="{{d.id}}">答案详情</a>

</script>
<script>
	layui.use(['laydate', 'laypage', 'layer', 'table', 'carousel', 'upload', 'element'], function(){
		var laydate = layui.laydate //日期
				,laypage = layui.laypage //分页
		layer = layui.layer //弹层
				,table = layui.table //表格
				,carousel = layui.carousel //轮播
				,upload = layui.upload //上传
				,element = layui.element; //元素操作
		//监听工具条
		table.on('tool(demo)', function (obj) { //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
			var data = obj.data //获得当前行数据
			  , layEvent = obj.event; //获得 lay-event 对应的值
		if(layEvent === 'userinfo'){
				var id = $(this).attr("data-id");
				$.ajax({
					url:'{:url("evaluationquestionnaire/GetAnswer")}',
					type:'post',
					data:{id:id},
					success:function(res){
						if(res.code == 200){
							str = "";
							str2 = "";
							str+= '<div style="height: 80%;overflow-y: auto;overflow-x:hidden;background-color:#e7e7e7;">';
	        	 			str+= '<div autocomplete="off" style="float: left;background-color:#e7e7e7;" class="layui-input config-input">内容</div>';
	        	 			str+= '<div autocomplete="off" style="background-color:#e7e7e7;" class="layui-input config-input">评价数量</div>';
	        				str+= '</div>';
	        				str2+= '<div class="anw">';
						   	str2+= '<ul class="anw_user">';
						   	str2+= '<li><img src=""><span></span></li>';
							str2+= '</ul>';
							str2+= '</div>';
							for(var i = 0; i < res.data.length; i++){
								str += '<div class="snw_nav"  style="border-bottom: 1px solid #e7e7e7;">';
		        	 			str += '<div autocomplete="off" style="height: 40px;float: left;" class="layui-input config-input">'+res.data[i].text+'</div>';
		        	 			str += '<div autocomplete="off" style="height: 40px;" class="layui-input config-input">'+res.data[i].num+'</div>';
		        	 			str += '<button class="layui-btn layui-btn-sm ">评价用户</button>';
		        				str += '</div>';
		        				str2+= '<div class="anw">';
 						   		str2+= '<ul class="anw_user">';
 						   		for (var a = 0; a <res.data[i].data.length; a++) {
 						   			str2+= '<li><img src="__PUBLIC__uploads/headimg/'+res.data[i].data[a].openid+'/headimg.png"><span>'+res.data[i].data[a].username+'</span></li>';
 						   		}
    							str2+= '</ul>';
    							str2+= '</div>';
							}
							$("#userinfo_data").html(str);
							$(".anw_cc").html(str2);

							layer.open({
						        title:'用户评价详情',
						        type: 1,
						        skin: 'layui-layer-rim',
						        area:  ['670px', '510px'],
						        content: $('#userinfo'),
						        btn:['确定'],
						    })	
						}else{

						}
					}
				})
			}
		});
		laypage.render({
			elem: 'pageDemo' //分页容器的id
			,count: 100 //总页数
			,limits: [2,10,20,30]
			,skin: '#1E9FFF' //自定义选中色值
			//,skip: true //开启跳页
			,jump: function(obj, first){
				if(!first){
					layer.msg('第'+ obj.curr +'页');
				}
			}
		});
	})

layui.use('form', function(){ 
}); 
	
</script>
</body>
</html>