{layout name="layout" /}
<link rel="stylesheet" href="__PUBLIC__/admin/css/set.css">

<style>
.layui-table {
	height:auto;
	min-height:none;
}

.laytable-cell-1-image,.laytable-cell-1-user_img{
	height: 100%;
}

.layui-table-cell{
    height: auto;
}
</style>
<div class="if_wrap">
	<div id="if_con">
		<div class="cus-con">
			<div class="set-top">
			{$topmenu}
			</div>
			<table class="layui-table" lay-data="{ url:'{:url('vip/Shopinfo/shopList');}', page:true, id:'idTest'}" lay-filter="demo">
				<thead>
				<tr>
					<td lay-data="{width:90,field:'id',sort:true,templet:'#indexTpl'}">序号</td>
					<td lay-data="{width:250,field:'shop_name'}">店面名称</td>
					<td lay-data="{width:200,field:'shop_photo',toolbar:'#imgbox'}">店面</td>
					<td lay-data="{width:200,field:'add_staff',sort:true,}">添加人</td>
                    <td lay-data="{width:200,field:'create_time',sort:true,}">添加时间</td>
					<td lay-data="{width:270,align:'center',toolbar:'#barDemo'}">操作</td>
				</tr>
				</thead>
			</table>
		</div>
	</div>
</div>

<div id="type-set" class="type-wrap" style="display: none;padding: 20px">
    <div class="layui-form config-form">
        <div id="set-type" style="height: 80%;overflow-y: auto;overflow-x:hidden;">

        </div>

        <div class="config-btm flex">
            <input type="text" id="set-type-name" autocomplete="off" class="layui-input config-input">
            <div class="layui-btn" id="set-type-btn">新增</div>
        </div>
    </div>
</div>

<script type="text/html" id="indexTpl">
    {{d.LAY_TABLE_INDEX+1}}
</script>

<script type="text/html" id="imgbox">
	{{# if(d.shop_photo){ }}
	<img src="{{d.shop_photo}}" width="200" />
	{{# } }}
</script>

<script type="text/html" id="barDemo">
{notempty name="edit"}
	<a class="ex_start edit" lay-event="edit" href="{:url('vip/shopinfo/shopedit');}?id={{d.id}}">修改</a>
{/notempty}

{notempty name="del"}
	<a class="ex_view" lay-event="del" data-id="{{d.id}}">删除</a>
{/notempty}
	<input type="hidden" class="id_php" value="{{d.id}}"/>
</script>

<script>
	layui.use(['form','laydate', 'laypage', 'layer', 'table', 'carousel', 'upload', 'element'], function(){
		var laydate = layui.laydate //日期
				,laypage = layui.laypage//分页
                ,layer = layui.layer //弹层
				,table = layui.table //表格
				,carousel = layui.carousel //轮播
				,upload = layui.upload //上传
				,element = layui.element//元素操作
                ,form=layui.form;
		//监听工具条
		table.on('tool(demo)', function (obj) { //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
			var data = obj.data //获得当前行数据
					, layEvent = obj.event; //获得 lay-event 对应的值
			if (layEvent === 'del') {
				var id = $(this).attr("data-id");
				layer.confirm('你确定要删除这条记录吗？', function (index) {
					layer.close(index);
					//向服务端发送删除指令
					if(id){
						$.ajax({
							url:"{:url('vip/shopinfo/shopdel');}",
							data:{id:id},
							type:'post',
							success:function(e){
								if(e.code==200){
									obj.del(); //删除对应行（tr）的DOM结构
									layer.msg('恭喜删除成功', {
										icon: 1,
									});
								}else{
									layer.msg('抱歉,删除失败',{
										icon: 2,
									});
								}
							}
						})
					}
				});
			}else if(layEvent === 'setstatus'){
				var thisobj = $(this);
				var id   = $(this).attr("data-id"); // 获取要操作的id
				var text = $(this).html();  // 获取当前是什么状态
				var status = text=='启用'?'0':'1';
				layer.confirm('你确定要'+text+'吗？', function (index) {
					layer.close(index);
					//向服务端发送删除指令
					$.ajax({
						url:"{:url('vip/Marriagecircle/editStatus');}",
						data:{id:id,status:status},
						type:'post',
						success:function(e){
							thisobj.html(text=='启用'?'停用':'启用');
							if(e.code==200){
								layer.msg('设置成功',{
									icon: 1,
								});
							}else{
								layer.msg(e.msg,{
									icon: 2,
								});
							}
						}
					})
				});
			}
		});

		laypage.render({
			elem: 'pageDemo' //分页容器的id
			,count: 100 //总页数
			,limits: [2,10,20,30]
			,skin: '#1E9FFF' //自定义选中色值
			//,skip: true //开启跳页
			,jump: function(obj, first){
				if(!first){
					layer.msg('第'+ obj.curr +'页');
				}
			}
		});


        //弹窗设置类别
        $('#add_type').click(function(){
            $('#set-type-name').val('');
            var type_str = '';
            $.ajax({
                type:'post',
                url:"{:url('Guestphoto/getType')}",
                success:function(res){
                    var set_type = res.data;
                    if(set_type){
                        $.each(set_type,function(k,v){
                            type_str += getSetStr(v.id,v.type_name);
                        })
                    }
                    $('#set-type').html(type_str);
                    form.render();
                }
            });

            layer.open({
                title: '类型配置',
                type: 1,
                skin: 'layui-layer-rim',
                area: ['740px', '550px'],
                content: $('#type-set'),
                btn: ['确定']
            });
        });

        //获取内容
        function getSetStr(id,name){
            var res_str = '<div class="remind-row flex device-div" data-id="'+ id +'">';
            res_str += '<div class="config-left">';
            res_str += '<input type="text" autocomplete="off" disabled class="layui-input config-input" value="'+ name +'">';
            res_str += '</div>';
            res_str += '<div class="config-right">';
            res_str += '<span class="config-edit-btn edit-span">编辑</span>';
            res_str += '<span class="config-edit-btn delete-span">删除</span>';
            res_str += '</div>';
            res_str += '</div>';
            return res_str;
        }

        //新增类别
        $('#set-type-btn').click(function(){
            var type_name = $('#set-type-name').val();
            $.ajax({
                type:'post',
                url:'{:url("Guestphoto/addType")}',
                data:{type_name:type_name},
                success:function(res){
                    if(res.code == 200){

                        var add_str = getSetStr(res.data,type_name);
                        $('#set-type').append(add_str);
                        $('#set-type-name').val('');
                        form.render();
                    }
                }
            })
        });


        //点击编辑设备
        $("body").on("click",".edit-span",function(){
            $(this).parents(".remind-row").find(".config-input").attr("disabled",false).focus();
        });

        //进行编辑类别
        $("body").on("blur",".type-wrap .config-left .config-input",function(){
            var type_id = $(this).parents('.device-div').attr('data-id');
            var type_name = $(this).val();
            $.ajax({
                type:'post',
                url:'{:url("Guestphoto/addType")}',
                data:{id:type_id,type_name:type_name}
            });
            $(this).attr("disabled",true);
        });

        //删除类别
        $("body").on("click",".type-wrap .delete-span",function(){
            var the_parent = $(this).parents('.device-div');
            var type_id = the_parent.attr('data-id');

            $.ajax({
                type:'post',
                url:'{:url("Guestphoto/delType")}',
                data:{id:type_id},
                success:function(res){
                    if(res.code == 200){
                        the_parent.remove();
                    }
                }
            });
        });

    });

</script>

</body>
</html>