{include file="public/header" type="other"/}
 	{include file="public/footer"/}
<style>
	@media(max-width:760px) {
		.layui-form-label {
			float: unset;
			display: unset;
			padding: unset;
			width: unset;
			font-weight: unset;
			line-height: unset;
			text-align: unset;
		}

		.layui-input-block {
			margin-left: unset;
			min-height: unset;
		}
	}
</style>
	<form class="layui-form" action="">
		<div class="mainBox">
			<div class="main-container">
			    <div class="layui-form-item">
					<label class="layui-form-label">
						套餐图标
					</label>
					<div class="layui-input-block" style="position: relative;">
					                
 										<button style="position: absolute;right: 0;" class="pear-btn pear-btn-primary pear-btn-sm  upload-image"
 											type="button">
 											<i class="fa fa-image">
 											</i>
 											上传图片
 										</button>
 										<input class="layui-input" placeholder="不设置展示默认图标" lay-verify="uploadIcon"  name="icon" 
 											value="{$model['icon']??''}" />
 										<div class="upload-image">
 											<span>
 											</span>
 											<img class="upload-image" src="{$model['icon']??''}" />
 										</div>
 									</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">
						头像框
					</label>
					<div class="layui-input-block" style="position: relative;">
					                
 										<button style="position: absolute;right: 0;" class="pear-btn pear-btn-primary pear-btn-sm  upload-image"
 											type="button">
 											<i class="fa fa-image">
 											</i>
 											上传图片
 										</button>
 										<input class="layui-input" placeholder="不设置不显示头像框"  lay-verify="uploadAvatar"  name="avatar_frame" 
 											value="{$model['icon']??''}" />
 										<div class="upload-image">
 											<span>
 											</span>
 											<img class="upload-image" src="{$model['avatar_frame']??''}" />
 										</div>
 									</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">
						套餐名称
					</label>
					<div class="layui-input-block">
						<input type="text" class="layui-input layui-form-danger" placeholder="例如:VIP" name="name"
							type="text" value="{$model['name']??""}" />
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">
						套餐费率
					</label>
					<div class="layui-input-block">
						<input type="text" class="layui-input layui-form-danger" placeholder="费率范围设置项:0-100"
							name="feilv"  value="{$model['feilv']??""}" />
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">
						套餐金额
					</label>
					<div class="layui-input-block">
						<input type="text" class="layui-input layui-form-danger" name="money" 
							value="{$model['money']??""}" />
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">
						套餐时间
					</label>
					<div class="layui-input-block">
						<input type="text" class="layui-input layui-form-danger" placeholder="填写实际数字即可,例:888" name="viptime"
						 value="{$model['viptime']??""}" />
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">额外功能</label>
					<div class="layui-input-block">
						<table class="layui-table">
							<thead>
								<tr>
									<th>名称</th>
									<th>操作</th>
									<th>配置项</th>
								</tr>
							</thead>
							<tbody>
								<tr>
									<td>
										<span>订单加费</span>
									</td>
									<td>
										<input type="checkbox" name="is_profiteer" lay-skin="switch" lay-text="开|关"
											lay-filter="profiteer">
									</td>
									<td>
										<div id="profiteer" >
											<div class="layui-form-item">
												开启之后用户的费率将由用户的客户支付,但是用户仍需要充值余额
											</div>
										</div>
									</td>
								</tr>
								<tr>
									<td>
										<span>通道限制</span>
									</td>
									<td>
										<input type="checkbox" name="is_addChannelNum" lay-skin="switch" lay-text="开|关"
											lay-filter="is_addChannelNum">
									</td>
									<td>
										<div id="addChannelNum" style="pointer-events: none;">
											<div class="layui-form-item">
												<label class="layui-form-label">
													限制添加通道
												</label>
												<div class="layui-input-block">
													<input type="text" class="layui-input layui-form-danger"
													placeholder="填写实际数字即可,例如:3(只能添加3个通道)"	name="addChannelNum" />
												</div>
											</div>
										</div>
									</td>
								</tr>
								<tr>
									<td>
										<span>收款限额</span>
									</td>
									<td>
										<input type="checkbox" name="is_quota" lay-skin="switch" lay-text="开|关"
											lay-filter="quota">
									</td>
									<td>
										<div name="quota" style="pointer-events: none;">
											<div class="layui-form-item">
												<label class="layui-form-label">
													日收款限额
												</label>
												<div class="layui-input-block">
													<input type="text" class="layui-input layui-form-danger"
													placeholder="填写实际数字即可,例如:100"	name="today_quota" />
												</div>
											</div>
										</div>
										<div name="quota" style="pointer-events: none;">
											<div class="layui-form-item">
												<label class="layui-form-label">
													月收款限额
												</label>
												<div class="layui-input-block">
													<input type="text" class="layui-input layui-form-danger"
													placeholder="填写实际数字即可,例如:100"	name="moon_quota" />
												</div>
											</div>
										</div>
									</td>
								</tr>
								<tr>
									<td>
										<span>通道绑定</span>
									</td>
									<td>
										<input type="checkbox" name="is_passage" lay-skin="switch" lay-text="开|关"
											lay-filter="passage">
									</td>
									<td>
										<div id="passage" style="pointer-events: none; ">
											<div class="layui-form-item">
												<label class="layui-form-label">
													选择绑定通道
												</label>

												<div class="layui-input-block">
													<div id="channel"></div>
												</div>
											</div>
										</div>
									</td>
								</tr>
							</tbody>
						</table>
					</div>
				</div>
			</div>
		</div>
		<div class="bottom">
			<div class="button-container">
				<button type="submit" class="layui-btn layui-btn-normal layui-btn-sm" lay-submit="" lay-filter="save">

					提交
				</button>
				<button type="reset" class="layui-btn layui-btn-primary layui-btn-sm">
					<i class="layui-icon layui-icon-refresh"></i>
					重置
				</button>
			</div>
		</div>
	</form>

	<script>
		layui.use(['form', 'jquery', 'uploads', 'xmSelect'], function() {
			let form = layui.form;
			let $ = layui.jquery;
			let xmSelect = layui.xmSelect;
			let MODULE_PATH = "{$Request.root}/ypay.vip/";
			var channel = xmSelect.render({
				el: '#channel',
				autoRow: true,
				filterable: true,
				tree: {
					show: true,
					showFolderIcon: true,
					showLine: true,
					indent: 20,
				},
				toolbar: {
					show: true,
					list: ['ALL', 'REVERSE', 'CLEAR']
				},
				filterable: true,
				height: 'auto',
				data: []
			})
            
            $.ajax({
	            type: 'post',
	            url: MODULE_PATH + 'getChannel',
	            success: function(res) {
						channel.update({
		                    data: res.data,
		                    autoRow: true,
	                    })
					}
            });

            form.on("switch(is_addChannelNum)", function(data) {
				var addChannelNum = data.elem.checked ? 1 : 0;
				if (addChannelNum == 1) {
					$('#addChannelNum').css("pointer-events", "auto");
				} else {
					$('#addChannelNum').css("pointer-events", "none");
				}
			});
			form.on("switch(quota)", function(data) {
				var quota = data.elem.checked ? 1 : 0;
				if (quota == 1) {
					$('div[name="quota"]').css("pointer-events", "auto");
				} else {
					$('div[name="quota"]').css("pointer-events", "none");
				}
			});
			form.on("switch(passage)", function(data) {
				var passage = data.elem.checked ? 1 : 0;
				if (passage == 1) {
					$('#passage').css("pointer-events", "auto");
				} else {
					$('#passage').css("pointer-events", "none");
				}
			});
			//建立编辑器

			form.on('submit(save)', function(data) {
				if (data.field.is_profiteer == null || data.field.is_profiteer == '') {
					data.field.is_profiteer = 0;
				} else {
					data.field.is_profiteer = 1;
				}
				if (data.field.is_addChannelNum == null || data.field.is_addChannelNum == '') {
					data.field.is_addChannelNum = 0;
				} else {
					data.field.is_addChannelNum = 1;
					if(data.field.addChannelNum == null || data.field.addChannelNum == ''){
 					    layer.msg('可添加通道次数不能为空', {
									icon: 2,
									time: 1000
								});
						return false;
 					}
				}
				
				if (data.field.is_passage == null || data.field.is_passage == '') {
					data.field.is_passage = 0;
				} else {
					data.field.is_passage = 1;
				}
				
				if (data.field.is_quota == null || data.field.is_quota == '') {
					data.field.is_quota = 0;
				} else {
					data.field.is_quota = 1;
					if(data.field.today_quota == null || data.field.today_quota == ''){
 					    layer.msg('日收款限额不能为空', {
									icon: 2,
									time: 1000
								});
						return false;
 					}
 					if(data.field.moon_quota == null || data.field.moon_quota == ''){
 					    layer.msg('月收款限额不能为空', {
									icon: 2,
									time: 1000
								});
						return false;
 					}
				}
				
				$.ajax({
					data: JSON.stringify(data.field),
					dataType: 'json',
					contentType: 'application/json',
					type: 'post',
					success: function(res) {
						//判断有没有权限
						if (res && res.code == 999) {
							layer.msg(res.msg, {
								icon: 5,
								time: 2000,
							})
							return false;
						} else if (res.code == 200) {
							layer.msg(res.msg, {
								icon: 1,
								time: 1000
							}, function() {
								parent.layer.close(parent.layer.getFrameIndex(window
									.name)); //关闭当前页
								parent.layui.table.reload("vip");
							});
						} else {
							layer.msg(res.msg, {
								icon: 2,
								time: 1000
							});
						}
					}
				})
				return false;
			});
		})
	</script>
</body>
</html>