{% 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 = '';
		var tb;

		$('.datepicker2').datepicker({ dateFormat: 'yy-mm-dd' });
		$('.datepicker2').datepicker('setDate', new Date());
		setDatePickerZh();
		
		function  btn_approve(e,what){
            console.log(e,what)
            $.ajax({
                url: '/company/saleman/approve/action/' + e + '/?'+what+'=1',
                success:function (res) {
                    if (res.e){
                        alert(res.e)
                    }else{
                        initTable('#tb_action', '#tab_5', res.data);
                    }
                }
             })


        }
		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/saleman/manage/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 'list':
							var tb = '#tb_list';
							var el = '#tab_1';
							initTable(tb, el, res.data);
							break;
						case 'performance':
							var tb = '#tb_performance';
							var el = '#tab_2';
							initTable(tb, el, res.data);
							break;
						case 'performance_agent':
							var tb = '#tb_performance_agent';
							var el = '#tab_3';
							initTable(tb, el, res.data);
							break;
						case 'trace':
							var tb = '#tb_trace';
							var el = '#tab_4';
							initTable(tb, el, res.data);
							break;
						case 'action':
							var tb = '#tb_action';
							var el = '#tab_5';
							initTable(tb, el, res.data);
							break;
						case 'sharegroup':
							var tb = '#tb_sharegroup';
							var el = '#tab_6';
							initTable(tb, el, res.data);
							break;
                        case 'performance_level2':
							var tb = '#tb_performance_level2';
							var el = '#tab_7';
							initTable(tb, el, res.data);
							break;
                        case 'banquet':
							var tb = '#tb_banquet';
							var el = '#tab_8';
							initTable(tb, el, res.data);
							break;
                        case 'group_purchase':
							var tb = '#tb_group_purchase';
							var el = '#tab_9';
							initTable(tb, el, res.data);
							break;

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

		refresh_tb('list')


		$('.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;
			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="list">业务员信息</a></li>
			<li role="presentation" class=""><a href="#tab_2" role="tab" data-toggle="tab"
					data-tb="performance">销售业绩</a></li>
			<li role="presentation" class=""><a href="#tab_3" role="tab" data-toggle="tab"
					data-tb="performance_agent">销售业绩(明细到终端)</a></li>
            <li role="presentation" class=""><a href="#tab_7" role="tab" data-toggle="tab"
					data-tb="performance_level2">销售业绩(明细到一级经销商)</a></li>
			<li role="presentation" class=""><a href="#tab_4" role="tab" data-toggle="tab" data-tb="trace">拜访记录</a></li>
			<li role="presentation" class=""><a href="#tab_5" role="tab" data-toggle="tab" data-tb="action">核心动作</a>
			</li>
			<li role="presentation" class=""><a href="#tab_6" role="tab" data-toggle="tab" data-tb="sharegroup">人员共享</a>
			</li>
            <li role="presentation" class=""><a href="#tab_8" role="tab" data-toggle="tab" data-tb="banquet">宴会出货统计</a>
			</li>
            <li role="presentation" class=""><a href="#tab_9" role="tab" data-toggle="tab" data-tb="group_purchase">零售、团购出货统计</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_list' 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>
								</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></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_performance' 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 role="tabpanel" class="tab-pane fade" id="tab_3">
				<div class='col-md-12 form-group'>
					<div class="table-responsive">
						<table id='tb_performance_agent'
							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>
									<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>
								<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_4">
				<div class='col-md-12 form-group'>
					<div class="table-responsive">
						<table id='tb_trace' 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>
								</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></th>
							</tfoot>
						</table>
					</div>
				</div>
			</div>


			<div role="tabpanel" class="tab-pane fade" id="tab_5">
				<div class='col-md-12 form-group'>
					<div class="table-responsive">
						<table id='tb_action' 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>
									<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>
								<th></th>
							</tfoot>
						</table>
					</div>
				</div>
			</div>


			<div role="tabpanel" class="tab-pane fade" id="tab_6">
				<div class='col-md-12 form-group'>
					<input class="btn btn-primary" type="button" style="margin-bottom: 10px;"
						onclick="openDlg('新建人员共享','/company/saleman/manage/?obj=sharegroup')" value="新建" />
					<div class="table-responsive">
						<table id='tb_sharegroup' 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></th>
							</tfoot>
						</table>
					</div>
				</div>
			</div>


            <div role="tabpanel" class="tab-pane fade" id="tab_7">
				<div class='col-md-12 form-group'>
					<div class="table-responsive">
						<table id='tb_performance_level2' 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>
									<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>
								<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_8">
				<div class='col-md-12 form-group'>
					<div class="table-responsive">
						<table id='tb_banquet' 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>
									<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>
								<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_9">
				<div class='col-md-12 form-group'>
					<div class="table-responsive">
						<table id='tb_group_purchase' 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>
									<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>
								<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>
