@extends('manager.layout.master')

@section('body')
    <form class="layui-form layui-form-pane" action="" method="post">

        <div class="layui-form-item">
            <label class="layui-form-label">单图裁剪</label>

            <div type="button" class="layui-btn upload_img" mark-width="3" mark-height="2">
                <i class="layui-icon">&#xe67c;</i>上传图片
            </div>
            <div class="layer-photos-demo upload_imgs show_img_div" style="margin-top: 10px;">
                    {{--编辑时使用显示图片--}}
                    {{--<p><img src=""><span title="删除">X</span></p>--}}
            </div>
            <input type="hidden" name="img_id" class="upload_img_input" value="">
        </div>



        <div class="layui-form-item">
            <label class="layui-form-label">单图裁剪2</label>

            <div type="button" class="layui-btn upload_img" mark-width="3" mark-height="1">
                <i class="layui-icon">&#xe67c;</i>上传图片
            </div>
            <div class="layer-photos-demo upload_imgs show_img_div" style="margin-top: 10px;">
                {{--编辑时使用显示图片--}}
                {{--<p><img src=""><span title="删除">X</span></p>--}}
            </div>
            <input type="hidden" name="img_id2" class="upload_img_input" value="">
        </div>


        <div class="layui-form-item">
            <label class="layui-form-label">多图上传</label>

            <div type="button" class="layui-btn upload_img" mark-width="2" mark-height="1" data-up="more">
                <i class="layui-icon">&#xe67c;</i>上传图片
            </div>
            <div class="layer-photos-demo upload_imgs show_img_div" style="margin-top: 10px;">
                {{--编辑时使用显示图片--}}
                {{--<p><img src=""><span title="删除">X</span></p>--}}
            </div>
            <input type="hidden" name="img_id3" class="upload_img_input" value="">
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">多图上传2</label>

            <div type="button" class="layui-btn upload_img" mark-width="1" mark-height="1" data-up="more">
                <i class="layui-icon">&#xe67c;</i>上传图片
            </div>
            <div class="layer-photos-demo upload_imgs show_img_div" style="margin-top: 10px;">
                {{--编辑时使用显示图片--}}
                {{--<p><img src=""><span title="删除">X</span></p>--}}
            </div>
            <input type="hidden" name="img_id4" class="upload_img_input" value="">
        </div>

    </form>
@stop

@section('js')
    <script>
        /*删除*/
        $('.show_img_div').on('click', 'span', function () {
            var topDIv = $(this).parent().parent().parent();
            var upType = topDIv.find('.upload_img').attr('data-up');//上传类型
            var showDiv = topDIv.find('.show_img_div');//显示图片
            var idInput = topDIv.find('.upload_img_input');//保存idinput
            $(this).parent().remove();
            if(upType == 'more'){
               getDrivingImgId(showDiv,idInput);
            }else {
                idInput.val('');
            }
        });

        /*执行实例*/
        layui.use(['croppers'],function() {
            var croppers = layui.croppers;
            //创建一个头像上传组件
            croppers.render({
                elem: '.upload_img'
                , saveW: 150     //保存宽度
                , saveH: 150
                , mark: 1 / 1    //选取比例
                , area: ['900px','650px']  //弹窗宽度
                , url: "{{route('uploadImg')}}"  //图片上传接口返回和（layui 的upload 模块）返回的JOSN一样
                , done: function (res,elem) { //上传完毕回调
                    var upType = elem.attr('data-up');
                    var showDiv=elem.parent().find('.show_img_div');//显示图片
                    var idInput=elem.parent().find('.upload_img_input');//保存id
                    if(upType == 'more'){
                        showDiv.append('<p><img data-id="' + res.data.id + '" src="'+res.data.url+'"><span title="删除">X</span></p>');
                        getDrivingImgId(showDiv,idInput);
                    }else {
                        showDiv.empty();
                        showDiv.append('<p><img data-id="' + res.data.id + '" src="'+res.data.url+'"><span title="删除">X</span></p>');
                        idInput.val(res.data.id);
                    }
                }
            });
        });

        //获取图片id[多图使用]
        function getDrivingImgId(elem,saveInput) {
            var imgIds = '';
            elem.find('img').each(function (key, value) {
                if (key == 0) {
                    imgIds += $(this).attr('data-id');
                } else {
                    imgIds += ',' + $(this).attr('data-id');
                }
            });
            saveInput.val(imgIds);
        }
    </script>
@stop