{extend name="wap/default_new/base" /}
{block name="resources"/}
<link rel="stylesheet" type="text/css" href="__TEMP__/{$style}/public/css/normalize.css">
<link rel="stylesheet" type="text/css" href="__TEMP__/{$style}/public/css/common-v4.4.css">
<link rel="stylesheet" type="text/css" href="__TEMP__/{$style}/public/css/person-v4.4.css">
<style>
#form1{margin:0;}
#form1 .row{margin:0px;border-bottom: 1px solid #f1f1f1;background-color:#fff;}
.columns label{width:24%;float:left;font-size:12px;text-align:center;margin-bottom: 0px;line-height: 40px;}
.columns .columns-select{width:72%;float:right;font-size:12px;position: relative;}
.columns-select:after{content: " ";display: inline-block;-webkit-transform: rotate(45deg);transform: rotate(45deg);height: 6px;width: 6px;border-width: 2px 2px 0 0;border-color: #C8C8CD;border-style: solid;position: absolute;top: 50%;right: 15px;margin-top: -3px;}
.columns .columns-input{width:72%;float:right;font-size:12px;line-height: 40px;}
.columns .columns-input input{border: 0;outline: 0;-webkit-appearance: none;background-color: transparent;color: inherit;height: 1.41176471em;line-height: 1.41176471;}
.columns select{padding-right: 30px;-webkit-appearance: none;border: 0;outline: 0;background-color: transparent;font-size: 12px;height: 40px;position: relative;z-index: 1;}
textarea{border: none;font-size: 12px;width: 94%;height: 60px;resize: none;outline: none;background: #fff;padding:10px 3%;}
a.button{display:block;width:80%;margin:10px auto 0;text-align:center;background-color:#ff6600;border-radius:5px;border:1px solid #ff6600;color:#fff;font-size:16px;height:40px;line-height:40px;}
.row{margin-bottom:10px;}
.color-red{margin-right: 5px;}
.columns{overflow: hidden;}
.maxRefund{font-size: 12px;}
.description-block{display:none;}
</style>
{/block}
{block name="goodsHead"}
<section class="head">
	<a class="head_back" href="javascript:window.history.go(-1)"><i class="icon-back"></i></a>
	<div class="head-title">{:lang('application_for_drawback')}</div>
</section>
{/block}
{block name="main" }
<div data-alert class="alert-box alert" style="display: none;"
	id="errerMsg">
	<a href="#" class="close">&times;</a>
</div>
<form class="main mt-45">
	<div class="return-process">
		<ul class="clear">
			<li class="step01">
				<p class="name">{:lang('member_buyers_apply_for_refund')}</p> <span class="number">1</span>
				<span class="prcess-line prcess-line-r"></span>
			</li>
			<li class="step02">
				<p class="name">{:lang('member_merchant_processing_refund_request')}</p> <span class="prcess-line prcess-line-l"></span>
				<span class="number">2</span> <span class="prcess-line prcess-line-r"></span>
			</li>
			<li class="step03">
				<p class="name">{:lang('member_refund_completed')}</p> <span class="prcess-line prcess-line-l"></span>
				<span class="number">3</span>
			</li>
		</ul>
	</div>

	<div class="form-c" id="form1">
		<div class="row">
			<div class="small-12 columns">
				<label><span class="color-red">*</span>{:lang('member_treatment_mode')}：</label>
				<div class="columns-select">
					<select id="refund_require">
						<option value="1" selected="selected">{:lang('member_refund_goods')}</option>
						<option value="2">{:lang('member_refund_goods_and_money')}</option>
					</select>
				</div>
			</div>
		</div>
		<div class="row">
			<div class="small-12 columns">
				<label><span class="color-red">*</span>{:lang('member_refund_reason')}：</label>
				<div class="columns-select">
				<select id="refund_reason">
					<option value="{:lang('member_buyer_and_seller_agrees')}">{:lang('member_buyer_and_seller_agrees')}</option>
					<option value="{:lang('member_wrong_and_no_want')}">{:lang('member_wrong_and_no_want')}</option>
					<option value="{:lang('member_commodity_quality_problems')}">{:lang('member_commodity_quality_problems')}</option>
					<option value="{:lang('member_goods_not_received')}">{:lang('member_goods_not_received')}</option>
					<option value="{:lang('member_other')}">{:lang('member_other')}</option>
				</select></div>
			</div>
		</div>
		{if condition="$refund_money > 0"}
		<div class="row">
			<div class="small-12 columns">
				<label><span class="color-red">*</span>{:lang('member_refund_amount')}：</label>
				<div class="columns-input">
					<input value="" id="refund_money" class="maxRefund" type="text" placeholder="{:lang('member_refund_at_most')}{$refund_money}{:lang('element')}" onblur="maxRefund()">
				</div>
			</div>
		</div>
		{/if}
		<input value="{$refund_money}" id="maxRefundMoney" type="hidden" />
		{if condition="$refund_balance>0"}
		<div class="row">
			<div class="small-12 columns">
				<label style="height: 40px;">{if condition="$refund_money == 0"}<span class="color-red">*</span>{:lang('member_refund_amount')}：{/if}</label>
				<div class="columns-input" style="text-align: left;width: 70%;float: left;margin-left: 14px;">
				<span>{:lang("member_refund_balance_auto")}<strong style="color:#ff4000;">{$refund_balance}</strong>{:lang('element')}</span>
				</div>
			</div>
		</div>
		{/if}
		<div class="description-block">
			<div class="row">
				<div class="small-12 columns" style="background-color:#f5f5f5;">
					<label>{:lang('member_refund_description')}：</label>
				</div>
			</div>
			<textarea rows="5" id="description" placeholder="请输入退款说明"></textarea>
		</div>
		<a class="button" href="javascript:void(0)" onclick="btnSave()">{:lang('submit_a_refund_application')}</a>
	</div>
	
</form>
<script>

var itemId ={$order_goods_id};
$(function() {
	
		$(".step01").addClass("current");
	
	$("#refund_reason").change(function(){
		if($(this).val()=="{:lang('member_other')}"){
			$(".description-block").show();
		}else{
			$(".description-block").hide();
		}
	})
});


function btnSave() {
	var refund_require = $("#refund_require").val();
	var refund_reason = $("#refund_reason").val();
	var refund_money = $("#refund_money").val();//退款金额
	if(refund_money == undefined){
		refund_money = 0;
	}
	var description = $("#description").val();//退款说明
	var num2 = parseFloat($("#maxRefundMoney").val());
	if(refund_money == "" && refund_money !== 0){
		$("#refund_money").focus();
		showBox("{:lang('please_enter_the_refund_amount')}","warning");
		return;
	}

	if(refund_money >= 0){
		if (refund_money <0 || refund_money >num2 ) {
			$("#refund_money").focus();
			showBox("{:lang('member_beyond_refund_amount')}","warning");
			return;
		}
	}

	if(refund_reason == '{:lang('member_other')}'){
		refund_reason = description;
		if(refund_reason == ""){
			showBox("{:lang('member_please_enter_refund_statement')}","warning");
			return false;
		}
	}
	$.ajax({
		url: "{:__URL('APP_MAIN/order/ordergoodscustomerserviceaskfor')}",
		type: "post",
		async: false,
		data: {
			"order_goods_id": itemId, 
			"refund_type": refund_require, 
			"refund_require_money":refund_money,
			"refund_reason": refund_reason
		},
		dataType:"json",
		success: function (response) {
			if(response.code>0){
				showBox(response.message,"success",window.location.reload());
			}else{
				showBox(response.message,"error");
			}
		}
	});
}

//最多退款金额
function maxRefund() {
	var num = parseFloat($("#refund_money").val());
	var num2 = parseFloat($("#maxRefundMoney").val());
	if (num < 0 || num >num2) {
		$("#refund_money").focus();
		showBox("{:lang('member_beyond_refund_amount')}","warning");
		return;
	}
};
</script>
{/block}