<%@ page contentType="text/html;charset=UTF-8"%>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<html>
<head>
<meta name="decorator" content="base" />
<meta name="viewport" content="width=device-width,initial-scale=0.3,user-scalable=yes" />
<title>档案地图</title>
<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=727b25e7366ab5015225754e8ee00fef&plugin=AMap.Autocomplete,AMap.PlaceSearch"></script>
<style>
	.markDetail1 {
	    width: 250px;
	    height: auto;
	    max-height: 135px;
	    border: 1px solid #ed710b;
	   /*  position: absolute; */
	    top: 100px;
	    background: #fff;
	    border-radius: 5px;
	    /*overflow: hidden;*/
	}
	.markDetail1 > em:after, .markDetail1 > em:before {
	    display: block;
	    content: "";
	    border-width: 7px 7px 7px 7px;
	    border-style: solid;
	    border-color: transparent transparent #fff transparent;
	    position: absolute;
	    left: 120px;
	    top: -14px;
	    z-index: 1000;
	}
	
	.markDetail1 > em:before {
	    border-color: transparent transparent #ed710b transparent !important;
	    top: -15px;
	    left: 120px;
	}
	
	.markDetail1 > p {
	    font-weight: bold;
	    color: #666;
	    overflow: hidden;
	    margin: 0;
	    margin-top: 5px;
	}
	
	.markDetail1 > p > span {
	    float: left;
	    text-align: left;
	    font-size: 12px;
	    padding-left: 5px;
	    box-sizing: border-box;
	    text-overflow: ellipsis;
	    overflow: hidden;
	    height: 22px;
	    word-wrap: normal;
	}
	
	.markDetail1 > p > span:first-of-type {
	    width: 25%;
	}
	
	.markDetail1 > p > span:nth-child(2) {
	    width: 45%;
	}
	
	.markDetail1 > span {
	    font-size: 12px;
	    color: #666;
	    padding-left: 8px;
	}
	
	.markDetail1 > ul {
	    padding: 0 5px;
	    height: 50px;
	    overflow-y: auto;
	    border-radius: 0 0 5px 0;
	}
	
	.markDetail1 > ul > li {
	    height: 25px;
	    font-size: 12px;
	    color: #666;
	    line-height: 25px;
	}
</style>
</head>
<body>
	<div class="bg-body pd-0">
	<div id="container" class="" style="width: 100%;height: 100%">
		<div class="saleSearch mapSearch" style="z-index: 1000;">
			<div class="maps f-l">
				<form class="commodityClass" id="searchForm">
					<div class="chooseDate">
						<h1 class="f-l">销售时间：</h1>
						<div>
							<input type="text" onfocus="WdatePicker({startDate:'%y-%M-%d ',dateFmt:'yyyy-MM-dd ',maxDate:'#F{$dp.$D(\'placingOrderTimeMax\')}'})" id="placingOrderTimeMin" name="placingOrderTimeMin">
							<b></b>
						</div>
						<span class="f-l ml-10 mr-10">至</span>
						<div>
							<input type="text" onfocus="WdatePicker({startDate:'%y-%M-%d ',dateFmt:'yyyy-MM-dd ',minDate:'#F{$dp.$D(\'placingOrderTimeMin\')}'})" id="placingOrderTimeMax" name="placingOrderTimeMax">
							<b></b>
						</div>
					</div>
					<div class="saleName">
						<h1>商品名称：</h1>
						<input type="text" name="goodName" class="bgInput">
					</div>
					<div class="ml-10 rUser">
						<h1>客户信息：</h1>
						<input type="text" name="selectName" class="bgInput">
					</div>
					<div class="ml-10">
						<a class="btn1 " id="searchs" >查询</a>
						<a class="btn4 ml-10 mr-5" type="reset" id="resets" >重置</a>
					</div>
					<p class="f-r up">
						<b></b>
						收起
					</p>
				</form>
			</div>
			<div class="packUp f-l">
				<img src="" alt="">
			</div>
		</div>
		</div>
		   
	</div>
	

<script type="text/javascript" >
    $('.up').click(function () {
        $(".maps").animate({
            width:'0px',
            opacity:'0',
            overflow:'hidden'
        },500);
        $('.packUp').animate({
            width:'50px',
            opacity:'1',
            overflow:'visiablie'
        },500);
    });
    $('.packUp').click(function () {
        $(".maps").animate({
            width:'100%',
            opacity:'1',
            overflow:'visiablie'
        },500);
        $('.packUp').animate({
            width:'50px',
            opacity:'0',
            overflow:'hidden'
        },500);
    });
    

    
    /*定位*/
			var markers = [];
			var infoWindow = new AMap.InfoWindow({}); //信息窗体
			var defaultLayer1 = new AMap.TileLayer({
				textIndex : 15
			});
			var map = new AMap.Map('container', {
				resizeEnable : true,
				layers : [ defaultLayer1,//默认图层
				// traffic1,//实时交通图层
				new AMap.Buildings() ],
				zoom : 15,
				zooms:[13,15]
			//地图显示的缩放级别
			/*  center: [116.397428, 39.90923] */
			});

			/*异步加载多个插件的方法AMap.plugin*/
			AMap.plugin([ "AMap.OverView", "AMap.CircleEditor", "AMap.Scale", "AMap.Geocoder", "AMap.ToolBar" ], function() {//位于地图左上角，比列缩放等小工具
				view1 = new AMap.OverView({//地图右下角显示一个地图简略的概览
					visible : true
				//初始化隐藏鹰眼
				});
				map.addControl(view1);
				tool = new AMap.ToolBar({
					offset : new AMap.Pixel(10, 77),
					visible : true
				//初始化隐藏鹰眼 

				});
			//	map.addControl(tool);

				map.addControl(new AMap.Scale());//比列尺

				geocoder = new AMap.Geocoder({
					city : "010"//城市，默认：“全国”
				});
				var marker4 = new AMap.Marker({
					visible : false,//点标记不可见
					map : map,
					bubble : true
				});
				map.on('click', function(e) {
					marker4.setPosition(e.lnglat);
					geocoder.getAddress(e.lnglat, function(status, result) {
						if (status == 'complete') {
							document.getElementById('input1').value = result.regeocode.formattedAddress;
							document.getElementById('input2').value = e.lnglat;
						}
					})
				})

			});

			$(function() {
                checkVIP('${ctx}');

				$('#pngfix-nav-btn', parent.document).click(function() {
					//3.给定一个时间点
					setTimeout(function() {
						//4.再次执行全屏
						layer.restore(full_idx);
					}, 200);
				});
				/* var address = '安徽省合肥市蜀山区五里墩街道汉庭酒店(合肥清溪路海巢店)黎阳嘉苑';//地图中心点显示

				var address1 = '安徽省合肥市庐阳区逍遥津街道安徽省委大院'; */
				getLoc('${address}', function() {
					map.panTo(this);
					test();
				}, function() {
					getLoc('${address}', function() {
						map.panTo(this);
						test();
					}, function() {
						test();
					});
				});
			})

			function getLoc(addr, ret, fail) {
				$.ajax({
					type : "POST",
					url : "${ctx}/userAnalyze/getLocations",
					data : {
						address : addr
					},
					success : function(data) {
						if (data && data.length > 0) {
							ret.call(data);
						} else {
							fail.call();
						}
					},
					error : function() {
						fail.call();
					}
				});
			}

			function test() {
				var selectName = $("#selectName").val();
				$.ajax({
						type : "POST",
						url : "${ctx}/userAnalyze/getUserMark",
						data : $("#searchForm").serialize(),
						dataType : 'json',
						success : function(result) {
							map.remove(markers);
							var lnglats = result;
							
							for (var i = 0, marker; i < lnglats.length; i++) {
								var timestamp = (new Date()).valueOf();
								var createTime = lnglats[i].columns.placing_order_time;
								var gap = (timestamp - createTime) / (1000 * 60);
								var img;
								var htmlContent;
								htmlContent =
						            '<img src="${ctxPlugin}/img/red-flag.png" alt=""/>';
					            if(!isBlank(lnglats[i].columns.longitude)){
					            	marker = new AMap.Marker({
										position : [ lnglats[i].columns.longitude, lnglats[i].columns.latitude ],
										//position : [ 117, 30 ],
										map : map,
										content : htmlContent,
										clickable : true
									});
									markers.push(marker);
									marker.setTitle(lnglats[i].columns.customer_name+customerType(lnglats[i].columns.type)+"   " + getDate(lnglats[i].columns.placing_order_time) + "");
									var obj = lnglats[i].columns;
									var listDetail = lnglats[i].columns.listDetail;
									var detailHtml = '';
									var detailId = lnglats[i].columns.detailId;//明细id
									var goodsNames = lnglats[i].columns.NAMES;//商品names
									var nums = lnglats[i].columns.nums;//商品names
									if(!isBlank(detailId)){
										for(var m=0;m<detailId.split(",").length;m++){
											detailHtml += ' <li ><span class="markProName" title="'+goodsNames.split(",")[m]+'" >'+goodsNames.split(",")[m]+'</span> <span class="f-r" >* '+parseInt(nums.split(",")[m])+'</span></li>';
										}
									}
									var markContent ='<div class="markDetail1" >'+ 
												       ' <em></em>'+
												       ' <p>'+
												            '<span>'+lnglats[i].columns.customer_name+customerType(lnglats[i].columns.type)+'</span>'+
												           ' <span  >'+(isBlank(lnglats[i].columns.customer_contact) ? lnglats[i].columns.customer_contact2 : lnglats[i].columns.customer_contact  )+'</span>'+
												          '  <span >'+lnglats[i].columns.buyAllAmount+'个商品</span>'+
												      '  </p>'+
												        '<div style="color:#bebebe;max-width:250px; white-space:nowrap; overflow:hidden;font-size:12px; text-overflow:ellipsis;" title="'+dealAddress(obj)+'">'+dealAddress(obj)+'</div>'+
												       ' <ul class="tDot  ">'+
												       detailHtml +
												       ' </ul>'+
												     ' </div>';
												   marker.content = markContent;
									marker.on('click', markerClick2);
					            }
							}
						}
					})
			}

		    var infoWindow1 = new AMap.InfoWindow({
				offset : new AMap.Pixel(1, 110),
				isCustom:true,
				closeWhenClickMap:true
			});
			function markerClick2(e) {
				//$(".amap-info-content").parent("div").hide();
				var thisadress;
				console.log("e.target.content=="+e.target.content);
				geocoder = new AMap.Geocoder({
					city : "010"//城市，默认：“全国”
				});

				geocoder.getAddress(e.lnglat, function(status, result) {

					//if (status == 'complete') {
						infoWindow1.setContent(e.target.content);
					/* } else {
						infoWindow1.setContent(e.target.content );
					} */
				}) 
				infoWindow1.open(map, e.target.getPosition());
				//$(".amap-info-content").parent("div").hide();
			} 
			
			/* function returnAddress(){
				
			} */

			function getDate(tm) {
				var tt = new Date(parseInt(tm)).toLocaleString().replace(/年|月/g, "-").replace(/日/g, " ");
				return tt;
			}
			function getDate2(tm) {
				var date = new Date(tm);
				var seperator1 = "-";
				var seperator2 = ":";
				var month = date.getMonth() + 1;
				var strDate = date.getDate();
				if (month >= 1 && month <= 9) {
					month = "0" + month;
				}
				if (strDate >= 0 && strDate <= 9) {
					strDate = "0" + strDate;
				}
				var currentdate = date.getFullYear() + seperator1 + month + seperator1 + strDate + " " + date.getHours() + seperator2 + date.getMinutes();
				return currentdate;
			}
			
			function getDate3(tm) {
				var date = new Date(tm);
				var seperator1 = "-";
				var seperator2 = ":";
				var month = date.getMonth() + 1;
				var strDate = date.getDate();
				if (month >= 1 && month <= 9) {
					month = "0" + month;
				}
				if (strDate >= 0 && strDate <= 9) {
					strDate = "0" + strDate;
				}
				var currentdate = date.getFullYear() + seperator1 + month + seperator1 + strDate ;
				return currentdate;
			}
			
			function customerType(type){
				if(type=='0'){
					return '（普通用户）';
				}
				if(type=='1'){
					return '（星级用户）';
				}
				return '';
			}
			
			function search(){
				infoWindow1.close();
				/* $(".amap-info-close").each(function(){
					$(this).trigger("click");
				}) */
				test();
			}
			
			$(function(){
				$("#searchs").click(function(){
					test();
				});
				$("#resets").click(function(){
					$("#placingOrderTimeMin").val('');
					$("#placingOrderTimeMax").val('');
					$("input[name=goodName]").val('');
					$("input[name=selectName]").val('');
					search();
				});
				readerMark()
			});
			
			function dealAddress(obj){
				return ((obj.province!=obj.city ? (obj.province+obj.city) : (obj.city)) + obj.city+obj.district+obj.customer_address)
			}
			
			function readerMark(){
				$.ajax({
					type:"post",
					dataType:"json",
					url:"${ctx}/userAnalyze/getTraderMark",
					data:{},
					success:function(data){
						var dt = data.dt;
						var trader = data.trader;
						var address = (trader.province!=trader.city ? (trader.province+trader.city) : trader.city )+trader.area+trader.address;
						htmlContent = '<div class="mark_ markclick" style="width:135px;">'+
							             '<img src="${ctxPlugin}/img/red-position.png" alt=""/>'+
							             '<span style="width:110px;">'+trader.name+'</span>'+
							          '</div>'; 
						if(data!=null){
							var markerTrader = new AMap.Marker({
								position : [dt[0],dt[1]],
								map : map,
								content : htmlContent,
								//offset:new AMap.Pixel(17,-50),
								clickable : true,
								title:trader.name
							});
							markerTrader.setTitle(trader.name+"   " + address + "");
						}
						
					}
				})
			}
</script>
</body>
</html>