<%@ 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>
	<script src="${resourcePath}/js/mobileSelect.js"></script>
	<script type="text/javascript" src="${resourcePath}/js/zepto.min.js"></script>
	<script type="text/javascript" src="${resourcePath}/js/zepto.weui.js"></script>
    <title>编辑收货地址</title>
	<link rel="stylesheet" href="${resourcePath}/css/h5.css">
	<link rel="stylesheet" href="${resourcePath}/css/h5-common.css">
	<link rel="stylesheet" href="${resourcePath}/css/mobileSelect.css">
	<link rel="stylesheet" href="${resourcePath}/css/weui.css">
	<link rel="stylesheet" href="${resourcePath}/css/weuix.css">
	<style>
		body{
			background-color: #F6F6F4;
		}
		#app{
			padding: 10px;
		}
		.address-info{
			background: #fff;
			border-radius: 5px;
			line-height: 45px;
			padding: 0 10px 10px 10px;
		}
		.info{
			border-bottom: 1px solid #e2e2e2;
			display: flex;
		}
		.label-name{
			display: block;
			width: 2.5rem;
		}
		.no-border{
			border: 0;
		}

		div{
			position: relative;
		}

		input[type="radio"] {
			width: 20px;
			height: 20px;
			opacity: 0;
		}

		.radio-item label {
			position: absolute;
			left: 5px;
			top: 3px;
			width: 20px;
			height: 20px;
			border-radius: 50%;
			border: 1px solid #999;
　　　　　　　cursor: pointer;
		}

		/*设置选中的input的样式*/
		/* + 是兄弟选择器,获取选中后的label元素*/
		input:checked+label {
			background-color: #f14e4e;
			border: 1px solid #f14e4e;
		}
		/*添加的加号与label进行拼接(一个矩形边框去掉上和左的边框),再旋转45度*/
		input:checked+label::after {
			position: absolute;
			content: "";
			width: 5px;
			height: 10px;
			top: 1px;
			left: 6px;
			border: 2px solid #fff;
			border-top: none;
			border-left: none;
			transform: rotate(45deg);
		}
		.radio-label{
			margin-top: 6px;
		}
		.radio-item{
			margin-right: 15px;
		}
		.radio-label-text{
			margin-left: 10px;
		}
		.item-input{
			width: 70%;
		}
		.icon{
			width: 25px;
			height: 25px;
			margin-top: 8px;
		}
		.submit-btn{
			background: #f14e4e;
		}
		.popup-container {
			z-index: 9993;
			/* -webkit-transition: all .3s ease-out; */
			transition: all .3s ease-out;
		}
		.loading-container, .popup-container {
			left: 50%;
			top: 50%;
			-webkit-transform: translate(-50%,-50%);
			transform: translate(-50%,-50%);
		}
		[class*=-container] {
			visibility: hidden;
			opacity: 0;
			position: fixed;
		}
		.popup-container .popup {
			border-radius: .05333333rem;
			width: 7.33333333rem;
			font-size: .4rem;
			-webkit-box-shadow: 0 0 2px rgba(0,0,0,.2);
			box-shadow: 0 0 2px rgba(0,0,0,.2);
			text-align: center;
			background-color: #fff;
		}
		.popup-container .popup .popup-body {
			padding: .64rem .32rem;
			font-size: .95em;
			overflow-y: auto;
			overflow-x: hidden;
		}
		.popup-container .popup .popup-btns {
			display: -webkit-box;
			display: -webkit-flex;
			display: flex;
			-webkit-box-direction: normal;
			-webkit-box-orient: horizontal;
			-webkit-flex-direction: row;
			flex-direction: row;
		}
		.popup-container .popup .popup-btns .btn {
			padding: .26666667rem 0;
			-webkit-box-flex: 1;
			-webkit-flex: 1;
			flex: 1;
			display: block;
			background: inherit;
		}
		.popup-container .popup-btns .btn {
			color: #ff721f;
		}
		.popup-container .popup-btns .btn {
			color: #ff721f;
		}
		.red{
			color: red;
		}
		.areaName{
			margin-left: 10px;
		}
		.default-btn{
			background-color: #919191;
		}
	</style>
</head>
<body>
	<div id="app">
		<form id="form" >
			<input type="hidden" name="token" value="${token}">
			<input type="hidden" name="g" value="${g}">
			<input type="hidden" name="id" value="${userAddress.id}">
			<div class="address-info">
				<div class="info">
					<label class="label-name">姓名：<span class="red">*</span></label>
					<input type="text" class="item-input" name="name" autocomplete="off" value="${userAddress.name}" placeholder="请输入收货人姓名">
				</div>
				<div class="info">
					<label class="label-name">联系方式：<span class="red">*</span></label>
					<input type="text" class="item-input" name="phone" autocomplete="off" value="${userAddress.phone}" placeholder="请输入收货人联系方式">
				</div>
				<div class="info">
					<label class="label-name">收货地址：<span class="red">*</span></label>
					<input type="text" class="item-input areaName" name="areaName" id="trigger" value="${userAddress.areaName}" readonly autocomplete="off" placeholder="选择省/市/区">
					<input type="hidden" class="item-input" name="areaCode" value="${userAddress.areaCode}" id="areaCode">
					<img class="icon" src="${resourcePath}/images/arrow-right-icon.png">
				</div>
				<div class="info">
					<label class="label-name">详细地址：<span class="red">*</span></label>
					<input type="text" class="item-input" name="address" value="${userAddress.address}" autocomplete="off" placeholder="街道门牌，楼栋楼层等信息">
				</div>
				<div class="info no-border">
					<label class="label-name">默认：</label>
					<div class="radio-item">
						<input id="item1" type="radio" name="defFlag" ${userAddress.defFlag eq '1' ? 'checked' : ''} value="1">
						<label for="item1" class="radio-label"></label>
						<span class="radio-label-text">是</span>
					</div>
					<div class="radio-item">
						<input id="item2" type="radio" name="defFlag" value="0" ${userAddress.defFlag eq '0' || empty userAddress ? 'checked' : ''}>
						<label for="item2" class="radio-label"></label>
						<span class="radio-label-text">否</span>
					</div>
				</div>
				<button type="button" class="submit-btn">保存并使用</button>
				<c:if test="${not empty userAddress and  not empty userAddress.id }">
					<button type="button" class="default-btn" onclick="deleteAddress('${userAddress.id}')" >删除</button>
				</c:if>
			</div>
		</form>
	</div>
	<div class="backdrop-container active" style="display: none;"></div>
	<div class="popup-container active" style="display: none;">
		<div class="popup"><!---->
			<div class="popup-body"></div>
			<div class="popup-btns" id="popup-btns" onclick="hide(this)"><span class="btn btn-positive">确定</span></div>
		</div>
	</div>
	<div class="mint-indicator" style="display: none;">
		<div class="mint-indicator-wrapper" style="padding: 20px;">
        	<img src="${resourcePath}/images/loading-2.gif">
			<span class="mint-indicator-text" style="">加载中...</span>
		</div>
	</div>
</body>
<script src="${resourcePath}/js/common/h5.js"></script>
<script src="${resourcePath}/js/mobileSelect.js"></script>
<script type="text/javascript">
	let mobileSelect1 = null;
	$(function (){
		let url =  resourcePath + "/json/city.json";
		$.ajax({
			url:url,
			type:"GET",
			dataType:"json",
			success:res =>{
				let data = res.locationList;
				mobileSelect1 = new MobileSelect({
					trigger: '#trigger',// 点击容器的ID
					title: '省市区',//
					keyMap:{"id":"code","value":"name","childs":"childs"},
					cancelBtnText:" ",
					wheels: [
						{data:data}
					],
					connector:"-",
					position:[0,0,0], //Initialize positioning
					callback:function (indexArr,data){
						$("#trigger").val(data[0].name +"-"+ data[1].name +"-"+ data[2].name);
						$("#areaCode").val(data[0].code +"-"+ data[1].code +"-" + data[2].code);
					},
				});
			}
		})
	})
	$(".submit-btn").click(function (){
		var serializeArray = $("#form").serializeArray();
		var data = {};
		$.each(serializeArray, function(index, item) {
			data[item.name] = item.value;
		});
		if(!data.name)return showDialog("收货人姓名不能为空");
		if(!data.phone)return showDialog("收货人联系方式不能为空");
		if(!data.areaName)return showDialog("收货人地址不能为空");
		if(!data.address)return showDialog("收货人详细地址不能为空");
		let url = ctx + "/activity/address/save";
		$(".mint-indicator").show();
		$(".backdrop-container").show();
		$.ajax({
			url:url,
			type: 'post',
			data:data,
			dataType:'json',
			success:function (res){
				$(".mint-indicator").hide();
				$(".backdrop-container").hide();
				if(res.code == 200){
					showDialog(res.message,ctx + "/activity/exchange/order?token=${token}&g=${g}&aid="+res.data.id);
				}else{
					showDialog(res.message);
				}
			}
		})

	})
	function deleteAddress(id){
		$.confirm("确认删除吗?",function (res){
			$(".mint-indicator").show();
			$(".backdrop-container").show();
			let $url = ctx + "/activity/address/del/"+id;
			$.post($url,function (res){
				$(".mint-indicator").hide();
				$(".backdrop-container").hide();
				if(res.code == 200){
					showDialog(res.message,ctx + "/activity/address?token=${token}&g=${g}");
				}else{
					showDialog(res.message);
				}
			})
		})
	}
	function showDialog(text,href){
		$('.popup-body').html(text);
		$('.active').show();
		if(href){
			$('.popup-body').attr("location",href)
		}
	}
	function hide(obj) {
		$('.active').hide();
		let href = $(obj).prev().attr("location");
		if(href){
			window.location.href = href;
		}
	}
</script>
</html>
