@extends('layouts.father')
@section('title', '售后单附图')
@section('body')

    <div class="x-body">
        <form class="layui-form" enctype="multipart/form-data">
            {{csrf_field()}}
            <div class="layui-form-item">
                <label for="upload" class="layui-form-label">
                    <span class="x-red">*</span>上传图片
                </label>
                <button type="button" class="layui-btn upload">
                    <i class="layui-icon">&#xe67c;</i>上传图片
                </button>
                <input type="hidden" name="name" >
            </div>
            <div class="layui-form-item">
                <label  class="layui-form-label">缩略图
                </label>
                <img class="layui-upload-img upload-img" style="height: 100px">
            </div>

            <div class="layui-form-item">
                <label for="add" class="layui-form-label">
                </label>
                <button  id="add" class="layui-btn" lay-filter="add" lay-submit="">
                    提交
                </button>
            </div>
        </form>

    </div>
    <script>

        layui.use(['laydate','element','laypage','layer','upload','form'], function(){
            $ = layui.jquery;//jquery
            laydate = layui.laydate;//日期插件
            upload = layui.upload;
            form = layui.form;
            //以上模块根据需要引入

            layer.ready(function(){ //为了layer.ext.js加载完毕再执行

                layer.photos({
                    photos: '#x-img'
                    //,shift: 5 //0-6的选择，指定弹出图片动画类型，默认随机
                });
            });
            var loadIndex = ''; //打开加载loading
            //执行实例
            var uploadInst = upload.render({
                elem: '.upload' //绑定元素
                ,url: '/admin/upload' //上传接口
                ,auto: false
                ,bindAction: '.upload_btn'
                ,data:{
                    '_token':$("input[name=_token]").val(),
                    'type':'',                              // 上传文件夹 默认上传地址enterprise
                    'thumb':1,                           // true ，开启缩略图，false, 不开启
                }
                ,choose: function (obj) {
                    // loadIndex = layer.load(); //上传loading
                    obj.preview(function(index, file, result){
                        $('.upload-img').attr('src', result); //图片链接（base64）
                    });
                }
                ,before: function(obj){ //obj参数包含的信息，跟 choose回调完全一致，可参见上文。
                    console.log(obj);
                    loadIndex = layer.load(); //上传loading
                    obj.preview(function(index, file, result){
                        $('.upload-img').attr('src', result); //图片链接（base64）
                    });
                }
                ,done: function(res, index, upload){
                    //上传完毕回调
                    console.log(res);
                    layer.close(loadIndex); //关闭加载loading
                    if(res.status == 1) {
                        layer.msg(res.msg,{icon: 6,time:1000});
                        $("input[name=name]").val(res.data.filename);
                    }
                }
                ,error: function(error,upload){
                    //请求异常回调
                    console.log(error);
                    layer.close(loadIndex); //关闭加载loading
                }
            });


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

                console.log(data.field);
                $(".upload_btn").trigger('click');
               /*var index = parent.layer.getFrameIndex(window.name);
                var loadIndex = layer.load(); //打开加载loading
                //发异步，把数据提交给php
                $.post("/admin/picToAdd", data.field, function (res) {

                    layer.close(loadIndex); //关闭加载loading
                    //发异步，把数据提交给php
                    if(res.status == 1) {

                        console.log(res);
                        layer.alert(res.msg, {icon: 6},function () {
                            // 关闭当前frame
                            parent.location.reload();
                            parent.layer.close(index);
                        });

                    } else {

                        layer.alert(res.msg, {icon: 5});
                    }

                }, "json");*/
               return false;
            });

        });



    </script>

@endsection