var zhl_update_num = 10;
var index = 0;

$(function () {

  // 上传数量控制，判断是否定义并赋值
  zhl_update_num = typeof zhl_update_num != "undefined" && zhl_update_num ? zhl_update_num : 1;
  // 上传大小控制，当前为1M
  //var zhl_update_size = 1 * 1024 * 1024;


  /**
   * 文件选择触发
   */
  $("#zhl_admin_file").change(function () {
    var fileAll = this.files.length;
    var uploaded_len = $('#zhl_admin_imgs>div>img').length;
    var total_len = uploaded_len + fileAll;
    if (total_len > zhl_update_num) {
      alert('最多' + zhl_update_num + '张图片');
      return false;
    }

    for (var i = 0; i < fileAll; i++) {
      var file = this.files[i];
      // if (file.size > zhl_update_size) {
      //   var d = parseInt(i + 1);
      //   alert("你选择的第" + d + "个文件太大了！");
      //   return false;
      // }
      if (!/image\/\w+/.test(file.type)) {
        alert("文件必须为图片！");
        return false;
      }

      var path = file.type;
      var extStart = path.lastIndexOf('/');
      var ext = path.substring(extStart, path.length).toUpperCase();

      //判断图片格式
      if (ext !== '/PNG' && ext !== '/JPG' && ext !== '/JPEG' && ext !== '/GIF') {
        alert('请上传正确格式的图片(PNG/JPG/JPEG/GIF)');
        return false;
      }
      var filename = this.files[i]['name']; //文件名称

      var reader = new FileReader();
      //读取文件过程方法
      reader.onerror = function (e) {
        console.log("文件读取异常....");
        alert('文件上传异常请关闭重试....');
      }
      reader.onabort = function (e) {
        console.log("文件读取异常....");
        alert('文件上传异常请关闭重试....');
      };
      reader.onload = function (e) {
        index++;

        var json = '{"filesize":"' + file.size + '","filename":"' + filename + '","base64data":"' + e.target.result + '"}';

        var imgstr = '';
        imgstr += '<div id="div_' + index + '" style="position: relative;display: inline-block" >';
        imgstr += '<img id="img_' + index + '" src="' + e.target.result + '" class="zhl_admin_update_imgtmp" />';
        imgstr += '<input type="hidden" name="base64[]" value=' + json + '>';
        imgstr += '<div onclick="deleteImg(' + index + ')" id="close_' + index + '" style="position:absolute; z-indent:2;right:5px;top:5px;"><img class="delete-img" src="images/delete.png" style="width: 25px;height: 25px"/>';
        imgstr += '</div>';
        //限制上传的图片数
        var len = $('#zhl_admin_imgs>div>img').length;
        if (len < zhl_update_num) {
          if (len == zhl_update_num - 1) {
            $('#zhl_admin_img').hide();
          } else {
            $('#zhl_admin_img').show();
          }
          $('#zhl_admin_imgs').append(imgstr);
        } else {
          alert('最多' + zhl_update_num + '张图片');
          $('#zhl_admin_img').hide();
          return false;
        }

        $(".uploaded-num").html(len + 1);
      }
      reader.readAsDataURL(file);
    }
  });

})


/**
 * 点击删除预选的图片
 */

function deleteImg(i) {
  v.$confirm('删除该张图片？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    $("#div_" + i).remove();
    $('#zhl_admin_img').show();

    var len = $('#zhl_admin_imgs>div>img').length;
    $(".uploaded-num").html(len);
    v.$message({
      type: 'success',
      message: '删除成功!'
    });
  }).catch(() => {
    v.$message({
      type: 'info',
      message: '已取消删除'
    });          
  });
}