jQuery(function() {
  var $ = jQuery,
    ratio = window.devicePixelRatio || 1,
    thumbnailWidth = 100 * ratio,
    thumbnailHeight = 100 * ratio,
    uploader;

  // 初始化Web Uploader
  uploader = WebUploader.create({

    // 自动上传。
    auto: true,

    // 文件接收服务端。
    server: 'http://151.28ms.com:8088/order/ordersource/baseUpload?sourceType=' + $('#upload').val() + '&orderId=' + $('#orderId').val(),

    // 选择文件的按钮。可选。
    // 内部根据当前运行是创建，可能是input元素，也可能是flash.
    pick: {
        id: '.filePicker',
        multiple: true
    },

    // 只允许选择文件，可选。
    accept: {
      title: 'Images',
      extensions: 'gif,jpg,jpeg,bmp,png',
      mimeTypes: 'image/*'
    },

    fileVal: 'files',
  });

  // 当有文件添加进来的时候
  uploader.on('fileQueued', function(file) {
    // var $id = $('select.uploader').val();
    var $id = $('select.uploader').val();
    var $tr = $('tr[data-id='+$id+']');

    if(!$tr.length) {
      var name = $('select.uploader option:selected').data('name');
      var tr = '<tr data-id="'+$id+'">\
            <td class="text-c">'+name+'</td>\
            <td>\
                <div class="filelist"></div>\
            </td>\
        </tr>'
      $('tbody.upload-tbody').append(tr);
    }

    var $list = $('tr[data-id='+$id+'] .filelist');
    var $li = $( '<div id="' + file.id + '" class="file-item thumbnail">' + '<img>' +
        '<div class="info">' + file.name + '</div>' + '</div>'),
      $btns = $('<div class="file-panel">' + '<span class="cancel">删除</span>').appendTo( $li ),
      $img = $li.find('img');

      $li.on( 'mouseenter', function() {
          $btns.stop().animate({height: 30});
      });

      $li.on( 'mouseleave', function() {
          $btns.stop().animate({height: 0});
      });

      $btns.on('click', 'span', function() {
        var index = $(this).index();

        switch (index) {
          case 0:
            uploader.removeFile(file);
            return;
        }
      });


    $list.append($li);

    // 创建缩略图
    uploader.makeThumb(file, function(error, src) {
      if (error) {
        $img.replaceWith('<span>不能预览</span>');
        return;
      }

      $img.attr('src', src);
    }, thumbnailWidth, thumbnailHeight);
  });

  uploader.on('fileDequeued', function( file ) {
    removeFile( file );
  });


  // 文件上传过程中创建进度条实时显示。
  uploader.on('uploadProgress', function(file, percentage) {
    var $li = $('#' + file.id),
      $percent = $li.find('.progress span');

    // 避免重复创建
    if (!$percent.length) {
      $percent = $('<p class="progress"><span></span></p>')
        .appendTo($li)
        .find('span');
    }

    $percent.css('width', percentage * 100 + '%');
  });

  // 文件上传成功，给item添加成功class, 用样式标记上传成功。
  uploader.on('uploadSuccess', function(file, response) {
    var img = $('#' + file.id);
    img.data('id', response.data[0].id);
  });

  // 文件上传失败，现实上传出错。
  uploader.on('uploadError', function(file) {
    var $li = $('#' + file.id),
      $error = $li.find('div.error');

    // 避免重复创建
    if (!$error.length) {
      $error = $('<div class="error"></div>').appendTo($li);
    }

    $error.text('上传失败');
  });

  // 完成上传完了，成功或者失败，先删除进度条。
  uploader.on('uploadComplete', function(file) {
    $('#' + file.id).find('.progress').remove();
  });


});

window.uploadList = function () {
  var targetUrl = 'order/ordersource/base/' + $('#orderId').val();

  $.ajax({
    type: 'get',
    url: apiBaseUrl + targetUrl,
    cache: false,
    dataType: 'json',
    contentType: "application/json; charset=UTF-8",
    success: function (data) {
      var html = '';

      for (var s in data.data) {
        var sid = data.data[s][0].sourceType;

        html += '<tr data-id="'+sid+'"><td class="text-c">'+s+'</td><td><div class="filelist">';

        data.data[s].forEach(function (item) {
          html += '<div id="WU_FILE_X_'+item.id+'" class="file-item thumbnail" data-id="'+item.id+'">\
                      <img src="'+item.url+'" width="100" hegiht="100px">\
                      <div class="info">'+item.fileName+'</div>\
                      <div class="file-panel">\
                          <span class="cancel">删除</span>\
                      </div>\
                  </div>'
        });

        html += '</div></td></tr>';
      }

      $('tbody.upload-tbody').append(html);

      $('.file-item').on('mouseenter', function () {
        $(this).find('.file-panel').stop().animate({height: 30});
      });

      $('.file-item').on('mouseleave', function () {
        $(this).find('.file-panel').stop().animate({height: 0});
      })

      $('.file-panel').on('click', 'span', function () {
        var id = $(this).parents('.file-item.thumbnail').attr('id'), file = {id, id};
        removeFile(file);
      });
    },
    error: function () {
      layer.alert("图片获取失败");
    }
  })
}

  function removeFile( file ) {
    var $li = $('#'+file.id);
    var id = $('#'+file.id).data('id');
    console.log();

    var targetUrl = 'order/ordersource/delete/' + id;

    $.ajax({
        type: 'delete',
        url: apiBaseUrl + targetUrl,
        cache: false,
        dataType: 'json',
        contentType: "application/json; charset=UTF-8",
        success: function (data) {
            if (data.msg) {
              layer.alert(data.msg);
            } else if (data.code != 0) {
              layer.alert('操作失败');
            } else {
              layer.alert('操作成功');
              $li.off().find('.file-panel').off().end().remove();
            }
            setTimeout(function () {
                if(!data.code) {
                    table.fnDraw();
                    layer_close();
                }
            },500);
        },
        error: function () {
            layer.alert("操作失败")
        }
    })
  }