{layout name="layout1" /}
<style>
    #div1{position: absolute;
        left:105%;
        bottom:65%;}
        
        .w50{
            width:50%;
        }
        .img{
            width: 60px;
            height:60px;
            position: relative;
             background: #f1f1f1;
             margin-right: 10px;
        }
        .img img{
            width: 100%;
            height: 100%;
            object-fit: cover;
           
        }
        .img input{
            position: absolute; 
        }
        .flex{
            display: flex;
            align-items: center;
        }
        .flexs{
             display: flex;
            align-items: center;
            justify-content: space-between;
        }
        .item{
            width: 93%;
            margin: 10px auto;
            border-bottom: 1px solid #f1f1f1;
            border: 1px solid #dfdfdf;
            padding: 10px;
            border-radius: 5px;
        }
        ._img{
            display: flex;
            align-items: center;
            justify-content: center;
        }
        ._img{
            width: 100%;
            height: 100%;
            font-size: 25px;
            color: #999;
        }
        .flexe{
            border: none;
        }
        .w90{
            width: 90%;
        }
        .delline{
            color: red;
        }
</style>
<div class="layui-col-md12">
    <div class="layui-fluid">
    <div class="layui-card">

            <div class="layui-form" lay-filter="">
                <div class="layui-tab layui-tab-card">
                   <div class="body">
                        <div class="layui-form-item">
                            <label class="layui-form-label"><span class="form-label-asterisk">*</span>页面标题：</label>
                            <div class="layui-input-block">
                                <input name="id" type="hidden" value= {$info.id}>
                                <input type="text" name="name" lay-verify="custom_required" lay-verType="tips"
                                       autocomplete="off"
                                       switch-tab="0" value="{$info.name}" 
                                       class="layui-input">
                            </div>
                        </div>
                        
                        <?php  if(!empty($info['service'])):    ?>
                        <?php  foreach($info['service'] as $v):   ?>
                        <div class="layui-form-item flexs item">
                           <div class="w90 flex">
                                <div class="img"> 
                                     <img src="<?php echo $v['img']?>" alt="" />
                                     <input name="img[]" type="hidden" value="<?php echo $v['img']?>">
                                </div>
                                <div class="w50">
                                     <input type="text" name="url[]"   value="<?php echo $v['url']?>"  class="layui-input" placeholder="请输入点击图片跳转链接">
                                </div>
                           </div>
                           <div class="delline">删除</div>
                        </div>
                        <?php endForeach;?>
                        <?php  endif; ?>
                   </div>
                    
                    <div class="flexe item">
                        <button type="button" class="layui-btn" onclick="addline()">新增一列</button>
                    </div>
          
                    <div class="layui-form-item layui-hide">
                        <input type="button" lay-submit lay-filter="edit-user_level-submit" id="edit-user_level-submit" value="确认">
                    </div>
                </div>


            </div>
    </div>
    </div>
</div>
<script>
    var $ = null
    
    function delline(){
        $('.delline').click(function(){
            $(this).parent().remove()
        }) 
       
    }
    
    function upimg(){
        $('.img').off()
         $('.img').click(function(){
             var t = $(this);
            var windows = layer.open({type: 2, title: "上传图片", content: '/admin/file/image.html', area: ["90%", "90%"]});
            window.callback = function (imgs) {
                if(imgs && imgs[0]){
                    t.find('img').remove()
                     t.find('._img').remove()
                      t.append('<img src="'+imgs[0]+'">')
                      t.find('input').val(imgs[0])
                }  
            };
            
        })
    }
    
    
     
    function addline(){
        var tp = `
             <div class="layui-form-item flexs item">
               <div class="w90 flex">
                    <div class="img"> 
                         <div class="_img">
                             +
                         </div>
                         <input name="img[]" type="hidden" value= ''>
                    </div>
                    <div class="w50">
                         <input type="text" name="url[]"   value=""  class="layui-input" placeholder="请输入点击图片跳转链接">
                    </div>
               </div>
               <div class="delline">删除</div>
            </div>
        `
        $('.body').append(tp)
        delline()
        upimg()
    }
    
   


    layui.config({
        version:"{$front_version}",
        base: '/static/plug/layui-admin/dist/layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index','table','likeedit','like'], function(){
             $ = layui.$
            ,form = layui.form
            ,like = layui.like
            ,likeedit = layui.likeedit;
//富文本上传图片
        likeedit.set({
            uploadImage: {
                url: "{:url('file/image')}",
                type: 'post'
            }
        })
        
        delline()
        upimg()
        var service = likeedit.build('service'); //建立编辑器
        var privacy = likeedit.build('privacy'); //建立编辑器
        var after_sale = likeedit.build('after_sale'); //建立编辑器
        form.verify({

            content: function() {
                likeedit.sync(service)
                likeedit.sync(privacy)
                likeedit.sync(after_sale)
            }
        })
        form.verify({

        });
        form.on('submit(setmnp)',function (data) {
            layui.$.ajax({
                url: '{:url("ShopSetting/setPolicy")}'//实际使用请改成服务端真实接口
                ,data: data.field
                ,type: 'post'
                ,success: function(res){ 

                    // if(res.code == 0)
                    // {
                    //     layer.msg(res.msg, {
                    //         offset: '15px'
                    //         ,icon: 2
                    //         ,time: 1000
                    //     });
                    //     return false;
                    // }

                    //登入成功的提示与跳转
                    layer.msg(res.msg, {
                        offset: '15px'
                        ,icon: 1
                        ,time: 1500
                    }, function(){
                        
                    });
                },
                error:function(res){
                    layer.msg('网络错误', {
                        offset: '15px'
                        ,icon: 2
                        ,time: 1000
                    }, function(){
                        return;
                    });
                }
            });
        });
    });
    
     
</script>