<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
	<th:block th:include="include :: header('提交演出退款')" />
</head>
<body class="white-bg">
	<div class="wrapper wrapper-content animated fadeInRight ibox-content">
		<form class="form-horizontal m" id="form-post-add">
			<div class="form-group">
				<label class="col-sm-3 control-label is-required">演出id：</label>
				<div class="col-sm-8">
					<input class="form-control" type="text" name="targetId" id="targetId" required>
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-3 control-label">演出名称：</label>
				<div class="col-sm-8">
					<span id="performanceTitle"></span>
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-3 control-label is-required">演出统计：</label>
				<div class="col-sm-8">
					<div class="col-sm-12 select-table table-bordered">
						<table id="bootstrap-table"></table>
					</div>
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-3 control-label layui-required is-required">退款原因：</label>
				<div class="col-sm-8">
					<select name="reasonId" id="reasonId" class="form-control layui-required" required>
						<option value="">请选择退款原因</option>
					</select>
				</div>
			</div>
			<div class="form-group" id="reasonDetailGroup" style="display:none;">
				<label class="col-sm-3 control-label layui-required is-required">补充说明：</label>
				<div class="col-sm-8">
					<textarea name="reasonDetail" id="reasonDetail" maxlength="200" class="form-control" rows="3"></textarea>
				</div>
			</div>
		</form>
	</div>
	<th:block th:include="include :: footer" />
	<script type="text/javascript">
		var prefix = ctx + "kylin/refundBatch";
		var reasonPrefix = ctx + "kylin/refundReasons";

		function loadAppliedReasons() {
			$.ajax({
				url: reasonPrefix + "/appliedList",
				type: "get",
				dataType: "json",
				success: function (result) {
					if (result.code == 0 && result.data) {
						var $sel = $("#reasonId");
						$sel.find("option:not(:first)").remove();
						for (var i = 0; i < result.data.length; i++) {
							var item = result.data[i];
							$sel.append('<option value="' + item.reasonId + '" data-need-detail="' + item.needDetail + '" data-placeholder="' + (item.placeholder || '') + '">' + item.name + '</option>');
						}
					}
				}
			});
		}

		function onReasonChange() {
			var $opt = $("#reasonId option:selected");
			var needDetail = $opt.data("need-detail");
			var placeholder = $opt.data("placeholder") || "请填写补充说明";
			if (needDetail == 1) {
				$("#reasonDetailGroup").show();
				$("#reasonDetail").attr("placeholder", placeholder);
			} else {
				$("#reasonDetailGroup").hide();
				$("#reasonDetail").val("");
			}
		}
		$("#form-post-add").validate({
			onkeyup: false,
			rules:{
				targetId:{
					submitHandler: function(form) {
						var config = {
							url: prefix + "/applyPerformance",
							type: "post",
							dataType: "json",
							data: {
								"targetId" : function() {
									return $.common.trim($("#targetId").val());
								}
							},
							beforeSend: function () {
								$.modal.loading("正在查询演出，请稍后...");
							},
							success: function(result) {
								if (result.code > 0) {
									$.modal.closeLoading();
									layer.msg(result.msg);
									return false;
								}
								$("#performanceTitle").text(result.data.title);
								var options = {
									data: result.data.performanceOrderStatisticalDao,
									pagination: false,
									columns: [
										{
											field: 'title',
											title: '票种名'
										},
										{
											field: 'type',
											title: '类型',
											formatter: function (value, row, index) {
												var typeName = "";
												switch (value) {
													case 1:
														typeName = "单日票";
														break;
													case 2:
														typeName = "通票";
														break;
												}
												return typeName;
											}
										},
										{
											field: 'useStart',
											title: '适用时间'
										},
										{
											field: 'price',
											title: '单价'
										},
										{
											field: 'saleGeneral',
											title: '销售总数量'
										},
										{
											field: 'totalMemberNumber',
											title: '会员销售数量'
										},
										{
											field: 'totalPayingNumber',
											title: '正在支付数量'
										},
										{
											field: 'totalRefundGeneral',
											title: '退票数量'
										},
										{
											field: 'totalSalePrice',
											title: '销售额（元）'
										},
										{
											field: 'surplusGeneral',
											title: '库存数量'
										},
										{
											field: 'totalExchange',
											title: '兑换数量'
										},
									]
								};
								$.table.init(options);
								$.modal.closeLoading();
							}
						};
						$.ajax(config)
					}
				},
			},
		    focusCleanup: true
		});

		function submitHandler() {
			var reasonId = $('#form-post-add').find("[name='reasonId']").val();
			var reasonDetail = $('#form-post-add').find("[name='reasonDetail']").val();
			var targetId = $('#form-post-add').find("[name='targetId']").val();
			if (!targetId) {
				layer.msg("演出id有误");
				return false;
			}
			if (!reasonId) {
				layer.msg("请选择退款原因");
				return false;
			}
			var $opt = $("#reasonId option:selected");
			if ($opt.data("need-detail") == 1 && !$.common.trim(reasonDetail)) {
				layer.msg("请填写补充说明");
				return false;
			}
			if ($.validate.form()) {
				var data = $('#form-post-add').serializeArray();
				$.operate.save(prefix + "/apply", data);
			}
		}

		$(function () {
			loadAppliedReasons();
			$("#reasonId").on("change", onReasonChange);
		});
	</script>
</body>
</html>
