{layout name="layout" /}
<style>
    a ,a:hover{
        color: #fff;
        text-decoration: none;
    }
    .set_con {
        width: 100%;
        height: auto;
        float: left;
        background-color: #fff;
        min-width: 1130px;
        overflow: auto;
        box-sizing: border-box;
        padding-left: 50px;
    }
    .layui-form-item {
        /* margin-bottom: 15px; */
        clear: both;
        width: 1130px;
        margin: 10px 0;
        float: left;
    }
    .layui-input, .layui-textarea {
        width: 190px;
    }
    #if_con {
        overflow: auto;
        background:#fff;
    }
    .height150{
        height:150px;
    }
	.layui-form-label {
		width: 100px;
		padding-left:0;
	}
    .display{ display:none}
.img-mask{
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,.8);
        display: none;
        z-index: 9999;
    }
    .img-flex{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        webkit-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
    }
    .img-content{
        width: auto;
        height: auto;
        max-width: 1024px;
    }
    .form-wrap {
        width: 600px;
        height: auto;
        padding: 10px 20px 30px;
    }
    .layui-upload-list{
        height: auto;
        min-height: 0;
        line-height: 0;
    }
    .layui-upload-img{
        width: auto;
        height: auto;
        max-width: 100px;
        max-height: 100px;

    }
    .img-block{
        width: 100px;
        float: left;
        margin: 5px 20px 10px 0;
        position: relative;
    }
    .img-content{
        width: 100%;
        height: 100px;
        border: 1px solid #e7e7e7;
    }
    .sort-input{
        width: 100%;
        border: 1px solid #e7e7e7;
        height: 30px;
        text-align: center;
        line-height: 30px;
        font-size: 14px;
        color: #333;
        margin-top: 5px;
    }
    .flex{
        display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
    }
    .video{
        width: 300px;
        height: auto;
    }
    #video-type{
        display: none;
    }
    .del-icon{
        position: absolute;
        top: -10px;
        right: -10px;
        width: 20px;
        height: 20px;
        border: 1px solid #e7e7e7;
        border-radius: 50%;
        font-size: 22px;
        cursor: pointer;
        color: #666;
        line-height: 17px;
        text-align: center;
        background: #fff;
    }
    .del-icon:hover{
        background: #333;
        color: #fff;
        border: 1px solid #333;
    }
    .layui-btns:hover {

    opacity: .8;
    filter: alpha(opacity=80);
    color: #fff;

}
.layui-form-switch{
    /* box-sizing: content-box; */
     height: 22px;
    line-height: 22px;
    width: 50px;
}
.layui-form-switch i{
    width: 16px;
    height: 16px;
}
.layui-btns {

    display: inline-block;
    height: 34px;
    line-height: 34px;
    padding: 0 15px;
    background-color: #009688;
    color: #fff;
    white-space: nowrap;
    text-align: center;
    font-size: 14px;
    border: none;
    border-radius: 2px;
    cursor: pointer;
}
</style>
<div class="if_wrap">
<div id="if_con">
    <div class="cus-con">
        <div class="set-top">
            <div class="layui-btn"><a href="{:url('vip/shopinfo/shoplist');}">返回店面列表</a></div>
        </div>
        <form class="layui-form layui-form-pane1" action="" method="post" id="editform" enctype="multipart/form-data">

            <input type="hidden" id="id" value="{$data.id}">
            <div class="layui-form-item">
                <label class="layui-form-label">店面</label>
                <div class="layui-input-inline">
                    {$data.shop_name}
                    {volist name="shop" id="vv"}
                        {if condition="$data.shop_code eq $vv.shop_code"}
                            <input type="hidden" name="shop_code" id="shop_code" value="{$vv.shop_code}" sn-data="{$vv.sn}" name-data="{$vv.shop_name}" >
                        {/if}
                    {/volist}
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">店面照片</label>
                <div class="layui-input-block">
                    <div class="layui-upload">
                        <button type="button" class="layui-btns" id="test4">上传图片</button>
                        <div class="layui-upload-list" id="demo4">
                            {foreach name="$detail" id="vv"}
                            <div class="img-block">
                                <div class="img-content flex">
                                    <img src="{$vv.url}" class="layui-upload-img">
                                </div>
                                <input maxlength="4" class="sort-input" data-img="{$vv.url}" type="hidden" value="" />
                                <div class="del-icon">&times;</div>
                            </div>
                            {/foreach}
                        </div>
                    </div>
                </div>
            </div>

            <div class="layui-form-item" id="img-type">
                <label class="layui-form-label">服务详情图</label>
                <div class="layui-input-block">
                    <div class="layui-upload">
                        <button type="button" class="layui-btns" id="test1">上传图片</button>
                        <input type="hidden" name="up1-img" id="up1-img" value="">
                        <div class="layui-upload-list" id="demo1">
                            <img src="{$data.shop_info_img}" class="layui-upload-img">
                        </div>
                    </div>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">拍照须知图</label>
                <div class="layui-input-block">
                    <div class="layui-upload">
                        <button type="button" class="layui-btns" id="test3">上传图片</button>
                        <input type="hidden" name="up1-img" id="up3-img" value="">
                        <div class="layui-upload-list" id="demo3">
                            <img src="{$data.photo_notice}" class="layui-upload-img">
                        </div>
                    </div>
                </div>
            </div>


            <div class="layui-form-item" id="">
                <label class="layui-form-label">店长微信二维码</label>
                <div class="layui-input-block">
                    <div class="layui-upload">
                        <button type="button" class="layui-btns" id="test2">上传图片</button>
                        <input type="hidden" name="up1-img" id="up2-img" value="">
                        <div class="layui-upload-list" id="demo2">
                            <img src="{$data.wx_qr_code}" class="layui-upload-img">
                        </div>
                    </div>
                </div>
            </div>


            <div class="layui-form-item">
                <label class="layui-form-label">店面电话</label>
                <div class="layui-input-block">
                    <input type="text" name="shop_tel" id="shop_tel" value="{$data.shop_tel}" class="layui-input" maxlength="11" placeholder="请输入店面的联系电话">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">排序</label>
                <div class="layui-input-block">
                    <input type="number" name="sort" id="sort" class="layui-input" value="{$data.sort}">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">是否显示</label>
                <div class="layui-input-block">
                    <input type="checkbox" name="is_show" id="is_show" lay-skin="switch" lay-text="显示|隐藏" value="{$data.is_show}" {if $data.is_show == 1}checked{/if}>
                </div>
            </div>

            <div class="layui-form-item height150">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit lay-filter="*">提交</button>
                    <button type="reset" class="layui-btn layui-btn-primary back">返回</button>
                </div>
            </div>
        </form>
    </div>
</div></div>
<script>
    $(".back").on('click',function(){
        location.href="{:url('vip/Guestphoto/photolist');}";
    });
   layui.use(['form', 'layedit', 'laydate', 'upload'], function () {
    var form = layui.form
        , layer = layui.layer
        , upload = layui.upload;
    
        //多图片上传
        var name = 0;
        upload.render({
            elem: '#test4'
            , url: "{:url('Guestphoto/upload')}"
            , multiple: true
            , before: function (obj) {
                name = 0
            }
            , done: function (data) {
                name++;
                if (data.error === 0) {
                    var str = '<div class="img-block"><div class="img-content flex"><img src="/public/'+data.url+'" class="layui-upload-img"></div><input onkeyup="value=value.replace(/[\D]/g,'+''+')" maxlength="4" class="sort-input" data-img="/public'+data.url+'" type="hidden" value="" /><div class="del-icon">&times;</div></div>';
                    $('#demo4').append(str);
                }else{
                    var msg = '第'+name+'张  '+data.message;
                    layer.msg(msg);
                }
            }
        });
        //多图上传删除
        $("body").on("click",".del-icon",function(){
            $(this).parents(".img-block").remove();
        });

        //单图上传(店面详情图)
        upload.render({
            elem: '#test1'
            , url: "{:url('Guestphoto/upload')}"
            , done: function (data) {
                if (data.error === 0) {
                    $('#demo1').html('<img src="/public' + data.url + '" class="layui-upload-img">');
                    $('#up1-img').val('/public'+data.url);
                }else{
                    layer.msg(data.message);
                }
            }
        });

       //单图上传(拍照须知图)
       upload.render({
           elem: '#test3'
           , url: "{:url('Guestphoto/upload')}"
           , done: function (data) {
               if (data.error === 0) {
                   $('#demo3').html('<img src="/public' + data.url + '" class="layui-upload-img">');
                   $('#up3-img').val('/public'+data.url);
               }else{
                   layer.msg(data.message);
               }
           }
       });

        //单图上传(店长微信)
        upload.render({
            elem: '#test2'
            , url: "{:url('Guestphoto/upload')}"
            , done: function (data) {
                if (data.error === 0) {
                    $('#demo2').html('<img src="/public' + data.url + '" class="layui-upload-img">');
                    $('#up2-img').val('/public'+data.url);
                }else{
                    layer.msg(data.message);
                }
            }
        });

        //自定义验证规则
        form.verify({
            title: function(value){
                if(value.length < 2){
                    return '标题也太短了吧';
                }
                if(value.length < 1){
                    return '请输入标题';
                }
            }
        });

        //事件监听
        form.on('select', function(data){
        });
        form.on('radio', function(data){
        });

        //监听提交
        form.on('submit(*)', function(data){

            var id = $("#id").val();
            if($('#shop_code')){
                var shop_code = $('#shop_code').val();
                var shop_name = $("#shop_code").attr('name-data');
                var shop_sn = $("#shop_code").attr('sn-data');
            }else{
                var shop_code = '';
                var shop_name = '';
                var shop_sn = '';
            }
            
            var shop_tel = $('#shop_tel').val();
            var is_show = $('#is_show').prop('checked')?1:0;
            var sort    = $("input[name=sort]").val();
            var shop_info_img = $("#demo1 img").attr('src');
            var wx_qr_code = $("#demo2 img").attr('src');
            var photo_notice = $("#demo3 img").attr('src');

            var shop_img    = [];
            $.each($(".sort-input"),function(index,dom){
                var imgInfo = {};
                imgInfo.url =$(dom).attr("data-img");
                shop_img.push(imgInfo);
            });


            if(!shop_info_img){
                layer.msg('请上传服务详情图',{icon: 2});
                return false;
            }
            if(shop_img === undefined || shop_img.length == 0){
                layer.msg('请上传店面照片',{icon: 2});
                return false;
            }

            $.ajax({
                 url:"{:url('shopinfo/shopedit')}",
                type:'post',
                data:{id:id,shop_code:shop_code,shop_name:shop_name,shop_sn:shop_sn,shop_tel:shop_tel,sort:sort,shop_info_img:shop_info_img,wx_qr_code:wx_qr_code,shop_img:shop_img,photo_notice:photo_notice,is_show:is_show},
                success:function(s){
                    if(s.code==200){
                        layer.open({
                            content: '恭喜您修改成功！',
                            btn: ['确认'],
                            yes: function(index, layero) {
                                window.location.href="{:url('vip/shopinfo/shoplist')}";
                            }
                        });
                    }else{
                        layer.msg('修改失败'+s.msg,{
                            icon: 2
                        });
                    }
                }
            });

            return false;
        });
    });
    
    // 富文本编辑器
    var uploadContent = "";
    layui.use(['layedit','element','form'], function(){
        var layedit = layui.layedit,
            form=layui.form,
            element=layui.element;
        // 图片上传
        layedit.set({
            uploadImage: {
                url: '/vip/Mcpost/upload_img', //接口url
                type: 'post'//默认post
            }
        });
        uploadContent = layedit.build('detail',{
            width:400,
            height:700,
            tool:[
                'strong' //加粗
                ,'italic' //斜体
                ,'underline' //下划线
                ,'del' //删除线
                ,'|' //分割线
                ,'left' //左对齐
                ,'center' //居中对齐
                ,'right' //右对齐
                // ,'face' //表情
                ,'image' //插入图片
            ]
        }); //建立编辑器
    });

    // 获取编辑器内容
    function getupContent(){
        var layedit = layui.layedit;
        return layedit.getContent(uploadContent)
    };

    // 图片显示
    $("#imginput").on('change',function(){
        imgView(this);
        // $("#imgbox").removeClass("display");
    });
    // 图片显示
    $("#imginputs").on('change',function(){
        imgViews(this);
        /*$("#imgbox").removeClass("display");*/
    });
    // 图片显示处理函数
    function imgViews(filedom){
        console.log(filedom);
        // 判断是否支持fileReader
        if(window.FileReader){
            var reader = new FileReader();
            // 获取文件
            var file = filedom.files[0];
            var imagetype = /^image\//;
            // 判断是否是图片
            console.log(file);
            console.log(file.type);
            if(!imagetype.test(file.type)){
				layer.msg('请上传正确图片类型文件',{
				    icon: 2,
				});
                return;
            }
            // 读取完成
            reader.onload = function(e){
                // 获取图片dom
                var img = document.getElementById('imgboxs');
                // 图片路径设置为读取的图片
                img.src = e.target.result;
            };
            reader.readAsDataURL(file);
        }
    }
    // 图片显示处理函数
    function imgView(filedom){
        // console.log(filedom);
        // 判断是否支持fileReader
        if(window.FileReader){
            var reader = new FileReader();
            // 获取文件
            var file = filedom.files[0];
            var imagetype = /^image\//;
            // 判断是否是图片
            // console.log(file);
            // console.log(file.type);
            if(!imagetype.test(file.type)){
				layer.msg('请上传正确图片类型文件',{
				    icon: 2,
				});
                return;
            }
            // 读取完成
            reader.onload = function(e){
                // 获取图片dom
                var img = document.getElementById('imgbox');
                // 图片路径设置为读取的图片
                img.src = e.target.result;
            };
            reader.readAsDataURL(file);
        }
    }
</script>
</body>
</html>