<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
		<link rel="stylesheet" type="text/css" href="../../css/app.css" />
		<link rel="stylesheet" type="text/css" href="../../css/aui.2.0.css" />
		<link rel="stylesheet" type="text/css" href="../../css/imgbrowser.css" />
		<link rel="stylesheet" type="text/css" href="../../css/mui.min.css" />
		<style type="text/css">
			.history {
				margin: 10px;
				background-color: #ffffff;
				display: block;
				color: #666666;
			}

			.text {
				padding: 10px;
				font-size: 0.7rem;
				line-height: 1rem;
			}

			.img {
				padding: 0px 7px;
				display: -webkit-flex;
				-webkit-flex-wrap: wrap;
				display: flex;
				flex-wrap: wrap;
			}

			.pic {
				overflow: hidden;
				width: 33%;
			}

			.pic img {
				padding: 3px 3px;
				width: 100%;
				height: auto;
			}

			.write {
				padding: 0 10px;
				padding-bottom: 0.5rem;
			}

			span {
				font-weight: bold;
			}

			.ms-controller,
			[ms-controller] {
				display: none
			}
			#replay-btn{
				background-color: #FFF;
				border:1px solid #ddd;
				height:25px;
				line-height:15px;
				font-size:16px;
			}
      .arrow{ position:absolute; width:20px; height:20px; top:-20px; left:20px; }
      .arrow *{ display:block; border-width:10px; position:absolute; border-style:solid dashed dashed dashed; font-size:0; line-height:0; }

      .arrow span{border-color:transparent transparent #F3F3F5; top:0;}
      .leftlike{display:block;position:absolute;left:0;height:100%;width:75px;}
			.rightreplay{display:block;position:absolute;left:75px;height:100%;width:75px;}
			.likereplay{display:none;height:40px;width:150px;position:relative;right:100px;
				background:url(../../image/likeplay.png) center; background-size:100% 100%;
				bottom:10px;
			}
			.clicklike{margin-right:5px;color:#576B95;font-size:12px;}
		</style>
	</head>

	<body ms-controller="tq_workreport_main" style="background:#fff" id="like">
		<div class="aui-content" style="padding-bottom: 40px;">
			<div tapmode ms-click="sel_type()" class="aui-text-center aui-col-xs-3 aui-font-size-12 ming-text-app" style="line-height: 2.2rem;background-color: #ebeced;">
				{{type_str}}
			</div>
			<div class="aui-col-xs-9">
				<div class="aui-searchbar" id="search">
					<div class="aui-searchbar-input aui-border-radius">
						<i class="aui-iconfont aui-icon-search"></i>
						<form action="javascript:doSearch();">
							<input type="search" placeholder="请输入关键字" id="search-input">
						</form>
					</div>
					<div class="aui-searchbar-cancel"  tapmode>取消</div>
				</div>
			</div>
		</div>
		<div class="history aui-clearfix" ms-repeat="lists" ms-attr-id="givelike{{el.id}}">
			<div class="text" ms-html="el.content"></div>
			<div class="img">
				<div class="pic" ms-repeat-pic="el.pic_list">
					<img ms-attr-lazy="pic.logo" src="../../image/default.png" ms-attr-data-preview-src="pic.path" ms-attr-data-preview-group="1" ms-attr-data-content="el.nickname">
				</div>
				<div class="pic" ms-if="el.video != '' " tapmode ms-click="fnPlay(el.video)">
					<img src="../../image/video_bg.png">
				</div>
			</div>
			<div class="write" style="border-bottom:1px solid #ddd; width:100%;">
				<div>
					<p class="aui-font-size-12" ms-text="el.nickname"></p>
					<p class="aui-font-size-12" ms-text="el.map_addr"></p>
					<p class="aui-font-size-12">{{el.create_time*1000|date("yyyy-MM-dd HH:mm")}}
						<span class="aui-pull-right aui-text-warning aui-font-size-14 likebtn"  style="display:block;height:18px;width:80px;position:relative;z-index:10;cursor:pointer">
							<img  style="float:right;height:18px;width:30px;"src="../../image/LikeComment.png"/>
							<span class="likereplay" name="0">
								<span class="leftlike" tapmode ms-click="replaylikebtn(el)"></span>
								<span class="rightreplay" tapmode ms-click="sub_dianping(el,$index)"></span>
							</span>
					</span>
						<!-- tapmode ms-click="sub_dianping(el.id)" -->
					</p>
				</div>

				<div  ms-if="el.givelike.length>0 || el.report_review.length>0 ||el.show == 1" class="aui-padded-t-10" style="background:#F3F3F5;position:relative;margin-top:20px;">
					<!-- <div class='{{$index}} aaa'></div> -->
					<div class="arrow">
						<!-- <em></em> -->
						<span></span>
					 </div>
					 <div ms-if="(el.givelike && el.givelike.length>0)||el.showgivelike" style="width:100%" >
						 <span style="margin-left:10px;margin-right:5px"><img style="height:15px;width:15px;" src="../../image/xinlike.png"/></span>
	 						<span ms-repeat-like="el.givelike" class="mygivelike">
	 							 <span class="aui-font-size-12  clicklike">{{like.nickname}}</span>
	 						</span>
	 				</div>
					<div ms-if="(el.report_review && el.report_review.length>0)||el.showreview">
					<div ms-repeat-dianping="el.report_review" class="aui-padded-l-10 aui-padded-r-10">
						<!-- <p class="aui-font-size-12" ms-click="replay(dianping.uid,dianping.id)">{{dianping.content}}</p> -->
						<p ms-click="replay(dianping,$index,$outer.$index)" class="aui-font-size-12" style="line-height:25px;">
							<span class="aui-font-size-12" style="color:#576B95;font-size:12px;">
								<span ms-if="dianping.rpoint=='G'">（优）</span>
								<span ms-if="dianping.rpoint=='H'">（合格）</span>
								<span ms-if="dianping.rpoint=='L'">（差）</span>
								{{dianping.nickname}}</span>: {{dianping.content}}
							<!-- <span class="aui-pull-right aui-font-size-12">{{dianping.create_time*1000|date("yyyy-MM-dd HH:mm")}}</span> -->
						</p>
						<div ms-if="dianping.replay!=''">
                   <div ms-repeat-replay="dianping.replay" class="aui-padded-r-10" ms-click="replay(dianping,$index,$outer.$index)">
										 <!-- <p class="aui-font-size-12" ms-click="replay(dianping.uid,dianping.id)">{{replay.content}}</p> -->
										 <div class="aui-font-size-12" style="display:block;line-height:25px;width:100%;min-height:25px;" ms-click="replays(dianping,$index,$outer.$index,$outer.$outer.$index)">
											<span style="color:#576B95;font-size:12px">{{replay.fname}}</span>回复<span style="color:#576B95;font-size:12px">{{replay.tname}}</span>:{{replay.content}}
										   <!-- <span class="aui-pull-right aui-font-size-12">{{replay.create_time*1000|date("yyyy-MM-dd HH:mm")}}</span> -->
									   </div>
										 <!-- <div>
										   <span class="aui-pull-right aui-font-size-12">{{replay.create_time*1000|date("yyyy-MM-dd HH:mm")}}</span>
										 </div> -->
									 </div>
						</div>
					</div>
				</div>
				</div>
			</div>
		</div>
		<div ms-if="lists.length==0&&hasok==1" class="aui-content aui-text-center" style="padding-top: 5rem;">
			没有相关内容
		</div>
	</body>
	<script type="text/javascript" src="../../script/api.js"></script>
	<script type="text/javascript" src="../../script/zepto.js"></script>
	<script type="text/javascript" src="../../script/avalon.js"></script>
	<script type="text/javascript" src="../../script/common.js"></script>
  <script type="text/javascript" src="../../script/ming-zoom.js"></script>
	<script type="text/javascript" src="../../script/ming-imgBrowser.js"></script>
	<script type="text/javascript">

		var searchBar = document.querySelector(".aui-searchbar-input");




		if(searchBar) {
			searchBar.onclick = function() {
				document.querySelector(".aui-searchbar-cancel").style.marginRight = 0;
			}
		}
		document.querySelector(".aui-searchbar-cancel").onclick = function() {
			this.style.marginRight = "-" + this.offsetWidth + "px";
			document.getElementById("search-input").value = '';
			document.getElementById("search-input").blur();
		}

		function fnPlay(urls) {
			//console.log(urls)
			api.openVideo({
				url: urls
			});
		}

		function doSearch() {
			tq_workreport_main.skey = '';
			tq_workreport_main.staffing_id = '';
			var searchValue = document.getElementById("search-input").value;
			if(searchValue == '') {
				toast('请输入关键字');
			} else {
				tq_workreport_main.skey = searchValue;
				tq_workreport_main.lists = [];
				tq_workreport_main.fnhislist(2)
			}
		}

		apiready = function() {
			init();
			tq_workreport_main.get_type();

		};

		function refash() {

			api.refreshHeaderLoading();
		}

		function init() {
			//工作直通车红点刷新
			api.sendEvent({
					name: 'redStartevent',
					extra: {
							index: 1
					}
			});
			var obj = $api.getStorage('workReport')
			//console.log(JSON.stringify(obj));
			tq_workreport_main.xiangmu_id = obj.report_group
			tq_workreport_main.type = obj.type
      //console.log(obj.type);
			fnInitPullRefresh(function(ret) {
				tq_workreport_main.hasok = 0;
				tq_workreport_main.lists = [];
				tq_workreport_main.page = 1;
				tq_workreport_main.fnhislist(1);
			})
			fnInitScrollToBottom(function(ret) {
					tq_workreport_main.page++;
			  	tq_workreport_main.fnhislist(2);
			});
			api.refreshHeaderLoading();
		}
		avalon.ready(function() {
			window.tq_workreport_main = avalon.define({
				$id: 'tq_workreport_main',
				page: 1,
				lists: [],
				type_list: [],
				skey: '',
				type: '',
				type_str: '类型筛选',
				xiangmu_id: '',
				hasok:0,
				fnhislist: function(type) {
						//console.log(tq_workreport_main.xiangmu_id);
					//					console.log($api.getStorage('token'))
					var obj = {
						token: $api.getStorage('token'),
						staffing: tq_workreport_main.staffing_id,
						page: tq_workreport_main.page,
						skey: tq_workreport_main.skey,
						type: tq_workreport_main.type,
						report_group: tq_workreport_main.xiangmu_id
					};
					get_data('/api/report/lists', 'post', {
						token: $api.getStorage('token'),
						staffing: tq_workreport_main.staffing_id,
						page: tq_workreport_main.page,
						skey: tq_workreport_main.skey,
						type: tq_workreport_main.type,
						report_group: tq_workreport_main.xiangmu_id
					}, function(ret) {
						console.log(JSON.stringify(ret))
						if(ret.msg == '您没有权限查看') {
							toast(ret.msg)
						}

						api.refreshHeaderLoadDone();
						if(ret.status == 1) {

							if(type == '1') {
								tq_workreport_main.lists = ret.data.list

							}
							if(type == '2') {
								ret.data.list.forEach(function(el) {
									tq_workreport_main.lists.push(el);
								})
							}
						} else {
							tq_workreport_main.page--;
						}
						tq_workreport_main.hasok = 1;
						ming.previewImage();
					});
				},
				get_type: function() {
					get_data('/api/Report/reportGuide', 'post', {
						token: $api.getStorage('token')
					}, function(ret) {
						//console.log(JSON.stringify(ret))
						tq_workreport_main.type_list = ret.data.report_type
					})
				},
				sel_type: function() {
					var ReportType = ['全部']
					for(var i = 0; i < tq_workreport_main.type_list.length; i++) {
						ReportType.push(tq_workreport_main.type_list[i].name)
					}
					//console.log(JSON.stringify(ReportType));
					api.actionSheet({
						title: '请选择工作类型',
						cancelTitle: '取消',
						buttons: ReportType
					}, function(ret, err) {
						var index = ret.buttonIndex;
						if(index > ReportType.length) {
							return;
						}
						tq_workreport_main.type_str = ReportType[index - 1]
						if(index == 1) {
							tq_workreport_main.type = ''
						} else {
							tq_workreport_main.type = index - 1
						}
						refash()
					});
				},
				sub_dianping: function(el,index) {

					$api.setStorage('report_id', el.id)
					$api.setStorage('report_review', el)
					$api.setStorage('report_index', index)
					api.openFrame({
						name: 'reply',
						url: './reply.html?btn=review',
						bounces: false,
						rect: {
							x: 0,
							y: 0,
							w: 'auto',
							h: 'auto'
						},
						vScrollBarEnabled: false
					})
				},
        replay: function(d,index,pindex){

					$api.setStorage('report_uid', d.uid)
          $api.setStorage('report_commentid', d.id)
					$api.setStorage('report_relpay', d);
					$api.setStorage('vpindex', index);
					$api.setStorage('pindex', pindex);
					$api.setStorage('replay_index','-1');
					api.openFrame({
						name: 'reply',
						url: './reply.html?btn=replay',
						bounces: false,
						rect: {
							x: 0,
							y: 0,
							w: 'auto',
							h: 'auto'
						},
						vScrollBarEnabled: false
					})
				},
				replays: function(d,index,vpindex,pindex){

					$api.setStorage('report_uid', d.replay[index].fid)
          $api.setStorage('report_commentid', d.id)
					$api.setStorage('report_relpay', d);
					$api.setStorage('replay_index', index);
					$api.setStorage('vpindex', vpindex);
					$api.setStorage('pindex', pindex);
					api.openFrame({
						name: 'reply',
						url: './reply.html?btn=replay',
						bounces: false,
						rect: {
							x: 0,
							y: 0,
							w: 'auto',
							h: 'auto'
						},
						vScrollBarEnabled: false
					})
				},
				replaylikebtn:function(el){

					get_data('/api/Report/givelike', 'post', {
						token: $api.getStorage('token'),
						report_id: el.id
					}, function(ret) {
            //console.log(JSON.stringify(ret))
						if(ret.status=="-1"){
							 api.toast({
							  	msg: '您赞过'
							 })
					    }else{
								var userinfo = $api.getStorage('userinfo');
								el.show = true;
								el.showgivelike = 1;
								el.givelike.push({'nickname':userinfo.nickname});
								// console.log(JSON.stringify(el))
								// var ht = '<span class="aui-font-size-12  clicklike">'+userinfo.nickname+'</span>';
								// $("#givelike"+el.id).find(".mygivelike").append(ht);
                 ///refash();
					  }
					})
				},
				showreview: function(el){
					var userinfo = $api.getStorage('userinfo');
					el.nickname = userinfo.nickname;
						var r = $api.getStorage('report_review');
						var index = $api.getStorage('report_index');
						// console.log(JSON.stringify(r));
						el.showreview = 1;
						el.uid = userinfo.uid;
						el.replay = [];
						// r.report_review.push(el);
						tq_workreport_main.lists[index].report_review.push(el);

						console.log(JSON.stringify(tq_workreport_main.lists[index]));
						// console.log(JSON.stringify(tq_workreport_main.lists));
				},
				showreplay: function(el){
					var pindex = $api.getStorage('pindex');
					var vpindex = $api.getStorage('vpindex');
					var index = $api.getStorage('replay_index');

					tq_workreport_main.lists[pindex].report_review[vpindex].replay.push(el);
				}
			})
			avalon.scan();
		})
	function showreview(){
		var obj = {
			content: $api.getStorage('content'),
			id: $api.getStorage('dpid'),
			rpoint: $api.getStorage('rpoint'),
		}
		console.log(JSON.stringify(obj));
		tq_workreport_main.showreview(obj);
	}
	function showreplay(){
		var el = $api.getStorage('report_relpay');
		// console.log(JSON.stringify(el));
		var pindex = $api.getStorage('pindex');
		var vpindex = $api.getStorage('vpindex');
		var index = $api.getStorage('replay_index');
		// console.log(vpindex);
		// console.log(index);
		var userinfo = $api.getStorage('userinfo');

		// "fname":"15122485178","fid":4920,"tname":"柴凤","content":"刚刚好回家"
		var obj = {
			fid:$api.getStorage('report_uid'),
			tname:el.replay[index]?el.replay[index].fname:el.nickname,
			content: $api.getStorage('rpcontent'),
			fname: userinfo.nickname
		}
		// console.log(JSON.stringify(obj));
		tq_workreport_main.showreplay(obj);
	}
   $("#like").on('click','.likebtn',function(){
		          $(".likebtn").children('.likereplay').css('display','none');
			        var flag = $(this).children('.likereplay').attr('name');
							if(flag=="0"){
			            $(this).children('.likereplay').css('display','block');
									$(this).children('.likereplay').attr('name','1');
							 }else{
								  $(this).children('.likereplay').attr('name','0');
								  $(this).children('.likereplay').css('display','none');
							 }
	 })
	 $("#like").on('click','.leftlike',function(){
              $(".likebtn").children('.likereplay').css('display','none');
	 })
	 $("#like").on('click','.rightreplay',function(){
             $(".likebtn").children('.likereplay').css('display','none');
	 })
	</script>

</html>
