<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title>收款管理</title>
	<link rel="stylesheet" href="/component/pear/css/pear.css" />
	<style>
		.account-trade {
			padding: 15px;
		}
	</style>
</head>

<body class="pear-container">
	<div class="layui-card">
		<div class="layui-card-body">
			<form class="layui-form layui-form-pane" action="" id="serch-form">
				<div class="layui-form-item">
					<div class="layui-inline">
						<label class="layui-form-label">收款平台</label>
						<div class="layui-input-inline">
							<select name="platform">
								<option value="">收款平台</option>
							</select>
						</div>
					</div>
					<div class="layui-inline">
						<label class="layui-form-label">启用</label>
						<div class="layui-input-inline">
							<select name="state">
								<option value="">请选择</option>
								<option value="1">启用</option>
								<option value="0">禁用</option>
							</select>
						</div>
					</div>
					<div class="layui-inline">
						<label class="layui-form-label">监听模式</label>
						<div class="layui-input-inline">
							<select name="pattern">
								<option value="">请选择</option>
								<?php include_once '../view/tpl/pattern.html'; ?>
							</select>
						</div>
					</div>
					<div class="layui-inline">
						<label class="layui-form-label">收款账号</label>
						<div class="layui-input-inline">
							<input type="text" name="account" autocomplete="off" class="layui-input" placeholder="请输入">
						</div>
					</div>
					<div class="layui-inline">
						<button type="submit" class="pear-btn pear-btn-md pear-btn-primary" lay-submit
							lay-filter="query">
							<i class="layui-icon layui-icon-search"></i>
							查询
						</button>
						<button type="button" lay-on="reset" class="pear-btn pear-btn-md">
							<i class="layui-icon layui-icon-refresh"></i>
							重置
						</button>
					</div>
				</div>
			</form>
		</div>
	</div>
	<div class="layui-card">
		<div class="layui-card-body">
			<table id="account-table" lay-filter="account-table"></table>
		</div>
	</div>
	<script type="text/html" id="account-toolbar">
		<button class="pear-btn pear-btn-success pear-btn-md" lay-event="addAccount">
			<i class="layui-icon layui-icon-add-1"></i>
			添加
		</button>
		<button class="pear-btn pear-btn-danger pear-btn-md" lay-event="delAccount">
			<i class="layui-icon layui-icon-delete"></i>
			删除
		</button>
		<button class="pear-btn pear-btn-warming pear-btn-md" lay-event="testPay">
			<i class="layui-icon layui-icon-cart"></i>
			支付测试
		</button>
	</script>
	<script type="text/html" id="account-state">
		<input type="checkbox" name="state" value="{{d.id}}" lay-skin="switch" lay-text="启用|禁用" lay-filter="accountEnable" {{ d.state == 1 ? 'checked' : '' }} />
	</script>
	<script type="text/html" id="account-checkUrl">
		{{# 
			if (d.platform == '微信支付' || d.platform == '支付宝') {
				return `<p title="双击复制">{"pid":"${d.pid}","aid":"${d.id}","uid":"\{\{UID\}\}","title":"\{\{TITLE\}\}","msg":"\{\{MSG\}\}","time":"\{\{RECEIVE_TIME\}\}","divice":"\{\{DEVICE_NAME\}\}"}</p>`;
			} else {
				return `<p title="双击复制"><?php echo $domain ?>/checkPayResult?pid=${d.pid}&aid=${d.id}</p>`;
			}
		}}
	</script>
	<script type="text/html" id="account-trade">
		{{#	if (d.platform == '微信支付' || d.platform == '支付宝') { }}
			<span class="layui-badge layui-bg-gray">无</span>
		{{# } else { }}
			<a href="javascript:;" lay-event="queryTrade" data-url="/api/PayManage/getAccountTrade?pid={{= d.pid }}&aid={{= d.id }}"><span class="layui-badge layui-bg-green">查询</span></a>
		{{#	} }}
	</script>
	<script src="/component/layui/layui.js"></script>
	<script src="/component/pear/pear.js"></script>
	<script>
		layui.use(['table', 'form', 'common', 'util'], function () {
			let table = layui.table;
			let form = layui.form;
			let common = layui.common;
			let util = layui.util;

			// 渲染插件选项
			(async () => {
				const data = await fetch('/api/Plugin/pluginOption').then(res => res.json());
				let option_str = `<option value="">收款平台</option>`;
				data.forEach(val => {
					option_str += `<option value="${val.platform}">${val.name}</option>`;
				});
				const select = document.querySelector('select[name="platform"]');
				select.innerHTML = option_str;
				form.render('select');
			})()

			let cols = [[
				{ type: 'checkbox' },
				{ title: '平 台', field: 'platform', align: 'center', templet: '' },
				{ title: '账 号', field: 'account', align: 'center' },
				{ title: '启用状态', field: 'state', align: 'center', templet: '#account-state' },
				{ title: '监听模式', field: 'pattern', align: 'center' },
				{ title: '监听地址 / 自定义模版', field: 'checkUrl', align: 'center', minWidth: 300, event: 'copy', templet: '#account-checkUrl' },
				{ title: '收款平台流水', field: 'trade', align: 'center', templet: '#account-trade' },
				{ title: '收款码数量', field: 'channel', align: 'center', templet: '<div><a href="javascript:;" lay-event="channelList"><span class="layui-badge layui-bg-green">{{= d.channel }}</span></a></div>' },
				{ title: '操作', align: 'center', fixed: 'right', templet: '<div><a href="javascript:;" class="layui-font-green" lay-event="edit"><strong>编辑</strong></a></div>' }
			]]

			table.render({
				id: 'account-table',
				elem: '#account-table',
				url: '/api/PayManage/getPayAccount',
				page: true,
				cols: cols,
				skin: 'line',
				toolbar: '#account-toolbar',
				defaultToolbar: [{
					title: '刷新',
					layEvent: 'refresh',
					icon: 'layui-icon-refresh',
				}, 'filter', 'print', 'exports']
			});

			// 事件处理

			// 表格单元格事件
			table.on('tool(account-table)', function (obj) {
				const id = obj.data.id;
				if (obj.event === 'edit') {
					account.editAccount(id);
				} else if (obj.event === 'channelList') {
					account.channelList(id);
				} else if (obj.event === 'queryTrade') {
					const url = this.getAttribute('data-url');
					account.getAccountTrade(url);
				}
			});
			table.on('toolDouble(account-table)', function (obj) {
				if (obj.event === 'copy') {
					const text = obj.tr[0].querySelector('td[data-field="checkUrl"]>div').innerText;
					if (navigator.clipboard) {
						navigator.clipboard.writeText(text).then(() => {
							layer.msg('复制成功');
						});
					} else {
						layer.msg('复制失败，请手动复制');
					}
				}
			});
			// 表格头部按钮事件
			table.on('toolbar(account-table)', function (obj) {
				if (obj.event === 'refresh') {
					table.reload('account-table');
				} else if (obj.event === 'addAccount') {
					account.addAccount();
				} else if (obj.event === 'delAccount') {
					layer.confirm('确定删除账户?', { icon: 3, title: '提示' },
						function (index) {
							const pagedata = table.checkStatus(obj.config.id)
							let select_id = [];
							pagedata.data.forEach(val => {
								select_id.push(val.id);
							});
							httpJSON('/api/PayManage/delAccount', { ids: select_id })
							layer.close(index);
						});
				} else if (obj.event === 'testPay') {
					account.testPay();
				}
			});
			// 表单自定义事件监听
			form.on('submit(query)', function (obj) {
				const field = obj.field;
				let new_field = {};
				for (const key in field) {
					if (field.hasOwnProperty.call(field, key)) {
						const value = field[key];
						if (value) {
							new_field[key] = value;
						}
					}
				}
				table.reload('account-table', { where: new_field });
				return false;
			});
			// 启用状态
			form.on('switch(accountEnable)', function (obj) {
				const state = obj.elem.checked == true ? 1 : 0;
				const id = obj.value;
				const field = { state: state, id: id };
				account.accountEnable(obj, field);
				return false;
			});
			// 监听重置按钮
			util.on({
				reset: function () {
					document.querySelector('#serch-form').reset();
					table.reload('account-table', { where: {} });
				}
			});

			// 操作方法
			let account = {};

			// 编辑
			account.editAccount = function (id) {
				layer.open({
					id: 'iframe-edit-account',
					type: 2,
					title: '收款账号编辑',
					shade: 0.1,
					area: [common.isModile() ? '100%' : '500px', common.isModile() ? '100%' : '600px'],
					content: `/PayManage/editAccount?id=${id}`,
				});
			}
			// 终端列表
			account.channelList = function (id) {
				layer.open({
					id: 'iframe-channel-list',
					type: 2,
					title: '收款码',
					shade: 0.1,
					area: [common.isModile() ? '100%' : '500px', common.isModile() ? '100%' : '700px'],
					content: `/PayManage/channelList?id=${id}`,
				});
			}
			// 添加账号
			account.addAccount = function () {
				layer.open({
					id: 'iframe-add-account',
					type: 2,
					title: '添加账号',
					shade: 0.1,
					area: [common.isModile() ? '100%' : '500px', common.isModile() ? '100%' : '500px'],
					content: `/PayManage/addAccount`,
				});
			}
			// 账户启用
			account.accountEnable = async (obj, field) => {
				const res = await fetch('/api/PayManage/accountEnable', { method: 'post', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(field) });
				if (res.status !== 200) {
					layer.msg('请求失败，请重试！', { tips: 2, time: 1200 }, () => { obj.elem.checked = !obj.elem.checked });
					return false;
				}
				const rec_info = await res.json();
				if (rec_info.code === 0) {
					layer.tips(rec_info.msg, obj.othis, { tips: 1, time: 1200 });
				} else {
					layer.msg(rec_info.msg, { icon: 2, time: 1200 }, () => { obj.elem.checked = !obj.elem.checked });
				}
			}
			// 支付测试
			account.testPay = function () {
				layer.open({
					id: 'iframe-test-pay',
					type: 2,
					title: '支付测试',
					shade: 0.1,
					area: [common.isModile() ? '100%' : '480px', common.isModile() ? '100%' : '320px'],
					content: `/Order/testPay`,
				});
			}

			// 查询平台收银流水
			account.getAccountTrade = async function (url) {
				const res = await fetch(url);
				if (res.status !== 200) {
					layer.msg('请求失败，请重试！', { tips: 2, time: 1200 });
					return false;
				}
				const rec_info = await res.json();
				if (rec_info.code === 0) {
					const data = rec_info.data;
					let html = '';
					data.forEach(order => {
						html += `<tr><td>${order.order_no}</td><td>${order.channel}</td><td>${order.price}</td><td>${order.payway}</td></tr>`;
					});
					layer.open({
						type: 1,
						title: '收银流水(近3分钟)',
						area: ['720px', '480px'],
						content: `<div class="account-trade"><table class="layui-table"><thead><tr><th>订单流水</th><th>终端编号</th><th>收款金额</th><th>支付方式</th></tr></thead><tbody>${html}</tbody></table></div>`
					});
				} else {
					layer.msg(rec_info.msg, { icon: 2, time: 1200 });
				}
			}

			// 请求封装
			async function httpJSON(url, info) {
				const res = await fetch(url, { method: 'post', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(info) });
				if (res.status !== 200) {
					layer.msg('请求失败，请重试！', { tips: 2, time: 1200 });
					return false;
				}
				const rec_info = await res.json();
				if (rec_info.code === 0) {
					layer.msg(rec_info.msg, { icon: 1, time: 1200 }, () => { table.reload('account-table') });
				} else {
					layer.msg(rec_info.msg, { icon: 2, time: 1200 });
				}
			}
		})
	</script>
</body>

</html>