@extends('layouts.father')
@section('title', '上传快递单图片')
@section('style')
    <link href="/assets/lightbox/css/lightbox.css" rel="stylesheet">
@endsection
@section('body')

    <div class="x-body">
        <form class="layui-form" enctype="multipart/form-data">
            {{csrf_field()}}
            <input type="hidden" name="id" value="{{$id}}" />
            <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="pic" value="{{ $pic }}">
            </div>
            <div class="layui-form-item preview" @if(!$pic) style="display: none;" @endif >
                <label  class="layui-form-label">缩略图
                </label>

                <a href="{{ $pic ? env("OSS_HOST").$pic : '' }}" data-title="快递单图片" data-lightbox="upload-img">
                    <img class="layui-upload-img upload-img" style="height: 100px" src="{{ $pic ? env("OSS_HOST").$pic : '' }}">
                </a>
                <i class="layui-icon iconfont detail-img-icon detail-img-icon" onclick="removeImg()" >&#x1007;</i>
            </div>

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

    </div>
    <script src="/assets/lightbox/js/lightbox.js"></script>
    <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' //绑定元素
                ,size: 2048
                ,url: '/admin/upload' //上传接口
                ,data:{
                    '_token':$("input[name=_token]").val(),
                    'type':'express',                              // 上传文件夹 默认上传地址enterprise
                }
                ,choose: function (obj) {
                    // loadIndex = layer.load(); //上传loading
                    obj.preview(function(index, file, result){
                        $('.upload-img').attr('src', result); //图片链接（base64）
                        $('.preview').show();
                    });
                }
                ,before: function(obj){ //obj参数包含的信息，跟 choose回调完全一致，可参见上文。
                    // console.log(obj);
                    loadIndex = layer.load(); //上传loading
                    obj.preview(function(index, file, result){
                        $('.upload-img').attr('src', result); //图片链接（base64）
                        $('.preview').show();
                    });
                }
                , done: function (res, index, upload) {
                    //上传完毕回调
                    // console.log(res);
                    layer.close(loadIndex); //关闭加载loading
                    if (res.status == 1) {
                        layer.msg(res.msg, {icon: 6, time: 1000});
                        // $('.upload').addClass("x-disable");
                        $("input[name=pic]").val(res.data.filename);
                        $("input[name=pic]").parent().attr("href", "/" + res.data.filename);

                        var url = "/admin/expressPic";

                        var index = parent.layer.getFrameIndex(window.name);
                        var loadIndex = layer.load(); //打开加载loading
                        //发异步，把数据提交给php
                        $.post(url, {"_token":$("input[name=_token]").val(),"pic": res.data.filename, "id": "{{$id}}"}, 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});
                            }
                        });

                    }
                }
                ,error: function(error,upload){
                    //请求异常回调
                    console.log(error);
                    layer.close(loadIndex); //关闭加载loading
                }
            });


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

                url = "/admin/expressPic";
                // console.log(data.field);
               var index = parent.layer.getFrameIndex(window.name);
                var loadIndex = layer.load(); //打开加载loading
                //发异步，把数据提交给php
                $.post(url, 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;
            });


        });

        /*删除主图或者快递单图片*/
        function removeImg() {
            var url = "/admin/picDelete?path="+$('input[name=pic]').val();
            layer.confirm('确认要删除吗？',function(index){ //删除服务器上的图片
                $.get(url, function (res) {
                    // 发异步，把数据提交给php
                    if (res.status == 1) {
                        // 恢复选择图片按钮 可点击
                        // $('.upload').removeClass("x-disable");
                        //视图移除图片
                        $('.preview').hide();

                        $("input[name=pic]").val("");
                        //发异步把用户状态进行更改
                        layer.msg(res.msg,{icon: 6,time:1000});

                        var index = parent.layer.getFrameIndex(window.name);
                        var loadIndex = layer.load(); //打开加载loading
                        //发异步，把数据提交给php
                        $.post("/admin/expressPic", {
                            "_token":$("input[name=_token]").val(),
                            "pic": "",
                            "id": "{{$id}}"
                            }, 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});
                            }
                        });


                    } else {

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


    </script>

@endsection