{% load i18n %}
<style>
	#myTabContent tbody img {
		height: 32px;
		margin-left: 10px;
	}

	#data-content .dataTable .selected {
		color: black;
		background: #aab7d1;
	}

	#tb_closing thead th {
		background-color: white;
		vertical-align: middle;
		text-align: center;
	}

	.ui-autocomplete {
		z-index: 9999 !important;
	}
</style>

<script type="text/javascript">
		var page_length = 10;
		var tb_name = 'query';
		var tb;

		$('.datepicker2').datepicker({ dateFormat: 'yy-mm-dd' });
		$('.datepicker2').datepicker('setDate', new Date());
		setDatePickerZh();

		function initTable(tb, el, data) {
			tb = $(tb).DataTable({
				dom: 'Bfrtip',
				autoWidth: true,
				destroy: true,
				pageLength: page_length,
				buttons: [{ extend: 'excelHtml5', text: '导出到Excel' }],
				language: lng,
				data,
				drawCallback: function () {

				},
				createdRow: function (nRow, aData, iDataIndex) {

				}
			});
			tb.columns().every(function () {
				var that = this;
				$('input', this.footer()).on('keyup change clear', function () {
					if (that.search() !== this.value) {
						that.search(this.value).draw();
					}
				});
			});
		}


		function requestData(what, params) {
			var url = '/company/scan/list/data/' + what + "/";
			if (params) {
				url += "?" + params;
			}
			$.ajax({
				type: 'GET',
				processData: false,
				contentType: 'application/json; charset=utf-8',
				url,
				success: function (res) {
					if (res.dt) {
						$("#datepicker2").show();
						$('#dt_fr2').val(res.date_from);
						$('#dt_to2').val(res.date_to);
					}
					switch (what) {
						case 'query':
							var tb = '#tb_query';
							var el = '#tab_1';
							initTable(tb, el, res.data);
							break;
						case 'ticket':
							var tb = '#tb_ticket';
							var el = '#tab_2';
							initTable(tb, el, res.data);
							break;
						default:
							break;
					};
				},
				error: function (XMLHttpRequest, textStatus, errorThrown) {
					alert('连接服务器失败');
					return;
				}
			});
		}

		refresh_tb('query')


		$('.tb').on("click", "td a", function (event) {

			event.preventDefault();
			if ($(this).hasClass('btn-dlg')) {
				$(event.target.parentNode).addClass('row_selected');
				$.OpenDlg($(this).attr('href'), '信息弹窗', 1200, 700);
				return;
			}
			$.RefreshContent($(this).attr('href'));
		});

		$('#tb tbody').on('click', 'img', function () {
			var src = $(this).attr('src');
			var tt = $(this).closest('tr').find('a').text();
			if (tt == '') {
				tt = $(this).attr('tt');
			};
			var i = "<div style='text-align:center;'><img src='" + src + "' style='height:400px;'></img></div>";
			$.OpenCfmDlg(tt, i);
		});


		$('#btn_search').click(function () {
			var date_from, date_to;
			date_fr = $('#dt_fr2').val();
			date_to = $('#dt_to2').val();
			var params = [];
			if (date_fr != '') { params.push('date_from=' + date_fr) };
			if (date_to != '') { params.push('date_to=' + date_to) };

			if (params.length == 0) {
				bootbox.alert("{% trans '请先输入查询条件！'%}");
			} else {
				requestData(tb_name, params.join('&'))
			}
		});

		$('#myTab a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
			tb_name = $(e.target).data('tb');
			refresh_tb(tb_name);
		})


	function openDlg(title, url) {
		event.preventDefault();
		$(event.target.parentNode).addClass('row_selected');
		$.OpenDlg(url, title, 1200, 700);
		return;
	}
	function refresh_tb(what) {
		$("#datepicker2").hide();
		requestData(what);
	};
</script>

<div>
	<ol class="breadcrumb">
		<li>物流查询</li>
		<li>外部扫码报表</li>
	</ol>
</div>

<div class="clearfix"></div>

<div class="x_panel" style='min-height:700px;'>
	<div class="" role="tabpanel" data-example-id="togglable-tabs">
		<ul id="myTab" class="nav nav-tabs bar_tabs" role="tablist">
			<li role="presentation" class="active"><a href="#tab_1" id="home-tab" role="tab" data-toggle="tab"
					data-tb="query">防伪查询</a></li>
			<li role="presentation" class=""><a href="#tab_2" role="tab" data-toggle="tab"
					data-tb="ticket">消费者兑奖</a></li>
		</ul>

		<form id="datepicker2" role="form" class="form-inline" style="margin-top:0px;padding-left:10px;display:none">
			<div class="col-sm-3 input-group">
				<span class="input-group-addon">{% trans "开始日期"%}</span>
				<input class="datepicker2 form-control" id="dt_fr2" />
			</div>
			<div class="col-sm-3 input-group">
				<span class="input-group-addon">{% trans "结束日期"%}</span>
				<input class="datepicker2 form-control" id="dt_to2" />
			</div>
			<div class="col-sm-2 input-group">
				<span class='input-group-btn'>
					<a type="button" class='btn btn-primary' id="btn_search">
						<span class='glyphicon glyphicon-search' style='padding-right:5px;'></span>{% trans '查找' %}
					</a>
				</span>
			</div>
		</form>

		<div id="myTabContent" class="tab-content">
			<div role="tabpanel" class="tab-pane fade active in" id="tab_1">
				<div class='col-md-12 form-group'>
					<div class="table-responsive">
						<table id='tb_query' class="table table-striped table-bordered dt-responsive nowrap tb"
							cellspacing="0" width="100%">
							<thead>
								<tr>
									<th>标签号</th>
									<th>产品</th>
									<th>微信昵称</th>
									<th>微信头像</th>
									<th>地址</th>
									<th>扫码时间</th>
								</tr>
							</thead>
							<tbody>

							</tbody>
							<tfoot>
								<th><input type="text" placeholder="标签号"></th>
								<th><input type="text" placeholder="产品"></th>
								<th><input type="text" placeholder="微信昵称"></th>
								<th><input type="text" placeholder="微信头像"></th>
								<th><input type="text" placeholder="地址"></th>
								<th><input type="text" placeholder="扫码时间"></th>
							</tfoot>
						</table>
					</div>
				</div>

			</div>

			<div role="tabpanel" class="tab-pane fade" id="tab_2">
				<div class='col-md-12 form-group'>
					<div class="table-responsive">
						<table id='tb_ticket' class="table table-striped table-bordered dt-responsive nowrap tb"
							cellspacing="0" width="100%">
							<thead>
								<tr>
									<th>标签号码</th>
									<th>姓名</th>
									<th>联系电话</th>
									<th>时间</th>
									<th>详细地址</th>
									<th>活动名称</th>
									<th>奖品类型</th>
									<th>奖品图片</th>
									<th>奖品名称</th>
									<th>产品名称</th>
								</tr>
							</thead>
							<tbody>

							</tbody>
							<tfoot>
								<th><input type="text" placeholder="标签号码"></th>
								<th><input type="text" placeholder="姓名"></th>
								<th><input type="text" placeholder="联系电话"></th>
								<th><input type="text" placeholder="时间"></th>
								<th><input type="text" placeholder="详细地址"></th>
								<th><input type="text" placeholder="活动名称"></th>
								<th><input type="text" placeholder="奖品类型"></th>
								<th><input type="text" placeholder="奖品图片"></th>
								<th><input type="text" placeholder="奖品名称"></th>
								<th><input type="text" placeholder="产品名称"></th>
							</tfoot>
						</table>
					</div>
				</div>
			</div>



		</div>
	</div>
</div>