<%@ page language="java" pageEncoding="utf-8"%><%@ page language="java" import="com.fadu.web.util.Constant" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<% 
	String token = (String)session.getAttribute(Constant.Session.TOKEN) ;
	String openid = (String)session.getAttribute(Constant.Session.DWLSD_OPENID);
%>
<c:set var="contextPath" value="${pageContext.request.contextPath}"></c:set>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta charset="utf-8">
<meta name="wap-font-scale" content="no">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no">
<title>多问</title>
<link rel="stylesheet" type="text/css" href="${contextPath}/static/weixin/cd/css/sprite.css">
<link rel="stylesheet" type="text/css" href="${contextPath}/static/weixin/cd/css/common.css">
<link rel="stylesheet" type="text/css" href="${contextPath}/static/weixin/cd/css/main.css">
<link rel="stylesheet" type="text/css" href="${contextPath}/static/weixin/common/js/upload/upload.css">
</head>
<body class="bg-lgreen">

		<div class="page">
			<header class="top bg-blue text-center fc-white fs-16 ub ub-pj">
				<a href="javascript:history.back(-1);" class="pad-l-30 pad-t-15">
					<span class="icon icon-back"></span>
				</a>
				<span>查档信息</span>
				<span class="pad-l-40 pad-r-30"></span>
			</header>
			<div class="bg-white fs-12 pad-tb-20 pad-l-25"><span id="cdTypeName"></span> • <span id="areaFullName"></span></div>
			
			<div class="mar-l-25 mar-t-20 mar-b-10 fc-xxxlgrey fs-12">服务信息</div>
			<div>
				<ul class="bg-white pos-relate list-bottom br-top1 br-bottom1 order-detail-list">
					<li class="pad-tb-20 pad-l-25 pos-relate br-bottom1"><span class="fc-xxxlgrey">接单律师</span> <span class="mar-l-15" id="remark"></span> </li>
					<li class="pad-tb-20 pad-l-25 pos-relate br-bottom1"><span class="fc-xxxlgrey">服务价格</span> <span class="mar-l-15 fc-red fs-16"><span id="price"></span>元</span> <span class="fs-12 fc-red">，政府部门收费另外实报实销</span></li>
					<li class="pad-tb-20 pad-l-25 pos-relate br-bottom1"><span class="fc-xxxlgrey">查档时间</span> <span class="mar-l-15"><span id="takeTime"></span>个工作日内</span></li>
					<li class="pad-tb-20 pad-l-25 pos-relate br-bottom1 hide"><span class="fc-xxxlgrey">所需材料</span> <span class="mar-l-15" id="spanNeedMaterial">无</span></li>
				</ul>
			</div>
			
			<div class="mar-l-25 mar-t-20 mar-b-10 fc-xxxlgrey fs-12">申请所需材料</div>
			<ul class="pad-l-15 bg-white pos-relate br-top1 br-bottom1 list-bottom-width100" id="needMaterial">					
			</ul>
						
			<div class="mar-l-25 mar-t-20 mar-b-10 fc-xxxlgrey fs-12">填写查询对象信息</div>
			<div>
				<div class="bg-white pos-relate br-top1">
					<div class="pos-relate br-bottom1">
						<div class="bg-white pos-relate list-bottom service-info-form" id="objInfoDiv">
							<ul type="12">
								<li class="pad-tb-20 pad-l-25 pos-relate br-top1 ub ub-ac"><label class="fc-xlgrey">填写查询对象<span class="mastInput">*</span>:</label> <input type="text" name="textName" class="fc-xxxlgrey pad-lr-15 ub-f1"></li>
							</ul>						
							<ul type="3">
								<li class="pad-tb-20 pad-l-25 pos-relate br-top1 ub ub-ac"><label class="fc-xlgrey">填写查询对象<span class="mastInput">*</span>:</label> <input type="text" name="textName" class="fc-xxxlgrey pad-lr-15 ub-f1"></li>
								<li class="pad-tb-20 pad-l-25 pos-relate br-top1 ub ub-ac"><label class="fc-xlgrey">户籍地址<span class="mastInput">*</span>:</label> <input type="text" name="textAddress" class="fc-xxxlgrey pad-lr-15 ub-f1"></li>
							</ul>
							<ul type="4">
								<li class="pad-tb-20 pad-l-25 pos-relate br-top1 ub ub-ac"><label class="fc-xlgrey">填写查询对象<span class="mastInput">*</span>:</label> <input type="text" name="textName" class="fc-xxxlgrey pad-lr-15 ub-f1"></li>
								<li class="pad-tb-20 pad-l-25 pos-relate br-top1 ub ub-ac"><label class="fc-xlgrey">身份证号码<span class="mastInput">*</span>:</label> <input type="text" name="textNumber" class="fc-xxxlgrey pad-lr-15 ub-f1"></li>
							</ul>
							<ul type="5">
								<li class="pad-tb-20 pad-l-25 pos-relate br-top1 ub ub-ac"><label class="fc-xlgrey">填写房产地址<span class="mastInput">*</span>:</label> <input type="text" name="textAddress" class="fc-xxxlgrey pad-lr-15 ub-f1"></li>
							</ul>
							<ul type="6">
								<li class="pad-tb-20 pad-l-25 pos-relate br-top1 ub ub-ac"><label class="fc-xlgrey">填写车牌号<span class="mastInput">*</span>:</label> <input type="text" name="textNumber" class="fc-xxxlgrey pad-lr-15 ub-f1"></li>
							</ul>					
						</div>
					</div>
					<div class="pos-relate br-bottom1">
						<a href="javascript:;" class="pad-l-25 pad-r-25 fc-xxxlgrey ub ub-ac ub-pj service-height service-remark"> <span>填写备注信息</span> <span class="icon icon-turn-right"></span>
						</a>
					</div>
				</div>
			</div>
			
			<div>
				<div class="mar-l-25 mar-t-20 mar-b-10 fc-xxxlgrey fs-12"></div>
				<div class="bg-white pos-relate br-top1 search-choose-wrapper">
					<div class="pos-relate br-bottom1 search-choose1" data-to="mask-type">
						<a href="javascript:void(0);" class="pad-l-25 pad-r-25 fc-xxxlgrey ub ub-ac ub-pj service-height search-choose1"> 
							<span>是否需要接单律师提供保证金</span> 
							<span><span class="search-option"></span><span class="icon icon-down-blue" id="maskType"></span></span>
							<input type="hidden" id="deStatus" name="deStatus"/>
						</a>
					</div>
					<!-- <div class="pos-relate br-bottom1">
						<div class="bg-white pos-relate list-bottom service-info-form" id="objInfoDiv">							
					        <ul>
								<li class="pad-tb-20 pad-l-25 pos-relate br-top1 ub ub-ac"><label class="fc-xlgrey">是否需要接单律师提供保证金</label> 
									<div class="search-choose-wrapper"  style="width: 67%">
										<div class="ub ub-ac ub-pj search-choose1" data-to="mask-type">
											<div>												
												<span class=" pad-l-25 search-option" id="maskType"></span> <input type="hidden" id="deStatus" name="deStatus"/>
											</div>
											<span class="icon icon-down-blue"></span>
										</div>	
									</div>
					        	</li>
							</ul>									
						</div>
					</div> -->
				</div>
			</div>		
											
			<div class="search-page">
				<div class="mask-page mask-type hide">
				<div class="br br-grey br-radius5 mask-box mask-box-center">
					<div class="fs-16 fc-white text-center bg-blue search-mask-top">是否需要接单律师提供保证金</div>
						<ul class="bg-white fc-black text-center list-bottom search-mask-list1" id="ulChoose">
							<li class="pos-relate br-bottom1" cdType='1'>需要</li>
							<li class="pos-relate br-bottom1" cdType='2'>不需要</li>
						</ul>
					</div>
				</div>
			</div>
			<div id="filePicker"></div>
			<a href="javascript:void(0)" class="mar-lr-25 bg-blue fc-white fs-16 br-radius5 text-center btn-service" id="applyService">申请服务</a>
			<div class="bg-lgreen remark-page hide">
				<header class="top bg-blue text-center fc-white fs-16 ub ub-pj"> <a href="javascript:;" class="pad-l-30 pad-t-15 remark-back"> <span class="icon icon-back"></span>
				</a> <span>备注查档需求</span> <span class="pad-l-40 pad-r-30"></span> </header>
				<p class="mar-l-20 mar-t-15 mar-b-10">补充查询对象信息或者备注查档要求</p>
				<textarea name="textOther" placeholder="不填写则默认查询全部档案信息" class="mar-lr-auto pad-tb-15 pad-lr-15 br br-radius5 remark-text"></textarea>
				<a href="#" class="mar-t-35 mar-lr-30 br-radius5 bg-blue fc-white text-center block btn-remark">确定</a>
			</div>
			
			<div class="mask-page delete-page hide">
				<div class="br-radius10 bg-white mask-box-center mask-confirm">
					<div class="text-center pos-relate br-bottom1 ub ub-ac ub-pc mask-confirm-content">
						<div>
							<div class="mar-b-10 fc-black fs-16 bold">提示</div>
							<div class="fc-black">是否确定删除该图片？</div>
						</div>
					</div>
					<div class="ub ub-ac fs-16 mask-confirm-btn">
						<a href="javascript:;" class="text-center fc-blue ub-f1 btn-cancel">取消</a>
						<a href="javascript:;" class="text-center fc-blue ub-f1 btn-yes">确定</a>
					</div>
				</div>
			</div>
		</div>
		<form id='form1' method="post">
			<input type="hidden" name="areaFullName" value="${areaFullName}"/>
			<input type="hidden" name="cdType" value="${cdType}"/>
			<input type="hidden" name="countyId" value="${countyId}"/>
			<input type="hidden" name="areaPriceId" />
		</form>
	
	<script src="${contextPath}/static/js/flexible.min.js"></script>
	<script type="text/javascript" src="${contextPath}/static/js/jquery-1.12.0.min.js"></script>
	<script type="text/javascript" src="${contextPath}/static/weixin/cd/js/main.js"></script>
	<script type="text/javascript" src="${contextPath}/static/js/jstorage.js"></script>
	<script type="text/javascript" src="${contextPath}/static/weixin/cd/js/util.js"></script>
  	<script type="text/javascript" src="${contextPath}/static/weixin/common/js/toast.js"></script>
	
	<script type="text/javascript" src="${contextPath}/static/weixin/common/js/upload/webuploader.min.js"></script>
	<script type="text/javascript" src="${contextPath}/static/weixin/common/js/upload/uploader.js"></script>
	<script type="text/javascript" src="${contextPath}/static/js/uuid.js"></script>
	<script type="text/javascript" src="https://gosspublic.alicdn.com/aliyun-oss-sdk-4.3.0.min.js"></script>
	
	<script type="text/javascript">
		var baseUrl = '<%=com.fadu.app.util.AppConfig.url_duowenapp_b%>';
		var openid = '<%=openid==null?"":openid%>';
		var token = '<%=token==null?"":token%>';		
		var countyId = '${countyId}'!=''?'${countyId}':sessionStorage.getItem('countyId');
		var cdType = '${cdType}'!=''?'${cdType}':sessionStorage.getItem('cdType');
		var areaFullName = '${areaFullName}'!=''?'${areaFullName}':sessionStorage.getItem('addr');
		
		$(document).ready(function() {		
			$("#objInfoDiv").children().each(function(){
				if($(this).attr("type").indexOf(cdType)>=0){
					$(this).show();
				}else{
					$(this).hide();
				}
			});			
			postData(baseUrl + '/B/android', JSON.stringify({'actionCode':'B601','codeId':countyId,'type':cdType}), initCd, postDataDefaultErrorCallback);
			$("#applyService").bind('click', applyService);		
			
			$("#cdTypeName").text(getOrderTypeName(cdType));
			$("#areaFullName").text(areaFullName);
			
			//弹出选择保证金的框
			$('.search-choose-wrapper .search-choose1').click(function() {
				var _this = $(this);
				var to = _this.attr('data-to');
				$('.'+to).fadeIn().removeClass('hide');
			});			
			$('#ulChoose li').click(function(){
				var _this = $(this);
				var type = $(this).text();
				var oldType= $('.search-choose-wrapper .search-choose1[data-to="mask-type"]').find('input').val();
				$('.search-choose-wrapper .search-choose1[data-to="mask-type"]').find('.search-option').text(type);
				$('.search-choose-wrapper .search-choose1[data-to="mask-type"]').find('input').val(type);
				_this.parent().parent().parent().fadeOut().addClass('hide');
				sessionStorage.setItem('deStatus', type);
			});
		});
		
		var cdMaterNum;
		//申请服务
		function initCd(data){
			if(data && data.areaPriceId){
				$("#remark").html(data.remark);
				$("#price").html(data.price);
				$("#takeTime").html(data.takeTime);
				$("[name=areaPriceId]").val(data.areaPriceId);
				
				cdMaterNum = data.cdMaterials.length;
				var html = "";
				if(data.cdMaterials && data.cdMaterials.length>0){
					for(var i=0; i<data.cdMaterials.length;i++){
						html += getUploadHtml(data.cdMaterials[i].id, data.cdMaterials[i].name, i+1);
					}
					$("#needMaterial").html(html);	
				}else{
					$("#spanNeedMaterial").parent().removeClass("hide");
					$("#needMaterial").hide();
					$("#needMaterial").prev().hide();
				}							
				//radio多
				$('.radio').click(function(){
					radioClick(this);
				});
				
				//初始化上传图片html
				$('.application-material-title').click(function(){
					materialClick(this);
				});
			}else {
 				toast1.alert('该区域尚未开通服务！');
			}
		}	
		
		//申请服务
		function radioClick(obj){
			var _this = $(obj);
			var radio = _this.attr('data-radio');
			var value = _this.attr('data-value');
			if (!_this.hasClass('on')) {
				_this.addClass('on');
				$('input[name='+radio+']').val(value);
				radio_if = false;
			}else{
				_this.removeClass('on');
				$('input[name='+radio+']').val('');
				radio_if = true;
			}
		}
		
		//申请服务
		function applyService(){				
			var attachBeans = [];
			var areaPriceId = $("[name=areaPriceId]").val();
			var textName = "";
			var textAddress = "";
			var textNumber = "";
			var deStatus = $("#deStatus").val();
			$("#objInfoDiv").children().each(function(){
				if($(this).attr("type").indexOf(cdType)>=0){
					if(cdType==1||cdType==2){
						textName = $(this).find("[name=textName]").val();
					}else if(cdType==3){
						textName = $(this).find("[name=textName]").val();
						textAddress = $(this).find("[name=textAddress]").val();
						textNumber = $(this).find("[name=textNumber]").val();						
					}else if(cdType==4){
						textName = $(this).find("[name=textName]").val();
						textNumber = $(this).find("[name=textNumber]").val();						
					}else if(cdType==5){
						textAddress = $(this).find("[name=textAddress]").val();						
					}else if(cdType==6){
						textName = $(this).find("[name=textNumber]").val();						
					}
				}
			});			
			
			var flag = true;
			//判断是否已经上传附件
			$("#needMaterial").children().each(function(){
				if($(this).find(".uploader-pic-box").html()==""){
					toast1.alert('请上传'+$(this).text().substring(3, $(this).text().length));
					flag = false;
					return false;
				}
			});
			if(!flag){
				return;
			}
			
			if(cdType==1||cdType==2){
				if(textName==null||textName==""){
					toast1.alert('请输入查询对象!');
					return false;
				}
			}else if(cdType==3){
				if(textName==null||textName==""){
					toast1.alert('请填写查档对象!');
					return false;
				}	
				if(textAddress==null||textAddress==""){
					toast1.alert('请填写户籍地址!');
					return false;
				}
			}else if(cdType==4){
				if(textName==null||textName==""){
					toast1.alert('请输入查询对象！');
					return false;
				}	
				if(textNumber==null||textNumber==""){
					toast1.alert('请输入身份证号码！');
					return false;
				}
			}else if(cdType==5){
				if(textAddress==null||textAddress==""){
					toast1.alert('请输入房产地址!');
					return false;
				}					
			}else if(cdType==6){
				if(textName==null||textName==""){
					toast1.alert('请输入车牌号码!');
					return false;
				}			
			}
			
			if(deStatus=="需要"){
				deStatus = 1;
			}else if(deStatus=="不需要"){
				deStatus = 0;
			}else{
				toast1.alert('请选择是否需要保证金!');
				return false;
			}			
			toast1.loadStart('正在提交您的查档订单...');	
			$("#applyService").unbind('click', applyService);	
						
			//上传文件
			$.ajax({
				type : "POST",
				url : appServer,
				dataType : "jsonp",
				async : true,
				success : function(ossConfig) {
					console.log(ossConfig);
					var client = new OSS({
						region : region,
						secure: true,//https必须
						accessKeyId : ossConfig.AccessKeyId,
						accessKeySecret : ossConfig.AccessKeySecret,
						stsToken : ossConfig.SecurityToken,
						bucket : bucket
					});
								
					for(var i=0; i<attachs.length; i++){					
						var file = attachs[i].file;
						var fileName = UUIDjs.create().hex;
						var fileType = getFileType(file.name);
						var date = new Date();
						var key = "cd/" + date.getFullYear() + "/" + (date.getMonth()+1) + "/" + fileName + i + "." + fileType;
						attachs[i].key = key;
						client.attachs = attachs;
						client.multipartUpload(key, attachs[i].file, {progress : progress}).then(
							function(res) {									
								var aj = {};
								var tAry = res.name.split("/");
								aj.name =  tAry[tAry.length-1];
								aj.path = res.name;
								aj.suffix = fileType;
								for(var k=0; k<client.attachs.length; k++){
									if(res.name==attachs[k].key){
										aj.id = attachs[k].mid;
										break;
									}
								}
								attachBeans.push(aj);
								if(attachBeans.length>=(attachs.length)){	
									console.log(attachBeans);
									var b610Req = {
										actionCode:'B610',
										orderType: parseInt(cdType),
										areaFullName : areaFullName,
										cdType : parseInt(cdType),
										countyId : countyId,
										areaPriceId : areaPriceId,
										textName : textName,
										textAddress : textAddress,
										textNumber : textNumber,
										textOther : $("textarea[name=textOther]").val(),
										operateType:1,
										bzj:deStatus,
										attachs : attachBeans,
										token:token	
									}
									//提交订单
									postData(baseUrl + '/B/android', JSON.stringify(b610Req), b610Succ, postDataDefaultErrorCallback);
								}							
							}
						);					
					}				
				},
				error : function(data) {
					console.log(data);
				}
			});
		}
		
		function b610Succ(data){
			if(data){
				if(data.success){					
					toast1.loadFinish('申请已提交，请等待审核！');							
					setTimeout(function(){
						window.location.href=baseUrl + "/web/cd/toPlatConfirm?orderId="+data.orderId + "&prePage=serviceInfo";
					},2800);
				}else{
					toast1.alert(data.message);
				}
			}else{
				toast1.alert("网络异常！");
			}
		}
		
		function getUploadHtml(mid, name, i){
			var html = '<li class="pos-relate br-bottom1">';
			html+='<div class="pad-r-15 pad-tb-20 ub ub-ac ub-pj touchact application-material-title">';
			html+=		'<div class="clear">';
			html+=			'<span class="pull-left fc-orange icon-top2">*</span>';
			html+=			'<span class="pull-left">' + i + '.'+name+'</span>';
			html+=		'</div>';
			html+=		'<span class="icon icon-down-blue2"></span>';
			html+=	'</div>';
			html+=	'<div class="pos-relate br-top1 pad-tb-15 hide">';
			html+=		'<div class="pad-r-15 scroll-y uploader-box">';
			html+=			'<div class="uploader-pic-box"></div>';
			html+=			'<div class="uploader-input-box apply-info' + i + ' hide"  mid="'+mid+'"></div>';
			html+=			'<div class="user-upload-img btn-add-photo"></div>';
			html+=		'</div>';
			html+=	'</div>';
			html+='</li>';
			return html;
		}
		
		//toast
		var toast1 = new toast({
	        pos:'center'
	    });	
	</script>
	
	<!-- 文件上传处理 -->
	<script type="text/javascript">
	var attachs = [];// 获取到选择的文件， 为了支持阿里云文件上传
	$(document).ready(function() {	
    	var myUploader = uploader({
    		isCrop:false
    	});
    	$('.page').on('click','.btn-add-photo',function(){
            var _this = $(this);
            $('.uploader-box').removeClass('active');
            _this.parent().addClass('active');			
			$('#filePicker input').click();  //触发点击注册了webUploader的input	
			
			$('#filePicker input').on("change", function(){//添加到上传
				if (this.files && this.files[0]){	
					var attach = new Object()
            		attach.file = this.files[0];
        			window.setTimeout(function(){        				
        				attach.col = $(".cur-upload-input").index();
        	    		attach.row = $(".cur-upload-input").parent().parent().parent().parent().index();
        	    		attach.mid= $(".cur-upload-input").parent().attr("mid");
        	    		attachs.push(attach);
        	    		console.log(attachs);
        			}, 200);
        		}				
			});
    	});    	
    	
    	var _del;
    	//删除图片
    	$('.page').on('click', '.uploader-pic', function() {
    		var _this = $(this);
    		_del = _this;
    		$('.delete-page').fadeIn(400).removeClass('hide');
    		
    		$('.delete-page .btn-cancel').click(function(event) {
    			$('.delete-page').fadeOut(400).addClass('hide');
    			event.stopPropagation();
    		});
    	});
    	
    	$('.delete-page .btn-yes').on("click",function(event) {
    		var index = _del.index();
    		var input = _del.parent().parent().find('.uploader-input-box .upload-input').eq(index);
			$('.delete-page').fadeOut(400).addClass('hide');
			var num = _del.parent().find('.uploader-pic').length;
			if (num == 30) {
				_this.parent().parent().find('.btn-add-photo').removeClass('hide');
			}
			deleteClick(_del);    		
			_del.remove();
			input.remove();
			event.stopPropagation();	
		});
    });
	
	//从附件里面删除
	function deleteClick(_del){
		var col = _del.index();
		var row = _del.parent().parent().parent().parent().index();		
		console.log( "col:" + col + "   row:" + row + "  " + _del);
		var delIndex = -1;
		for(var i=0; i<attachs.length; i++){
			if(attachs[i].row==row && attachs[i].col==col){
				delIndex = i;
			}else{
				if(delIndex!=-1 && i>delIndex){//之后的元素 col 减1
					if(attachs[delIndex].row == attachs[i].row){
						attachs[i].col = attachs[i].col-1;	
					}
				}
			}
		}
		attachs.splice(delIndex, 1);
		console.log(attachs);
	}
	
	appServer = baseUrl + '/oss/token?name=b';
	bucket = '${oss_bucket_b}';
	region = 'oss-cn-shenzhen';
	Buffer = OSS.Buffer;
	OSS = OSS.Wrapper;
	STS = OSS.STS;
	
	//根据文件名 获取后缀
	function getFileType(fileName) {
		var ldot = fileName.lastIndexOf('.')
		if (ldot >= 0)
			return fileName.substring(ldot + 1);
		else
			return "";
	}
	
	var progress = function(p) {//上传成功的进度条
		return function(done) {
			done();
		};
	};
	</script>
	
</body>
</html>