<div class="layui-fluid">
	<div class="layui-card">
		<div class="layui-card-body">
			<div style="padding-bottom: 10px;">
				<button class="layui-btn layuiadmin-btn-classify" data-type="add">添加</button>
			</div>

			<table id="LAY-shop-classify" lay-filter="LAY-shop-classify"></table>
			<script type="text/html" id="table-shop-classify">
				<a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="edit"><i class="layui-icon layui-icon-edit"></i>编辑</a>
			</script>
		</div>
	</div>
</div>

<script>
	layui.use(['admin', 'table', 'setter'], function() {
		var $ = layui.$,
			view = layui.view,
			form = layui.form,
			admin = layui.admin,
			setter = layui.setter,
			table = layui.table;

		var rr = setter.request.tokenName, tt = setter.tableName;
		table.render({
			elem: '#LAY-shop-classify',
			headers: {jtoken: layui.data(tt)[rr]},
			page: true,
			limit: 20,
			limits: [20, 50, 100, 1000],
			url: setter.apidomain + "yyds/shop/classify",
			cols: [
				[{
					field: 'id',
					title: 'ID',
					fixed: 'left'
				}, {
					field: 'cname',
					title: '分类名称'
				}, {
					field: 'price',
					title: '价格'
				}, {
					field: 'status',
					title: '状态',
					templet: function(d) {
						if (d.status) {
							return '<span style="color: green;">启用</span>';
						} else {
							return '<span style="color: red;">停用</span>';
						}
					}
				}, {
					field: 'note',
					title: '备注'
				}, {
					field: 'username',
					title: '操作人'
				}, {
					field: 'create_time',
					title: '创建时间'
				}, {
					field: 'update_time',
					title: '更新时间'
				}, {
					title: '操作',
					align: 'center',
					fixed: 'right',
					toolbar: '#table-shop-classify'
				}]
			]
		});

		//监听工具条
		table.on('tool(LAY-shop-classify)', function(obj) {
			var data = obj.data;
			if (obj.event === 'edit') {
				admin.popup({
					title: '编辑',
					area: ['350px', '370px'],
					id: 'LAY-popup-classify-add',
					success: function(layero, index) {
						view(this.id).render('shop/classify/add', data).done(function() {
							form.render(null, 'layuiadmin-form-classify');

							//监听提交
							form.on('submit(LAY-classify-front-submit)', function(formData) {
								formData.field.id = data.id;
								var field = formData.field; //获取提交的字段

								//提交 Ajax 成功后，关闭当前弹层并重载表格
								console.log(admin.useAjax("yyds/shop/classify", 'PUT', field));
								layui.table.reload('LAY-shop-classify'); //重载表格
								layer.close(index); //执行关闭
							});
						});
					}
				});
			}
		});

		//事件
		var active = {
			add: function() {
				admin.popup({
					title: '添加分类',
					area: ['350px', '370px'],
					id: 'LAY-popup-classify-add',
					success: function(layero, index) {
						view(this.id).render('shop/classify/add').done(function() {
							form.render(null, 'layuiadmin-form-classify');

							//监听提交
							form.on('submit(LAY-classify-front-submit)', function(data) {
								var field = data.field; //获取提交的字段
								//提交 Ajax 成功后，关闭当前弹层并重载表格
								console.log(admin.useAjax("yyds/shop/classify", 'POST', field));
								layui.table.reload('LAY-shop-classify'); //重载表格
								layer.close(index); //执行关闭 
							});
						});
					}
				});
			}
		};

		$('.layui-btn.layuiadmin-btn-classify').on('click', function() {
			var type = $(this).data('type');
			active[type] ? active[type].call(this) : '';
		});
	});
</script>
