{% 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 = 'city';
		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 = 'obj/list/bugsell_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);
                        {#$('#province').val(res.province);#}
                        {#$('#cityname').val(res.cityname);#}
                        {#$('#agentname').val(res.agentname);#}
                        {#$('#product_name').val(res.product_name);#}
                        {#$('#code').val(res.code);#}



					}
					switch (what) {
						case 'city':
							var tb = '#city';
							var el = '#tab_1';
							initTable(tb, el, res.data);
							break;
						case 'company':
							var tb = '#company';
							var el = '#tab_2';
							initTable(tb, el, res.data);
							break;
						case 'product':
							var tb = '#product';
							var el = '#tab_3';
							initTable(tb, el, res.data);
							break;


						default:
							break;
					};
				},
				error: function (XMLHttpRequest, textStatus, errorThrown) {
					alert('连接服务器失败');
					return;
				}
			});
		}

		refresh_tb('city')


		$('.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, 1000);
				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,province,cityname;
			date_fr = $('#dt_fr2').val();
			date_to = $('#dt_to2').val();
            province = $('#province').val();
            cityname = $('#cityname').val();


			var params = [];
			if (date_fr != '') { params.push('date_from=' + date_fr) };
			if (date_to != '') { params.push('date_to=' + date_to) };
            if (province !=''){params.push('province='+$('#province').val())};
            if (cityname !=''){params.push('cityname='+$('#cityname').val())};





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

        $('#btn_search1').click(function () {
			var date_from, date_to,province,cityname,agentname;
			date_fr = $('#dt_fr3').val();
			date_to = $('#dt_to3').val();
            province = $('#province1').val();
            cityname = $('#cityname1').val();
            agentname = $('#agentname1').val();


			var params = [];
			if (date_fr != '') { params.push('date_from=' + date_fr) };
			if (date_to != '') { params.push('date_to=' + date_to) };
            if (province !=''){params.push('province='+$('#province1').val())};
            if (cityname !=''){params.push('cityname='+$('#cityname1').val())};
            if (agentname !=''){params.push('agentname='+$('#agentname1').val())};





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

        $('#btn_search2').click(function () {
			var date_from, date_to,province,cityname,agentname,productname,code;
			date_fr = $('#dt_fr4').val();
			date_to = $('#dt_to4').val();
            province = $('#province2').val();
            cityname = $('#cityname2').val();
            agentname = $('#agentname2').val();
            productname = $('#productname').val();
            code =$ ('#code').val();

			var params = [];
			if (date_fr != '') { params.push('date_from=' + date_fr) };
			if (date_to != '') { params.push('date_to=' + date_to) };
            if (province !=''){params.push('province='+$('#province2').val())};
            if (cityname !=''){params.push('cityname='+$('#cityname2').val())};
            if (agentname !=''){params.push('agentname='+$('#agentname2').val())};
            if (productname !=''){params.push('productname='+$('#productname').val())};
            if (code !=''){params.push('code='+$('#code').val())};




			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) {
		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="city">按地区</a></li>
			<li role="presentation" class=""><a href="#tab_2" role="tab" data-toggle="tab"
					data-tb="company">按经销商</a></li>
			<li role="presentation" class=""><a href="#tab_3" role="tab" data-toggle="tab"
					data-tb="product">按商品</a></li>

		</ul>

{#		<form id="datepicker2" role="form" class="form-inline" style="margin-top:0px;padding-left:10px;display:block">#}
{#			<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-addon">{% trans "省份"%}</span>#}
{#            <input class="form-control" id="province"   placeholder='省份' />#}
{#        </div>#}
{#            <div class="col-sm-2 input-group">#}
{#                <span class="input-group-addon">{% trans "城市"%}</span>#}
{#                <input class="form-control" id="cityname"   placeholder='城市' />#}
{#            </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">
                <form id="datepicker2" role="form" class="form-inline" style="margin-top:0px;padding-left:10px;display:block">
			<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-addon">{% trans "省份"%}</span>
            <input class="form-control" id="province"   placeholder='省份' />
        </div>
            <div class="col-sm-2 input-group">
                <span class="input-group-addon">{% trans "城市"%}</span>
                <input class="form-control" id="cityname"   placeholder='城市' />
            </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 class='col-md-12 form-group'>
					<div class="table-responsive">
						<table id='city' class="table table-striped table-bordered dt-responsive nowrap tb"
							cellspacing="0" width="100%">
							<thead>
								<tr>
									<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>

							</tfoot>
						</table>
					</div>
				</div>

			</div>

			<div role="tabpanel" class="tab-pane fade" id="tab_2">
                <form id="datepicker2" role="form" class="form-inline" style="margin-top:0px;padding-left:10px;display:block">
			<div class="col-sm-3 input-group">
				<span class="input-group-addon">{% trans "开始日期"%}</span>
				<input class="datepicker2 form-control" id="dt_fr3" />
			</div>
			<div class="col-sm-3 input-group">
				<span class="input-group-addon">{% trans "结束日期"%}</span>
				<input class="datepicker2 form-control" id="dt_to3" />
			</div>

        <div class="col-sm-2 input-group">
           <span class="input-group-addon">{% trans "省份"%}</span>
            <input class="form-control" id="province1"   placeholder='省份' />
        </div>
            <div class="col-sm-2 input-group">
                <span class="input-group-addon">{% trans "城市"%}</span>
                <input class="form-control" id="cityname1"   placeholder='城市' />
            </div>
            <div class="col-sm-2 input-group">
                <span class="input-group-addon">{% trans "经销商名称"%}</span>
                <input class="form-control" id="agentname1"   placeholder='请输入经销商名称' />
            </div>



			<div class="col-sm-2 input-group">
				<span class='input-group-btn'>
					<a type="button" class='btn btn-primary' id="btn_search1">
						<span class='glyphicon glyphicon-search' style='padding-right:5px;'></span>{% trans '查找' %}
					</a>
				</span>
			</div>
		</form>
				<div class='col-md-12 form-group'>
					<div class="table-responsive">
						<table id='company' 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>
								</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>

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

			<div role="tabpanel" class="tab-pane fade" id="tab_3">
                <form id="datepicker2" role="form" class="form-inline" style="margin-top:0px;padding-left:10px;display:block">
			<div class="col-sm-3 input-group">
				<span class="input-group-addon">{% trans "开始日期"%}</span>
				<input class="datepicker2 form-control" id="dt_fr4" />
			</div>
			<div class="col-sm-3 input-group">
				<span class="input-group-addon">{% trans "结束日期"%}</span>
				<input class="datepicker2 form-control" id="dt_to4" />
			</div>

        <div class="col-sm-2 input-group">
           <span class="input-group-addon">{% trans "省份"%}</span>
            <input class="form-control" id="province2"   placeholder='省份' />
        </div>
            <div class="col-sm-2 input-group">
                <span class="input-group-addon">{% trans "城市"%}</span>
                <input class="form-control" id="cityname2"   placeholder='城市' />
            </div>
            <div class="col-sm-2 input-group">
                <span class="input-group-addon">{% trans "经销商名称"%}</span>
                <input class="form-control" id="agentname2"   placeholder='请输入经销商' />
            </div>
            <div class="col-sm-2 input-group">
                <span class="input-group-addon">{% trans "产品名称"%}</span>
                <input class="form-control" id="productname"   placeholder='请输入产品名称' />
            </div>
            <div class="col-sm-2 input-group">
                <span class="input-group-addon">{% trans "标签号码"%}</span>
                <input class="form-control" id="code"   placeholder='请输入标签号码' />
            </div>




			<div class="col-sm-2 input-group">
				<span class='input-group-btn'>
					<a type="button" class='btn btn-primary' id="btn_search2">
						<span class='glyphicon glyphicon-search' style='padding-right:5px;'></span>{% trans '查找' %}
					</a>
				</span>
			</div>
		</form>
				<div class='col-md-12 form-group'>
					<div class="table-responsive">
						<table id='product'
							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>
