<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort() + path+"/";
	request.setAttribute("contextPath", basePath);
	
	String redirectUrl= request.getParameter("redirectUrl");
	request.setAttribute("redirectUrl", redirectUrl);
%> 
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">
    <title>我的客户</title>
    <script type="text/javascript" src="<%=basePath %>app/lib/jquery.min.js"></script>
    <script src="${contextPath }app/lib/flexible.js"></script>
    <link rel="stylesheet" href="${contextPath }app/lib/flexible.css">
	<link rel="stylesheet" href="${contextPath }app/css/basem.css">
	<link rel="stylesheet" href="${contextPath }app/css/logome.css">
	<style>
		.slist {
		    overflow: hidden;
		}
		.slist .merecli { 
		    width: 120%;
		    color: #232323;
    		border-bottom:  0.025rem solid #f3f3f3;
		    overflow: hidden;
		    height: 1.2rem;
		    line-height: 1.2rem;
		    font-size: 0.4rem;
		    padding: 0;
		}
		.slist li i {
		    float: right;
		    width: 15%;
		    text-align: center;
		    background: #dd1e25;
		    color: #fff;
		    font-size: 0.3rem;
		    padding-right: 0.15rem;
		}
		.slist li div.left {
		    overflow: hidden;
		    -webkit-transition: all 0.3s linear;
		    transition: all 0.3s linear;
		    display: inline-block;
		    width: 80%;
		}
		
		.swipeleft {
		    transform: translateX(-15%);
		    -webkit-transform: translateX(-15%);
		}

	</style>
	<script>
		//计算根节点HTML的字体大小
		function resizeRoot(){
		    var deviceWidth = document.documentElement.clientWidth,
		        num = 750,
		        num1 = num / 100;
		    if(deviceWidth > num){
		        deviceWidth = num;  
		    }
		    document.documentElement.style.fontSize = deviceWidth / num1 + "px";
		}
		//根节点HTML的字体大小初始化
		resizeRoot();

		window.onresize = function(){
		    resizeRoot();
		};
</script>
</head>
<body>
	<div class="titbox blubg">
		<a class="titreturn left" href="${contextPath }web/meWebCtl/me.cs"><img src="${contextPath }app/img/fanhui16@2x.png" alt=""></a>
		<div class="safe">	
			<a class="right" href="${contextPath }web/mgmCustomerWebCtl/me_people_add.cs?userId=${USER_ID}">
				<img class="addimg" src="${contextPath }app/img/tianjkh@2x.png" alt="">
				<span class="smtxt">添加客户</span>
			</a>
		</div>
		<h1>我的客户</h1>
	</div> 
	<div class="whbg top50">
		<div class="safe slist">
			<ul>
				<c:forEach  items="${lists}" var="customer">
				<li class="merecli" id="F${customer.id}">
					<div class="sclient">
						<div class="left">
						<a class="left mepeoname" href="${contextPath }web/mgmCustomerWebCtl/me_people_details.cs?id=${customer.id}">${customer.name}</a>
						<p class="right blutxt"><a href="tel:${customer.phone}">${customer.phone}</a></p>
						</div>
						<i><a href="javascript:del(${customer.id},this)">删除</a></i>
					</div> 
				</li>	
				</c:forEach>
			</ul> 
		</div>
	</div>
</body>
<!-- 客户删除 -->
<script type="text/javascript">
	 function del(id){
		 var pram='{"id":"'+id+'"}';
		 var node=$("#F"+id);
		 $.post('${contextPath }web/mgmCustomerWebCtl/deleteCustomer.cs', {
				"data" : pram
			}, function(data) {
				var datas=eval(data.data);
				if (data.ret == 1) {
					node.remove();
				}else{  
					layer.msg(data.msg);
				}
			}, "json"); 
	 }
</script>
<!-- 侧滑删除 -->
<script>
//侧滑显示删除按钮
var expansion = null; //是否存在展开的list
var container = document.querySelectorAll('.slist li .sclient');
for(var i = 0; i < container.length; i++){    
    var x, y, X, Y, swipeX, swipeY;
    container[i].addEventListener('touchstart', function(event) {
        x = event.changedTouches[0].pageX;
        y = event.changedTouches[0].pageY;
        swipeX = true;
        swipeY = true ;
        if(expansion){   //判断是否展开，如果展开则收起
            expansion.className = "";
        }        
    });
    container[i].addEventListener('touchmove', function(event){     
        X = event.changedTouches[0].pageX;
        Y = event.changedTouches[0].pageY;        
        // 左右滑动
        if(swipeX && Math.abs(X - x) - Math.abs(Y - y) > 0){
            // 阻止事件冒泡
            event.stopPropagation();
            if(X - x > 10){   //右滑
                event.preventDefault();
                this.className = "";    //右滑收起
            }
            if(x - X > 10){   //左滑
                event.preventDefault();
                this.className = "swipeleft";   //左滑展开
                expansion = this;
            }
            swipeY = false;
        }
        // 上下滑动
        if(swipeY && Math.abs(X - x) - Math.abs(Y - y) < 0) {
            swipeX = false;
        }        
    });
}

/* var i = document.querySelectorAll('.slist li .sclient i');
i.forEach(function(item, index){
    i[index].onclick = function(){ 
    	
        this.parentNode.parentNode.remove();
    };
}); */
</script>
</html>