<title>订单录入</title>

<div class="layui-card layadmin-header">
	<div class="layui-breadcrumb" lay-filter="breadcrumb">
		<a lay-href="">订单</a>
		<a><cite>订单录入</cite></a>
	</div>
</div>

<div class="layui-form layui-fluid" lay-filter="orderSet">
	<div class="layui-form-item">
		<label class="layui-form-label">收件人</label>
		<div class="layui-input-block">
			<script type="text/html" template lay-done="layui.data.sendParams(d.params)">
				<input type="text" name="username" value="{{ d.params.username || '' }}" lay-verify="required" placeholder="请输入收件人姓名" autocomplete="off" class="layui-input">
			</script>
		</div>
	</div>
	<div class="layui-form-item">
		<label class="layui-form-label">手机号</label>
		<div class="layui-input-block">
			<script type="text/html" template>
				<input type="number" name="phone" value="{{ d.params.phone || '' }}" lay-verify="required|phone" placeholder="请输入收件人手机号" autocomplete="off" class="layui-input">
			</script>
		</div>
	</div>
	<div class="layui-form-item">
		<label class="layui-form-label">收货地址</label>
		<div class="layui-input-block" id="area-picker">
			<div class="layui-input-inline" style="width: 200px;">
				<script type="text/html" template>
					<select name="province" class="province-selector" lay-filter="province-1" lay-verify="required">
						<option value="">请选择省</option>
					</select>
				</script>
			</div>
			<div class="layui-input-inline" style="width: 200px;">
				<script type="text/html" template>
					<select name="city" class="city-selector" lay-filter="city-1" lay-verify="required">
						<option value="">请选择市</option>
					</select>
				</script>
			</div>
			<div class="layui-input-inline" style="width: 200px;">
				<script type="text/html" template>
					<select name="county" class="county-selector" lay-filter="county-1">
						<option value="">请选择区</option>
					</select>
				</script>
			</div>
		</div>
		<div class="layui-input-block" style="margin-top: 15px;">
			<script type="text/html" template>
				<textarea placeholder="详细地址" class="layui-textarea" name="area" lay-verify="required" autocomplete="off">{{ d.params.area || '' }}</textarea>
			</script>
		</div>
	</div>
	<div class="layui-form-item">
		<label class="layui-form-label">商品</label>
		<div class="layui-input-inline">
			<script type="text/html" template lay-done="layui.data.done(d);">
				<select lay-filter="classify" lay-search>
					<option value="" data-price="0"></option>
					{{# layui.each(d.params.cdata, function(index, item){ }}
					{{# if(item.id == d.params.classify){ }}
					<option value="{{item.id}}" data-price="{{item.price}}" selected="selected">{{item.cname}}</option>
					{{# }else{ }}
					<option value="{{item.id}}" data-price="{{item.price}}">{{item.cname}}</option>
					{{# } }}
					{{# }) }}
				</select>
			</script>
		</div>
		<div class="layui-input-inline" style="width: 100px;">
			<input type="text" id="nums" placeholder="数量" value="1" autocomplete="off" class="layui-input">
		</div>
		<div class="layui-input-inline">
			<a class="layui-btn" id="addShop">添加</a>
		</div>
	</div>
	<div class="layui-form-item">
		<div id="content" class="layui-input-block">
			<div>
				<div class="layui-input-inline">名称</div>
				<div class="layui-input-inline">价格</div>
				<div class="layui-input-inline">数量</div>
			</div>
			<script type="text/html" template>
				{{# layui.each(d.params.order_list, function(k, v){ }}
				<div class="layui-form-item">
					<div class="layui-input-inline">
						<input type="text" name="cname[]" value="{{v.cname}}" readonly="readonly" class="layui-input">
						<input type="hidden" name="classify[]" value="{{v.classify}}">
					</div>
					<div class="layui-input-inline">
						<input type="number" name="price[]" value="{{v.price}}" readonly="readonly" class="layui-input">
					</div>
					<div class="layui-input-inline">
						<input onfocus="log(this);" onblur="change(this);" type="number" name="nums[]" lay-verify="required" value="{{v.nums}}" placeholder="请输入数量" autocomplete="off" class="layui-input">
					</div>
					<div class="layui-input-inline" style="width: 65px;">
						<a class="layui-btn layui-btn-danger" onclick="del(this);">删除</a>
					</div>
				</div>
				{{# }) }}
			</script>
		</div>
	</div>
	<div class="layui-form-item">
		<label class="layui-form-label">订单金额</label>
		<div class="layui-input-block" id="p-all_price">
			<script type="text/html" template>
				<input type="number" name="all_price" lay-verify="required" value="{{ d.params.all_price || 0 }}" autocomplete="off" class="layui-input">
			</script>
		</div>
	</div>
	<div class="layui-form-item">
		<label class="layui-form-label">优惠金额</label>
		<div class="layui-input-block" id="p-yh_price">
			<script type="text/html" template>
				<input type="number" name="yh_price" value="{{ d.params.yh_price || 0 }}" placeholder="请输入优惠金额" autocomplete="off" class="layui-input">
			</script>
		</div>
	</div>
	<div class="layui-form-item">
		<label class="layui-form-label">最终金额</label>
		<div class="layui-input-block" id="p-last_price">
			<script type="text/html" template>
				<input type="number" name="last_price" value="{{ d.params.last_price || 0 }}" lay-verify="required" class="layui-input" disabled="disabled">
			</script>
		</div>
	</div>
	<div class="layui-form-item">
		<label class="layui-form-label">定金(已付)</label>
		<div class="layui-input-block" id="p-pre_price">
			<script type="text/html" template>
				{{# if(d.params != undefined && parseInt(d.params.pre_price)){ }}
				<input type="number" name="pre_price" value="{{ d.params.pre_price }}" placeholder="已全付留空或输入最终金额(数字)" autocomplete="off" class="layui-input">
				{{# }else{ }}
				<input type="number" name="pre_price" placeholder="已全付留空或输入最终金额(数字)" autocomplete="off" class="layui-input">
				{{# } }}
			</script>
		</div>
	</div>
	<div class="layui-form-item">
		<label class="layui-form-label">尾款</label>
		<div class="layui-input-block" id="p-dre_price">
			<script type="text/html" template>
				<input type="number" name="dre_price" value="{{ d.params.dre_price || 0 }}" disabled="disabled" placeholder="尾款" autocomplete="off" class="layui-input">
			</script>
		</div>
	</div>
	<div class="layui-form-item">
		<label class="layui-form-label">订单状态</label>
		<div class="layui-input-block">
			<script type="text/html" template>
				<select name="status">
					<option value="1" {{ d.params.status === '待发货' ? 'selected' : '' }}>待发货(运单号留空)</option>
					<option value="2" {{ d.params.status === '已发货' ? 'selected' : '' }}>已发货(运单号必填)</option>
					<option value="3" {{ d.params.status === '已完成' ? 'selected' : '' }}>已完成(运单号必填)</option>
					<option value="4" {{ d.params.status === '拒收' ? 'selected' : '' }}>拒收(填写备注)</option>
					<option value="5" {{ d.params.status === '退货' ? 'selected' : '' }}>退货(填写备注)</option>
					<option value="6" {{ d.params.status === '已收货' ? 'selected' : '' }}>已收货(运单号必填)</option>
				</select>
			</script>
		</div>
	</div>
	<div class="layui-form-item">
		<label class="layui-form-label">运单号</label>
		<div class="layui-input-block">
			<script type="text/html" template>
				<input type="text" name="send_no" value="{{ d.params.send_no || '' }}" placeholder="运单号" autocomplete="off" class="layui-input">
			</script>
		</div>
	</div>
	<div class="layui-form-item">
		<label class="layui-form-label">订单备注</label>
		<div class="layui-input-block">
			<script type="text/html" template>
				<input type="text" name="note" value="{{ d.params.note || '' }}" placeholder="订单备注" autocomplete="off" class="layui-input">
			</script>
		</div>
	</div>
	<div class="layui-form-item">
		<div class="layui-input-block">
			<button class="layui-btn" lay-submit lay-filter="submitorder">提交订单</button>
			<button type="reset" class="layui-btn layui-btn-primary">重置</button>
		</div>
	</div>
</div>

<script>
	//商品价格
	var p = 0,
		n = 1,
		ap = 0,
		yp = 0,
		lp = 0,
		pp = '',
		dp = 0;
	//商品分类
	layui.data.done = function(d) {
		layui.use('form', function() {
			var form = layui.form;
			form.render();
		});
	};
	var addr = {
		province: "北京市",
		city: "北京市",
		county: "东城区"
	};
	layui.data.sendParams = function(params) {
		console.log(params);
		if (params.province != undefined) {
			addr = {
				province: params.province,
				city: params.city,
				county: params.county
			};
			// layui.each(params.cdata, function(k, v){
			// 	if(v.id == params.classify){
			// 		p = parseFloat(v.price);
			// 	}
			// });
			// n = params.nums;
			ap = parseFloat(params.all_price);
			yp = parseFloat(params.yh_price);
			lp = parseFloat(params.last_price);
			if(parseInt(params.pre_price)!=0){
				pp = parseFloat(params.pre_price);
			}
			dp = parseFloat(params.dre_price);
		}
		layui.use('layarea', function() {
			var layarea = layui.layarea;
			layarea.render({
				elem: '#area-picker',
				data: addr
			});
		});
	};
	var $ = null, lodn = 1;
	layui.use('jquery',function() {
		var admin = layui.admin,
			view = layui.view,
			form = layui.form,
			layer = layui.layer,
			laytpl = layui.laytpl;
		$ = layui.jquery;
		var classify_name = '', classify_id = 0, classify_p = 0;
		form.on('select(classify)', function(data) {
			if(data.value){
				classify_name = $(data.elem).find("option:selected").text();
				classify_id = data.value;
				classify_p = $(data.elem).find("option:selected").attr("data-price");
			}else{
				classify_name = '';
			}
		});
		$("#addShop").on("click", function(){
			if(classify_name == ''){
				return false;
			}
			var sn = $("#nums").val();
			var str =
					'<div class="layui-form-item"><div class="layui-input-inline"> ' +
						'<input type="text" name="cname[]" value="'+classify_name+'" readonly="readonly" class="layui-input">' +
						'<input type="hidden" name="classify[]" value="'+classify_id+'">' +
					'</div>' +
					'<div class="layui-input-inline">' +
						'<input type="number" name="price[]" value="'+classify_p+'" readonly="readonly" class="layui-input">' +
					'</div>' +
					'<div class="layui-input-inline">' +
						'<input onfocus="log(this);" onblur="change(this);" type="number" name="nums[]" lay-verify="required" value="'+sn+'" placeholder="请输入数量" autocomplete="off" class="layui-input">' +
					'</div>' +
					'<div class="layui-input-inline" style="width: 65px;">' +
						'<a class="layui-btn layui-btn-danger" onclick="del(this);">删除</a>' +
					'</div></div>';
			$("#content").append(str);
			ap = ap + parseFloat(classify_p) * parseFloat(sn);
			$("input[name='all_price']").val(ap.toFixed(2));
			jj();
		});
		$("#p-yh_price").on("blur", 'input', function() {
			yp = $(this).val();
			jj();
		});
		$("#p-pre_price").on("blur", 'input', function() {
			pp = $(this).val();
			jj();
		});
		$("#p-all_price").on("blur", 'input', function() {
			ap = $(this).val();
			jj();
		});
	});
		function jj() {
			lp = ap - yp;
			if (pp) {
				dp = lp - pp;
			} else {
				dp = 0;
			}
			$("input[name='last_price']").val(lp.toFixed(2));
			$("input[name='dre_price']").val(dp.toFixed(2));
		}
		
		function del(that){
			var g = $(that).parent().parent();
			var tempp = g.find("input[name='price[]']").val();
			var tempn = g.find("input[name='nums[]']").val();
			ap = ap - parseFloat(tempp) * parseFloat(tempn);
			$(that).parent().parent().remove();
			$("input[name='all_price']").val(ap.toFixed(2));
			jj();
		}
		
		function log(that){
			oldn = $(that).val();
		}
		
		function change(that){
			var g = $(that).parent().parent();
			var tempp = g.find("input[name='price[]']").val();
			var tempOp = parseFloat(tempp) * parseFloat(oldn);
			var tempn = g.find("input[name='nums[]']").val();
			var tempNp = parseFloat(tempp) * parseFloat(tempn);
			ap = ap - tempOp + tempNp;
			$("input[name='all_price']").val(ap.toFixed(2));
			jj();
		}
</script>
