<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<script src="../../../admin/index.js" door type="text/javascript" charset="utf-8"></script>
		<!--下拉选择模板-->
		<script type="text/html" id="selectTpl">
			<option value="">{{d.name}}</option>
		    {{# if(!d.list){d.list = []}}} {{# for(var i=0;i<d.list.length;i++){}} 
				<option value="{{d.list[i].id}}">{{d.list[i].name}}</option>
			{{#}}}
		</script>
	</head>

	<body>
		<form class="layui-form" action="" lay-filter="addForm" style="padding: 20px 30px 0 0">
			<div class="layui-form-item">
				<label class="layui-form-label ui-required">类别</label>
				<div class="layui-input-block" id="bigTypeSelect">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label ui-required">产品名称</label>
				<div class="layui-input-block">
					<input type="text" name="name" lay-verify="required" maxlength="16" placeholder="请输入产品名称" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label ui-required">产品图片</label>
				<div class="layui-input-inline">
					<div class="imgBox"><img src="" /></div>
				</div>
				<button style="float: left;" type="button" class="layui-btn" id="uploadImg">选择图片</button>
			</div>
			<div class="layui-form-item layui-hide">
				<button class="layui-btn" lay-submit lay-filter="formSubmit" id="formSubmit">保存</button>
			</div>
		</form>
		<script type="text/javascript">
			layui.config({
				base: "../../../admin/js/layuiPlugins/"
			}).use(["form", 'layer', 'cascade', 'laytpl', 'upload'], function() {
				var form = layui.form,
					$ = layui.$,
					layer = layui.layer,
					laytpl = layui.laytpl,
					cascade = layui.cascade,
					upload = layui.upload;
				var object = {
					id: (JSON.stringify(location.searchObj()) != "{}") ? location.searchObj().id || null : null, //带参传入ID
					currentData: {},
					urls: {
						formUrl: "productFormUrl",
						byIdUrl: "productByIdUrl",
						uploadFileUrl: 'uploadFileUrl'
					},
					formLayFilter: "addForm", //表单容器
					closeModal: function() { //关闭当前窗口
						parent.layer.close(parent.layer.getFrameIndex(window.name));
					}
				};

				//初始化
				object.main = function() {
					var _this = this;
					if (_this.id) {
						_this.getCurrent(_this.id);
					} else {
						_this.initialization();
					}
					_this.bigTypeCascade = cascade.render({
						elem: "#bigTypeSelect",
						hostParm: {
							idName: 'bigTypeId'
						},
						url: {
							productBigTypeId: 'productBigTypeUrl',
							productTypeId: 'productSmallTypeUrl'
						},
						placeholder: {
							productBigTypeId: "请选择大类别",
							productTypeId: "请选择小类别"
						},
						data: {
							type: 'productType'
						},
						listParamName: {
							valueName: 'id',
							name: 'name'
						},
						verify: {
							productBigTypeId: "required",
							productTypeId: "required"
						}
					});

					// 上传图片
					upload.render({
						elem: '#uploadImg',
						url: 'uploadFileUrl',
						accept: 'images',
						method: 'get',
						acceptMime: 'image/*',
						size: 5 * 1024,
						before: function(obj) {
							obj.preview(function(index, file, result) {
								$('.imgBox img').attr('src', result);
							});
							layer.msg('正在上传中', {
								icon: 16,
								shade: 0.01
							});
						},
						done: function(res) {
							layer.closeAll();
							if (res.code == 0) {
								_this.currentData.imgUrl = res.data[0].url;
							} else {
								return layer.msg('上传失败');
							}
						}
					});
					form.on('submit(formSubmit)', function(obj) {
						return _this.mergeData(obj.field).submitInfo();
					});
					return _this;
				};

				//初始化
				object.initialization = function() {
					var _this = this;
					return _this;
				};
				//合并表单内容
				object.mergeData = function(obj) {
					this.currentData = $.extend(this.currentData, obj);
					return this;
				};
				//获取当前信息
				object.getCurrent = function(id) {
					var _this = this;
					$.ajax({
						url: _this.urls.byIdUrl,
						data: {
							id: id || _this.id //当前ID
						},
						success: function(res) {
							_this.currentData = res.data[0];
							$('.imgBox img').attr('src', window.hywa.config.href + '/' + res.data[0].imgUrl);
							_this.formVal();
						}
					});
					return this;
				};
				//表单赋值
				object.formVal = function() {
					var _this = this;
					form.val(_this.formLayFilter, _this.currentData);
					_this.bigTypeCascade.val(_this.currentData);
					return _this;
				};
				//提交新增修改
				object.submitInfo = function() {
					var _this = this;
					if (!_this.currentData.imgUrl) {
						layer.msg('请上传产品图片', {
							icon: 7
						});
						return false;
					}
					$.ajax({
						type: 'POST',
						url: _this.id ? 'productUpdateFormUrl' : 'productAddFormUrl',
						data: JSON.stringify(_this.currentData),
						contentType: 'application/json',
						success: function(res) {
							if (res.code == 0) {
								parent.layer.msg(res.msg, {
									icon: 1
								});
								parent.layui.table.reload('tableData');
								_this.closeModal();
							} else {
								layer.msg(res.msg, {
									icon: 2
								});
							}
						}
					});
					return false;
				};
				object.main();

				//验证规则
				form.verify({
					nickname: function(value) {
						if (!new RegExp("^[a-zA-Z][a-zA-Z0-9_]*$").test(value)) {
							return '用户名必须以英文字母开头，只能包含英文字母、数字、下划线';
						}
						if (/(^\_)|(\__)|(\_+$)/.test(value)) {
							return '用户名首尾不能出现下划线\'_\'';
						}
					},
					phoneNumber: function(value) {
						if (value) {
							if (!(/^1[3|4|5|7|8]\d{9}$/).test(value)) {
								return '请输入正确的手机号码';
							}
						}
						return false;
					}
				});
			});
		</script>
	</body>

</html>
