<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title>编辑账号</title>
	<link rel="stylesheet" href="/component/pear/css/pear.css" />
	<style>
		.inputTxt {
			margin-left: 10px;
		}
	</style>
</head>

<body>
	<form id="edit-account" class="layui-form layui-form-pane" action="" lay-filter="edit-account">
		<div class="mainBox">
			<div class="main-container">
				<div class="layui-form-item" pane>
					<label class="layui-form-label">账号ID</label>
					<div class="layui-input-block">
						<div class="layui-form-mid inputTxt">
							<?php echo $id ?>
						</div>
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">收款平台</label>
					<div class="layui-input-block">
						<select name="platform" lay-filter="select-platform">
							<option value="">收款平台</option>
						</select>
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">收款账号</label>
					<div class="layui-input-block">
						<input type="text" name="account" autocomplete="off" class="layui-input">
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">登陆密码</label>
					<div class="layui-input-block">
						<input type="text" name="password" autocomplete="off" class="layui-input">
					</div>
				</div>
				<div class="layui-form-item" pane>
					<label class="layui-form-label">启用</label>
					<div class="layui-input-block">
						<input type="checkbox" name="state" class="layui-input" lay-skin="switch" lay-text="启用|禁用">
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">监听模式</label>
					<div class="layui-input-block">
						<select name="pattern">
							<option value="请选择"></option>
							<?php include_once '../view/tpl/pattern.html'; ?>
						</select>
					</div>
				</div>
				<div class="layui-form-item layui-form-text">
					<label class="layui-form-label">查询参数
						<a href="https://www.jyshare.com/front-end/53/" class="layui-font-blue" style="float: right;"
							target="_blank">
							<span class="layui-font-gray">JSON工具 </span><span class="icon pear-icon">&#xe6b6;</span>
						</a>
					</label>
					<div class="layui-input-block">
						<textarea name="params" placeholder="账号订单查询自定义参数，JSON格式，没有请勿填写！"
							class="layui-textarea"></textarea>
					</div>
				</div>
			</div>
		</div>
		<div class="bottom">
			<div class="button-container">
				<button type="submit" class="pear-btn pear-btn-primary pear-btn-sm" lay-submit=""
					lay-filter="save-account">
					<i class="layui-icon layui-icon-ok"></i>
					提交
				</button>
				<button type="reset" class="pear-btn pear-btn-sm">
					<i class="layui-icon layui-icon-refresh"></i>
					重置
				</button>
			</div>
		</div>
	</form>
	<script src="/component/layui/layui.js"></script>
	<script src="/component/pear/pear.js"></script>
	<script>
		layui.use(['form'], function () {
			let form = layui.form;

			// 渲染插件选项
			(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');
				// 初始化表单
				form.val('edit-account', {
					"platform": "<?php echo $platform ?>",
					"account": "<?php echo $account ?>",
					"password": "<?php echo $password ?>",
					"state": '<?php echo $state ?>' == 1 ? true : false,
					"pattern": "<?php echo $pattern ?>",
					"params": `<?php echo $params ?>`,
				});
			})()
			// select 事件
			const platform = "<?php echo $platform ?>";
			if (platform === 'wxpay' || platform === 'alipay') {
				changePat(false);
			}
			form.on('select(select-platform)', function (data) {
				const value = data.value; // 获得被选中的值
				if (value === 'wxpay' || value === 'alipay') {
					changePat(false);
				} else {
					changePat(true);
				}
			});
			// 提交
			form.on('submit(save-account)', function (obj) {
				let field = obj.field;
				field.state = 'state' in field ? 1 : 0;
				field.id = '<?php echo $id ?>';
				field.params = field.params === '' ? '{}' : field.params;
				(async () => {
					const url = '/api/PayManage/editAccount';
					const info = field;
					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 }, () => {
							parent.layer.close(parent.layer.getFrameIndex(window.name)); //关闭当前页
							parent.layui.table.reload("account-table");
						});
					} else {
						layer.msg(rec_info.msg, { icon: 2, time: 1200 });
					}
				})()
				return false;
			});
			// 操作元素显示
			function changePat(is_show = true) {
				const field1 = document.querySelector('input[name="password"]').parentNode.parentNode;
				const field2 = document.querySelector('select[name="pattern"]').parentNode.parentNode;
				const field3 = document.querySelector('textarea[name="params"]').parentNode.parentNode;
				if (is_show) {
					field1.style.display = 'block';
					field2.style.display = 'block';
					field3.style.display = 'block';
				} else {
					field1.style.display = 'none';
					field2.style.display = 'none';
					field3.style.display = 'none';
				}
			}
		})
	</script>
</body>

</html>