layui.use(['form', 'jquery'], function () {
    let form = layui.form;
    let $ = layui.jquery;
    let layer = layui.layer;
    let upload = layui.upload;
    let element = layui.element;
    let util = layui.util;

    var suffix = '_logo';
    var imgPath = $('#upload_img_input_logo').val();

    setImgInfo(imgPath);
    preview();
    removeImg();
    uploadFn();
    bindRemove();

    // 设置图片信息
    function setImgInfo(url) {
        if (url === '/statics/admin/images/avatar.jpg') {
            $('#upload_img_preview' + suffix).attr('src', url);
        } else {
            $('#upload_img_preview' + suffix).attr('src', url);
        }
        if (url === '') {
            $('#upload_img_preview' + suffix).hide();
        } else {
            $('#upload_img_preview' + suffix).show();
        }
        $('#upload_img_input_logo').val(url);
    }

    // 删除
    function removeImg() {
        $('#upload_img_remove' + suffix).unbind('click').click(function () {
            $('#upload_img_preview' + suffix).attr({ src: '', alt: '暂无图片' });
            $('#upload_img_input_logo').val('');
        });
    }

    // 图片预览
    function preview() {
        $('#upload_img_preview' + suffix).unbind('click').click(function () {
            var url = $(this).attr('src')
            if (!url) { return false; }

            layer.photos({
                photos: {
                    "title": url,
                    "start": 0,
                    "data": [
                        {
                            "alt": "",
                            "pid": 5,
                            "src": url,
                        }
                    ]
                },
                footer: false
            });
        });
    }

    // 设置文件集
    function setFiles(data) {
        var html = '';
        var val = '';
        for (var i = 0; i < data.length; i++) {
            var item = data[i];
            var d = item.name + `|` + item.path;
            var li = `<div class="upload-line">
                            <span class="op">
                                <a href="javascript:;" data-path=` + d + ` class="layui-btn layui-btn-danger layui-btn-xs remove_file">删除</a>
                                <a href="`+ item.path + `" target="_blank" style="margin-left: 2px;" class="layui-btn layui-btn-xs">下载</a>
                            </span>
                            <span class="name"><label>名称: </label>`+ item.name + `</span>
                            <span class="url"><label>URL: </label>`+ item.path + `</span>
                        </div>`;
            html += li;

            val += d + ",";
        }
        $('#mutil_upload_res_list').append(html);
        var $doc = $('input[name="Paths"]');
        if ($doc.val() != '') {
            val = $doc.val() + val;
        }
        $('#post_field').html(`<input type="hidden" name="Paths" value="` + val + `">`);
        bindRemove();
    }

    function bindRemove() {
        $('.remove_file').unbind('click').click(function () {
            var path = $(this).data('path');
            var $doc = $('input[name="Paths"]');
            let paths = $doc.val();
            $doc.val(paths.replace(path, ""));
            $(this).parent().parent().remove();
        });
    }

    // 上传
    function uploadFn() {
        var uploadInst = upload.render({
            elem: '#upload_img_btn' + suffix,
            url: '/upload/img',
            headers: { 'X-CSRF-Token': $('#csrf_token').val() },
            field: 'files',
            accept: 'file', //允许上传的文件类型
            before: function (obj) {
                // 预读本地文件示例，不支持ie8
                obj.preview(function (index, file, result) {
                    $('#upload_img_preview' + suffix).attr('src', result); // 图片链接（base64）
                });
                element.progress('upload_img_progress' + suffix, '0%'); // 进度条复位
                layer.msg('上传中', { icon: 16, time: 0 });
            },
            done: function (res) {
                // 若上传失败
                if (!res.success) {
                    return layer.msg('上传失败：' + res.errorMsg);
                }
                // 上传成功的一些操作
                // …
                $('#upload_img_tips' + suffix).html(''); // 置空上传失败的状态
                setImgInfo(res.data);
                removeImg();
            },
            error: function () {
                // 失败状态，并实现重传
                var $tips = $('#upload_img_tips' + suffix);
                $tips.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                $tips.find('.demo-reload').on('click', function () {
                    uploadInst.upload();
                });
            },
            // 进度条
            progress: function (n, elem, e) {
                element.progress('upload_img_progress' + suffix, n + '%'); // 可配合 layui 进度条元素使用
                if (n == 100) {
                    layer.msg('上传完毕', { icon: 1 });
                }
            }
        });

        var uploadFiles = upload.render({
            elem: '#upload_img_btn_file',
            url: '/upload/file',
            headers: { 'X-CSRF-Token': $('#csrf_token').val() },
            field: 'files',
            accept: 'file', //允许上传的文件类型
            before: function (obj) {
                element.progress('upload_img_progress' + suffix, '0%'); // 进度条复位
                layer.msg('上传中', { icon: 16, time: 0 });
            },
            done: function (res) {
                // 若上传失败
                if (!res.success) {
                    return layer.msg('上传失败：' + res.errorMsg);
                }
                // 上传成功的一些操作
                // …
                $('#upload_img_tips' + suffix).html(''); // 置空上传失败的状态
                setImgInfo(res.data);
                removeImg();
            },
            error: function () {
                // 失败状态，并实现重传
                var $tips = $('#upload_img_tips' + suffix);
                $tips.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                $tips.find('.demo-reload').on('click', function () {
                    uploadFiles.upload();
                });
            },
            // 进度条
            progress: function (n, elem, e) {
                element.progress('upload_img_progress' + suffix, n + '%'); // 可配合 layui 进度条元素使用
                if (n == 100) {
                    layer.msg('上传完毕', { icon: 1 });
                }
            }
        });

        var uploadMutilFiles = upload.render({
            elem: '#upload_multi_btn',
            url: '/upload/mutilfile',
            headers: { 'X-CSRF-Token': $('#csrf_token').val() },
            field: 'files',
            multiple: true,
            unified: true,
            accept: 'file', //允许上传的文件类型
            before: function (obj) {
                element.progress('upload_mutil_progress' + suffix, '0%'); // 进度条复位
                layer.msg('上传中', { icon: 16, time: 0 });
            },
            done: function (res) {
                // 若上传失败
                if (!res.success) {
                    return layer.msg('上传失败：' + res.errorMsg);
                }
                // 上传成功的一些操作
                $('#upload_mutil_tips' + suffix).html(''); // 置空上传失败的状态
                // 设置文件集
                setFiles(res.data);
            },
            error: function () {
                // 失败状态，并实现重传
                var $tips = $('#upload_mutil_tips' + suffix);
                $tips.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                $tips.find('.demo-reload').on('click', function () {
                    uploadMutilFiles.upload();
                });
            },
            // 进度条
            progress: function (n, elem, e) {
                element.progress('upload_mutil_progress' + suffix, n + '%'); // 可配合 layui 进度条元素使用
                if (n == 100) {
                    layer.msg('上传完毕', { icon: 1 });
                }
            }
        });
    }
});