<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<!DOCTYPE html>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<html lang="en" data-dpr="1" style="font-size: 37.52px;">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport"
          content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="format-detection" content="telephone=no">
    <meta name="keywords" content="">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
    <meta name="renderer" content="webkit">
	<c:set var="ctx" value="${pageContext.request.contextPath}"  scope="request"/>
	<c:set var="resourcePath" value="${ctx}/resources"  scope="request"/>
	<script type="text/javascript">
		var ctx = "${ctx}"; //上下文路径
		var resourcePath = "${resourcePath}";
		document.writeln('<script type="text/javascript" src="'+resourcePath+'/js/global.js?d=' + new Date().getTime() + '" ><\/script>');
	</script>
    <title>收货地址</title>
	<link rel="stylesheet" href="${resourcePath}/css/h5.css">
	<link rel="stylesheet" href="${resourcePath}/css/h5-common.css">
	<style>
		body{
			background-color: #F6F6F4;
		}
		#app,html{
			height: auto !important;
		}
		#app{
			padding: 10px;
		}
		.no-data{
			width: 200px;
			text-align: center;
			margin: 30% auto 0 auto;
		}
		.no-data-icon{
			text-align: center;
			width: 100%;
		}
		.no-data-desc{
			color: #a1a0a0;
			font-size: 16px;
		}
		.footer{
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
		}
		.add-btn{
			background: #f14e4e;
		}
		.address-item{
			background: #fff;
			border-radius: 5px;
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 55px;
			padding: 10px;
			line-height: 20px;
			margin-bottom: 10px;
		}
		.icon{
			width: 30px;
			height: 30px;
		}
		.address-info{
			margin-left: 10px;
			width: 75%;
		}
		.address-text{
			font-size: 13px;
		}
		.link-text{
			font-size: 11px;
			color: #a0a0a0;
		}
		.ellipsis{
			text-overflow: ellipsis;
			overflow: hidden;
			white-space: nowrap;
		}
		.is-default{
			margin-left: 10px;
			padding: 3px;
			background-color: #f14e4e;
			color: #fff;
			border-radius: 3px;
		}
	</style>
</head>
<body>
	<div id="app">
		<c:choose>
			<c:when test="${not empty addressList}">
				<c:forEach items="${addressList}" var="ars">
					<div class="address-item" >
						<img class="icon" src="${resourcePath}/images/address-icon.png">
						<div class="address-info" onclick="checkAddress('${ars.id}')">
							<div class="address-text ellipsis">${ars.areaName} ${ars.address}</div>
							<div class="link-text">${ars.name} ${ars.phone}
								<c:if test="${ars.defFlag eq '1'}">
									<span class="is-default">默认</span>
								</c:if>
							</div>
						</div>
						<img class="icon" onclick="updateAddress('${ars.id}')" src="${resourcePath}/images/update-icon.png">
					</div>
				</c:forEach>
			</c:when>
			<c:otherwise>
				<div class="no-data">
					<img class="no-data-icon" src="${resourcePath}/images/no-goods.png">
					<p class="no-data-desc">暂无收货地址~</p>
				</div>
			</c:otherwise>
		</c:choose>
		<div class="footer">
			<button class="add-btn">新增收货地址</button>
		</div>
	</div>
	<script type="text/javascript">
		/* === 判断支持版本 start === */
		(function () {
			var viewportTag = null;
			var metaTags = document.getElementsByTagName('meta');
			for (var i = 0; i < metaTags.length; i++) {
				if (metaTags[i].getAttribute('name') === "viewport") {
					viewportTag = metaTags[i];
					break;
				}
			}
			if (!viewportTag) {
				viewportTag = document.createElement("meta");
				viewportTag.setAttribute('name', 'viewport');
			}

			var viewportTagContent =
					'width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no';

			// Detect if iOS device
			if (/(iPhone|iPod|iPad)/i.test(window.navigator.userAgent)) {
				// Get iOS major version
				var iosVersion = parseInt((window.navigator.userAgent).match(/OS (\d+)_(\d+)_?(\d+)? like Mac OS X/i)[1]);
				// Detect if device is running >iOS 11
				// iOS 11's UIWebView and WKWebView changes the viewport behaviour to render viewport without the status bar. Need to override with "viewport-fit: cover" to include the status bar.
				if (iosVersion >= 11) {
					viewportTagContent += ', viewport-fit=cover';
				}
			}

			// Update viewport tag attribute
			viewportTag.setAttribute('content', viewportTagContent);
		})();
		/* === 判断支持版本 end === */

		// refs http://www.html-js.com/article/3041 移动端高清、多屏适配方案
		!function (a, b) {
			function c() {
				var b = f.getBoundingClientRect().width;
				b / i > 540 && (b = 540 * i);
				var c = b / 10;
				f.style.fontSize = c + "px", k.rem = a.rem = c
			}
			var d, e = a.document,
					f = e.documentElement,
					g = e.querySelector('meta[name="viewport"]'),
					h = e.querySelector('meta[name="flexible"]'),
					i = 0,
					j = 0,
					k = b.flexible || (b.flexible = {});
			if (g) {
				var l = g.getAttribute("content").match(/initial\-scale=([\d\.]+)/);
				l && (j = parseFloat(l[1]), i = parseInt(1 / j))
			} else if (h) {
				var m = h.getAttribute("content");
				if (m) {
					var n = m.match(/initial\-dpr=([\d\.]+)/),
							o = m.match(/maximum\-dpr=([\d\.]+)/);
					n && (i = parseFloat(n[1]), j = parseFloat((1 / i).toFixed(2))), o && (i = parseFloat(o[1]), j = parseFloat((
							1 / i).toFixed(2)))
				}
			}
			if (!i && !j) {
				var p = (a.navigator.appVersion.match(/android/gi), a.navigator.appVersion.match(/iphone/gi)),
						q = a.devicePixelRatio;
				i = p ? q >= 3 && (!i || i >= 3) ? 3 : q >= 2 && (!i || i >= 2) ? 2 : 1 : 1, j = 1 / i
			}
			if (f.setAttribute("data-dpr", i), !g)
				if (g = e.createElement("meta"), g.setAttribute("name", "viewport"), g.setAttribute("content",
						"initial-scale=" + j + ", maximum-scale=" + j + ", minimum-scale=" + j + ", user-scalable=no"), f
						.firstElementChild) f.firstElementChild.appendChild(g);
				else {
					var r = e.createElement("div");
					r.appendChild(g), e.write(r.innerHTML)
				}
			a.addEventListener("resize", function () {
				clearTimeout(d), d = setTimeout(c, 300)
			}, !1), a.addEventListener("pageshow", function (a) {
				a.persisted && (clearTimeout(d), d = setTimeout(c, 300))
			}, !1), "complete" === e.readyState ? e.body.style.fontSize = 12 * i + "px" : e.addEventListener(
					"DOMContentLoaded",
					function () {
						e.body.style.fontSize = 12 * i + "px"
					}, !1), c(), k.dpr = a.dpr = i, k.refreshRem = c, k.rem2px = function (a) {
				var b = parseFloat(a) * this.rem;
				return "string" == typeof a && a.match(/rem$/) && (b += "px"), b
			}, k.px2rem = function (a) {
				var b = parseFloat(a) / this.rem;
				return "string" == typeof a && a.match(/px$/) && (b += "rem"), b
			}
		}(window, window.lib || (window.lib = {}));
	</script>
	<script>
		$(".add-btn").click(function (res){
			window.location.href= ctx + '/activity/address/add?token=${token}&g=${g}';
		})
		function updateAddress(id){
			window.location.href= ctx + '/activity/address/add?token=${token}&g=${g}&aid='+id;
		}
		function checkAddress(id){
			window.location.href= ctx + "/activity/exchange/order?token=${token}&g=${g}&aid="+id;
		}
	</script>
</body>
</html>