{extend name="Public/base"/}
{block name="js"}
<script src="__PUBLIC__/layui245/layui.js?v={$Think.const.APP_VERSION}" type="text/jscript"></script>
<script src="__PUBLIC__/js/jquery.table2excel.js?v={$Think.const.APP_VERSION}" type="text/jscript"></script>
<script>
	$(function(){
		$(".nul_bli").eq(3).find(".navb").addClass("active");
	})
</script>
{/block}
{block name="css"}
<style>
	.black .layui-layer-title {
		background-color: #ffffff;
	}
	.set-top .layui-table-tool {
		overflow-x:initial;
	}
	.layui-table-tool-panel li .layui-form-checkbox[lay-skin="primary"] span{
		float: left;
	}
	.set-top #sub{
		margin-left: 0;
		height: 36px;
		line-height: 36px;
		font-size: 14px;
	}
	.cus-model-btn{
		height: 36px!important;
		line-height: 36px!important;
		font-size: 14px!important;
	}
	.layui-table-page {
		margin-left: 4px;
		height: auto!important;
	}
	.cus-con .layui-form-item .layui-input-inline {
		width: auto!important;
		display: flex;
		flex-wrap: wrap;
		margin-bottom: 5px;
	}
	.time{
		width: 160px !important;
		padding-right: 2px;
	}
	#sub {
		background: #01b88a;
		color: #fff;
		border: 1px solid #01b88a;
		font-size: 16px;
		margin-left: 25px;
	}
	.set-top .layui-form-select .layui-edge {
		position: absolute;
		right: 10px;
		top: 50%;
		margin-top: -8px;
		cursor: pointer;
		border-width: 1px;
		border-top-color: white;
		border-top-style: solid;
		transition: all .3s;
		-webkit-transition: all .3s;
	}
	.set-top .layui-form-selected .layui-edge {
		-webkit-transform: rotate(225deg);
		transform: rotate(225deg);
		margin-top: -3px;
	}
	.sel_box_cc .layui-form-checkbox[lay-skin="primary"]{
		padding-left: 1px;
		margin-top: 0px!important;
	}
	.sel_box_cc .layui-form-checkbox[lay-skin="primary"] i{
		top:0px;
	}
	.layui-form-checkbox[lay-skin="primary"] span {
		padding-left: 5px!important;
	}
	.layui-table-tool-panel {
		position: absolute;
		top: 0;
		left: 0;
		min-width: 400px;
		min-height: 40px;
		border: 1px solid #d2d2d2;
		text-align: left;
		background-color: #fff;
		box-shadow: 0 2px 4px rgba(0,0,0,.12);
		width: 100%;
		z-index: 999;
	}
	.layui-table-tool-panel li {
		padding: 0 10px;
		line-height: 30px;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		-webkit-transition: .5s all;
		transition: .5s all;
		float: left;
	}
	.layui-table-tool .layui-table-tool-self .layui-inline[lay-event] {
		margin: 5px 10px 0 0;
	}
	.layui-table-tool .layui-inline[lay-event] {
		position: relative;
		width: auto;
		height: 26px;
		line-height: 16px;
		margin-right: 10px;
		text-align: center;
		color: #333;
		border: none;
		cursor: pointer;
		-webkit-transition: .5s all;
		transition: .5s all;
		float: left;
	}
	.layui-table-tool .layui-inline[lay-event]:hover {
		position: relative;
		width: auto;
		height: 26px;
		line-height: 16px;
		margin-right: 10px;
		text-align: center;
		color: #333;
		border: none;
		cursor: pointer;
		-webkit-transition: .5s all;
		transition: .5s all;
		float: left;
	}
	.layui-icon {
		font-family: layui-icon!important;
		font-size: 16px;
		color: #009688;
		font-style: normal;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
	}
	.layui-icon-cols:before{
		content:"标题标题标题标题"
	}
	.ns_top_con{
		width: 100%;
		height: auto;
		margin-top:10px;
		padding: 0 10px;
	}
	.ns_top_day{
		width: auto !important;
	}
	.sel_box_cc{
		height: auto;
		width: auto;
		position: relative;
		display: inline-block;
		vertical-align: middle;
		cursor: pointer;
		z-index: 9999;
	}
	.sel_box {
		height: 36px;
		width: 200px;
		border: 1px solid #bfccdd;
		background-color: #fff;
		border-radius: 2px;
		box-sizing: border-box;
		position: relative;
		display: inline-block;
		vertical-align: middle;
		cursor: pointer;
	}
	.sel_box_tit {
		width: 100%;
		height: 34px;
		padding: 0 30px 0 9px;
		box-sizing: border-box;
		position: absolute;
	}
	.sel_box_tit input {
		line-height: 34px;
		font-size: 12px;
		color: #777;
		width: 100%;
		height: 34px;
		box-sizing: border-box;
		border: none;
		appearance:none;
		-moz-appearance:none; /* Firefox */
		-webkit-appearance:none; /* Safari 和 Chrome */
		outline:none;
		cursor: pointer;
	}
	.sel_box .layui-edge{
		position: absolute;
		right: 10px;
		top: 7px;
		cursor: pointer;
		border-top-style: solid;
		transition: all .3s;
		-webkit-transition: all .3s;
		display: inline-block;
		border-bottom: 1px solid #bfccdd;
		border-right: 1px solid #bfccdd;
		width: 4px;
		height: 5px;
		-webkit-transform: rotate(45deg);
		transform: rotate(45deg);
	}
	.sel_box .layui-edge.layui-form-selected {
		top: 12px;
		-webkit-transform: rotate(225deg);
		transform: rotate(225deg);
	}
	.sel_tree{
		width: 200px;
		height: auto;
		position: absolute;
		top: 36px;
		left: -1px;
		box-sizing: border-box;
		overflow: auto;
		background-color: #fff;
		border: 1px solid #bfccdd;
		display: none;
		padding-bottom: 20px;
		padding-right: 10px;
	}
	.layui-xtree-item{
		width:101%;
		font-size:13px;
	}
	.mkz_t1{
		padding: 0 10px 0 5px;
		line-height: 30px;
	}
	.layui-input {
		height: 36px!important;
	}
	/*表格自定义列 显示*/
	.layui-table-tool:hover {
		overflow: initial;
	}
</style>
<link rel="stylesheet" href="__PUBLIC__/css/set.css?v={$Think.const.APP_VERSION}">
<link rel="stylesheet" href="__PUBLIC__/layui245/css/layui.css"  media="all">
<link rel='stylesheet' href="__PUBLIC__/css/formSelects-v4.css?v={$Think.const.APP_VERSION}"/>
{/block}
{block name="main"}
<div class="if_wrap">
	<div class="cus-con">
		<div class="set_tit"><span>{$title}</span></div>
		<div class="set-top layui-form layui-form-item" style="display:flex;flex-wrap:wrap;">
			<div class="layui-input-inline">
				<label style="width:40px;" class="layui-form-label mkz_t1">时间：</label>
				<input type="text" style="width:85px;" class="layui-input" id="start" name="timeArea" readonly="readonly" value="{$start}">
				<span style="line-height: 35px; padding: 0 5px;">-</span>
				<input type="text" style="width:85px;" class="layui-input" id="end" name="timeArea" readonly="readonly" value="{$end}">
			</div>
			
			
			{if condition=" count($province) >1 "}
			<div class="layui-input-inline">
				<select name="province_id" id="province_id" lay-filter="province_id" lay-search="">
					<option value="" disabled selected="">请选择省</option>
					{volist name="province" id="vo"}
					<option value="{$vo.id}">{$vo.name}</option>
					{/volist}
				</select>
			</div>
			{/if}
			<div class="layui-input-inline">
				<select name="city_id" id="city_id" lay-filter="city_id" lay-search="">
					<option value="" disabled selected="">请选择市</option>
					{volist name="staCity" id="vo"}
					<option value="{$vo.id}">{$vo.name}</option>
					{/volist}
				</select>
			</div>
			
			<!-- <div class="layui-input-inline selectCheck" >
				<select id="dj_staff_id" class="cus-input" name="dj_staff_id" xm-select="select1" xm-select-show-count="2" lay-filter="dj_staff_id" lay-search>
					<option value="" disabled>请选择登记人</option>
					{volist name="djStaffList" id="vo"}
					<option value="{$vo.id}">{$vo.staffname}</option>
					{/volist}
				</select>
			</div> -->

			<div class="layui-input-inline" style=" margin-bottom: 5px;width: 200px !important;">
				<div class="sel_box_cc">
					<div class="sel_box">
						<i class="layui-edge"></i>
						<div class="sel_box_tit"><input type="text" readonly="" value="" placeholder='请选择渠道' name="" id="check-wrap2"></div>
						<div class="sel_tree">
							<form class="layui-form"><div id="xtree2" class="xtree_contianer"></div></form>
						</div>
					</div>
				</div>
			</div>
			<input type="hidden" id="code" value="{$code}">
			<br/>
			<button class="layui-btn layui-btn-primary cus-model-btn" id="sub" >查询</button>
			<button class="layui-btn layui-btn-primary cus-model-btn" onclick="table2Excel('账户充值报表.xls')" ><i class="iconfont"></i> 导出</button>
            <button class="layui-btn layui-btn-primary tishi" style="border-radius: 5px;">提示</button>
		</div>
		<div id="vueApp"style="width: 100%;">
			<div v-show="show==0" class="table2excel">
				<table class="layui-hide" id="test" lay-filter="test"></table>
			</div>
		</div>
	</div>
</div>
<script src="__PUBLIC__/js/formSelects-v4.min.js?v={$Think.const.APP_VERSION}"></script>
<script>
	var formSelects = layui.formSelects;
</script>
<script>
	$(function(){
		window.onload = function () {
			layui.use('table', function() {
				search();
			});
		}
		$(".downpanel").on("click",".layui-select-title",function(e){
			var $select=$(this).parents(".layui-form-select");
			$(".layui-form-select").not($select).removeClass("layui-form-selected");
			$select.addClass("layui-form-selected");
			e.stopPropagation();
		}).on("click",".layui-form-checkbox",function(e){
			var id_array=[];
			e.stopPropagation();
			$("input:checkbox[name='shop_code']:checked").each(function() {
				id_array.push($(this).attr("title"));//向数组中添加元素
			});
			var idstr=id_array.join(',');//将数组元素连接起来以构建一个字符串
			$(".downpanel .layui-select-title .layui-input").val(idstr);
		});
	})
	//日历
	layui.use('laydate', function () {
		var laydate = layui.laydate;
		laydate.render({
			elem: '#start'
			,type: 'date'
			,max:0
		});
		laydate.render({
			elem: '#end'
			,type: 'date'
			,max:0
		});

        //提示
        $(".tishi").click(function(){
            layer.open({
                type: 1,
                shadeClose: true,
                skin: 'layui-layer-rim', //加上边框
                area: ['420px', 'auto'], //宽高
                content: '<div style="padding: 15px;">截止花费 = 渠道花费里 花费里设定日期 等于 充值日期，3级渠道相同 的总花费 数 <br><br> 本月账户总额 = 本月充值金额 + 本月返点金额 <br><br> 截止账户余额 = 充值金额 + 返点金额 - 截止花费 + 之前天数的 账户余额 <br><br> 同一个城市里同一个3级渠道 算 一个账户</div>'
            });
        })
	});
	// form表单
	layui.use('form', function(){
		var form = layui.form;
		var formSelects = layui.formSelects;
		form.on('select(province_id)',function(data){
			var provice = data.value;
			if(!provice) return false;
			$.ajax({
				type: "POST",
				url: '/crm/Customer/searchCity',
				data: {pid: provice,type:2},
				success: function (msg) {
					var city = '<option value="" disabled selected="">请选择市</option>';
					for (var i = 0; i < msg.length; i++) {
						city += '<option value="' + msg[i]['id'] + '">' + msg[i]['name'] + '</option>';
						// sales_replace += '<option value="' + msg[i]['id'] + '">' + msg[i]['staffname'] + '</option>';
					}
					$("#city_id").html(city);
					// $("#sales_staff_id").html(sales_replace);
					form.render();
				}
			});
		})
		form.on('select(department_id)', function(data) {
			var department_id = data.value;
			$.ajax({
				type: "POST",
				url: '/crm/Customer/getStaffInfos',
				data: {department_id: department_id},
				success: function (msg) {
					var dj_replace = '<option value="" disabled>请选择登记人</option>';
					var sales_replace = '<option value="" disabled>请选择追踪人</option>';
					for (var i = 0; i < msg.length; i++) {
						dj_replace += '<option value="' + msg[i]['id'] + '">' + msg[i]['staffname'] + '</option>';
						// sales_replace += '<option value="' + msg[i]['id'] + '">' + msg[i]['staffname'] + '</option>';
					}
					$("#dj_staff_id").html(dj_replace);
					// $("#sales_staff_id").html(sales_replace);
					formSelects.render('select');
				}
			});
		})
	})
	layui.use('table', function(){
		var table = layui.table;
		// 查询按钮
		$("#sub").click(function() {
			search();
		})
	});
	function search(){
		var table = layui.table;
		var formSelects = layui.formSelects;

		var dj_staff = formSelects.value('select1', 'val');
		var channel = $('#check-wrap2').val();
		var start = $('#start').val();
		var end   = $('#end').val();
		var code   = $('#code').val();
		var city  = $('#city_id').val();
		var b_id  = $('#b_id').val();
		
		var index = layer.load(1, {shade: false}); //0代表加载的风格，支持0-2
		table.render({
			elem: '#test'
			, url: '/crm/Report/data'
			, toolbar: '#toolbarDemo'
			, title: '账户充值报表'
			/*		  , page:true
			 , limit:10*/
			, method:'POST'
			, where: {id:'Qqbaby_account_recharge',code:code,dj_staff:dj_staff,channel:channel,start:start,end:end,city:city,b_id:b_id}
			, height: 'full-200'
			, cols: [[
				/*{field: 'id', title: 'id', width: 150, align: 'center', sort: true},*/
				{field: 'city_name', title: '城市',align: 'center', width: 120}
				,{field: 'channel_info_name', title: '一级渠道(2级)',align: 'center', width: 160}
				,{field: 'channel_name', title: '二级渠道(3级)',align: 'center', width: 160}
				,{field: 'money_by', title: '本月账户总额',align: 'center', width: 120}
				,{field: 'money_by_cz', title: '本月充值金额',align: 'center', width: 120}
				,{field: 'money_by_fd', title: '本月返点金额',align: 'center', width: 120}
				,{field: 'add_staff_name', title: '登记人',align: 'center', width: 120}
				,{field: 'time', title: '充值日期',align: 'center', width: 120}
				,{field: 'money', title: '充值金额',align: 'center', width: 120}
				,{field: 'money_fd', title: '返点金额',align: 'center', width: 120}
				,{field: 'cost', title: '截止花费',align: 'center', width: 120}
				,{field: 'jz_money_ye', title: '截止账户余额',align: 'center', width: 120}		
			]]
			,even: true
			,done: function(res, curr, count){
				layer.close(index);
			}
		});
	}
    function table2Excel(filename){
        $(".table2Excel").table2excel({
            exclude: ".noExl",//class="noExl"的列不导出
            name: "Excel Document Name",
            filename: filename,//文件名称
            fileext: ".xls",//文件后缀名
            exclude_img: true,//导出图片
            exclude_links: true,//导出超链接
            exclude_inputs: true//导出输入框内容
        });
    }
</script>
<!--引用xtree-->
<script src="__PUBLIC__/js/layui-xtree.js?v={$Think.const.APP_VERSION}" type="text/jscript"></script>
<script type="text/javascript">
	var json = {$channel};

	//********************
	//	正式开始
	//********************

	//  layui 的 form 模块是必须的
	layui.use(['jquery','form'], function () {
		var $ = layui.$
		,form = layui.form;

		//1、最基础的用法 - 直接绑定json
		var xtree1 = new layuiXtree({
			elem: 'xtree2'   //(必填) 放置xtree的容器，样式参照 .xtree_contianer
			, form: form	 //(必填) layui 的 from
			, data: json	 //(必填) json数据
			, isopen: false  //加载完毕后的展开状态，默认值：true
			, click: function (data) {  //节点选中状态改变事件监听，全选框有自己的监听事件
				var oCks = xtree1.GetChecked(); //这是方法
				var checkArr=[];
				for (var i = 0; i < oCks.length; i++) {
					checkArr.push(oCks[i].title);
				}
				$("#check-wrap2").val(checkArr.join(","))
			}
		});
	});
	//////////////获取下拉tree的值到input里
	$(".sel_box_cc input").focus(function() {
		$(".sel_tree").hide();
		$(this).parents(".sel_box_cc").find(".sel_tree").show();
		$(this).parent().prev().addClass("layui-form-selected");
	})
	//
	$(document).bind("click", function (e) {
		var target = $(e.target);
		if (target.closest(".sel_tree").length == 0 && target.closest(".sel_box_cc input").length == 0) {
			$(".sel_tree").hide();
			$(".layui-edge").removeClass("layui-form-selected");
		}
	});
</script>
{/block}