<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>{echo admin_title()}</title>
	{template _header}
</head>
<body>
	<div class="weui-tab">
		<div class="weui-tab__panel">
			<div class="filter">
				<div class="weui-search-bar" id="searchBar">
					<form class="weui-search-bar__form" method="GET" action="{echo \befen\get_url()}">
						<div class="weui-search-bar__box">
							<i class="weui-icon-search"></i>
							<input type="search" class="weui-search-bar__input" id="searchInput" name="wd" placeholder="搜索" />
							<a href="javascript:" class="weui-icon-clear" id="searchClear"></a>
						</div>
						<label class="weui-search-bar__label" id="searchText">
							<i class="weui-icon-search"></i>
							<span>搜索商户</span>
						</label>
					</form>
					<a href="javascript:" class="weui-search-bar__cancel-btn" id="searchCancel">取消</a>
				</div>
			</div>
			<div class="weui-cells" style="margin-top: 0;"></div>
			<div class="more" id="more"></div>
		</div>
		{template _main_nav}
	</div>

	<script>
	//全局请求参数
	var filter = {};
	location.search && location.search.substr(1).split('&').map(param => {
		param = param.split('=');
		filter[param[0]] = param[1]
	})

	//自动加载
	var isloading = 0;
	var load_more = () => {
		if(filter.page == 'last' || isloading) return false;
		filter.page = filter.page ? filter.page + 1 : 1;
		$('#more').text('加载中...');
		isloading = 1;
		$.post('/mo/merchant', filter, (result) => {
			isloading = 0;
			if(result.status == 0){
				alert(result.message);
				return false;
			}
			$('#more').text('加载更多');
			if(result.contents.total == 0){
				filter.page = 'last';
				$('#more').text('暂无数据');
			}
			if(result.contents.last_page <= filter.page){
				filter.page = 'last';
				$('#more').text('~没有更多了');
			}
			let list = [];
			result.contents.list.map((v, i) => {
				list.push([
					'<a class="weui-cell weui-cell_access weui-cell_trade" href="/mo/trade/profit?merchant_id=' + v['merchant_id'] + '">',
					'<div class="weui-cell__bd">',
					'<p>' + v['merchant_name'] + '</p>',
					'</div>',
					'<div class="weui-cell__ft"></div>',
					'</a>'
				].join(''));
			});
			$('.weui-tab__panel').children('.weui-cells').append(list.join(''));
			$('#datePickerBtn .sum').remove();
			if(result.contents.sum !== undefined){
				$('#datePickerBtn').append('<span class="sum" style="display: block; font-size: 13px; color: rgba(0,0,0,.5);">收入 ￥' + result.contents.sum + '</span>');
			}
		})
	}

	var reload = ()=>{
		filter.page = 0;
		$('.weui-tab__panel').children('.weui-cells').empty();
		load_more();
	}

	$('.weui-tab__panel').scroll(function(e){
		if( this.scrollHeight <= $(this).height() + $(this).scrollTop() + 1 ){//加一容错
			load_more();
		}
	})
	$('#more').click(load_more)
	load_more();

	//searchbar
	var searchBar = $('#searchBar'),
		searchText = $('#searchText'),
		searchInput = $('#searchInput'),
		searchClear = $('#searchClear'),
		searchCancel = $('#searchCancel');
	function cancelSearch(){
		searchBar.removeClass('weui-search-bar_focusing');
		searchText.show();
	}
	searchText.on('click', function(){
		searchBar.addClass('weui-search-bar_focusing');
		searchInput.focus();
	});
	searchInput
		.on('blur', function () {
			if(!this.value.length) cancelSearch();
		})
		.on('input', function(){
		})
	;
	searchClear.on('click', function(){
		searchInput.val('').focus();
	});
	searchCancel.on('click', function(){
		cancelSearch();
		searchInput.blur();
	});
	if(filter.wd){
		searchInput.val(decodeURI(filter.wd));
		searchText.click();
	}
	</script>
</body>
</html>