$(function() {
//弹窗初始化
$('body').append('<div class="cjxm-box tx-edit-box"><div class="tx-box"><div class="tx-up-edit"><img class="cropper cropper-01" src="" alt="picture"></div><div class="tx-xg-box"><b>图片预览</b><div class="view-01"><div class="preview preview-01"></div></div><div class="scale-box"><b>裁剪比例</b><ul class="scale-list"><li><a  class="on" data-scale="800,800"><span><i></i></span>1:1</a></li><li><a data-scale="800,600"><span><i></i></span>4:3</a></li><li><a data-scale="800,450"><span><i></i></span>16:9</a></li><li><a data-scale="600,800"><span><i></i></span>3:4</a></li><li><a data-scale="450,800"><span><i></i></span>9:16</a></li><li><a data-scale="0,0"><span><i></i></span>手动</a></li></ul></div></div></div>	<hr/><div class="rw-box-bot"><div class="rot-btn"><span class="rot-btn rot-15-l"></span><span class="rot-btn rot-15-r"></span></div><div class="rw-btn"><a href="javascript:;" class="rw-del">取消</a><button class="layui-btn tx-save-btn" lay-submit="" lay-filter="txsave">保存</button></div></div></div>');
//上传图片
$('.up-btn img').each(function(){
	if(!$(this).attr('src') == ''){
		$(this).addclass('up-pic-show');
	}
})
var set =false;
$('body').on('click', '.up-btn', function(){
	$(this).next().click();
	
	if($(this).attr('data-scale')){
		set = true;
		$('.scale-box').hide();
		var setscale= $(this).attr('data-scale').split(",");
		$image.cropper("setaspectratio", setscale[0]/setscale[1]);
		$('.preview-01').css('height',$('.preview').width()/setscale[0]*setscale[1]);
	}else{
		set = false;
		$('.scale-box').show();
		$('.scale-list li').eq(0).find('a').addclass('on').parent().siblings().find('a').removeclass('on');
		$image.cropper("setaspectratio", 800/800);

	}
	
});

$('.rot-15-l').click(function(){
	$image.cropper("rotate", -90);
})
$('.rot-15-r').click(function(){
	$image.cropper("rotate",90);
})


layui.use('layer', function(){
  var layer = layui.layer;
}); 


//裁剪工具
var $image = $(".cropper"),
console = window.console || {
	log: $.noop
},
cropper;
$image.cropper({
	preview: ".preview",
	autocroparea: 1,
});



var btnelem,epicbox,filename,source,sresult;
$('body').on('change', '.file', function(e){
		btnelem = this;
		var v = $(this).val();
		filelast =	v.lastindexof(".");
		filename = v.substring(v.lastindexof("\\")+1,filelast);
	 	var reader = new filereader();
	    reader.onload = (function (file) {
	        return function (e) {
				sresult = this.result;
	          dealimage(this.result, 1000, printing);
				function printing(base64) {
	           	cropper(base64);
	           	sresult = base64;
	           }
	        };
	    })(e.target.files[0]);
	    reader.readasdataurl(e.target.files[0]);
	    //设置比例
	    	if(!set){
				scale();
			}
	  });
  
  
  //弹窗
  function cropper(base){
		$(".cropper").cropper("replace", base);
			epicbox = layer.open({
			type: 1,
			shade: 0.5,
			skin: 'layui-layer-cjxm',
			title: '图片裁剪',
			content: $('.tx-edit-box'),
			end: function(index, layero) {
				//清空待上传图像
				$('.file').val('');
			}
		});
  }
  

	
	
//关闭弹窗
$('html').on('click', '.rw-del', function() {
	layer.close(epicbox);
});



//保存按钮
$('body').on('click', '.tx-save-btn', function() {
	layer.close(epicbox);

if(source){
	var size = json.stringify($image.cropper("getdata"));
	var dataurl = $image.cropper("getdataurl", {
		width: size.width,
		height: size.height
	});
}else{
	//输出图像大小
	var dataurl = $image.cropper("getdataurl", {
		width: picw,
		height: pich
	});
}

 	console.log(dataurl)
 	
	//上传事件
	if($(btnelem).prev().find('img').length>0){
		
	//输出
	$(btnelem).prev().find('img').attr('src',dataurl).addclass('up-pic-show');
	
	}else{
		
		
		
	//输出列表
	$(btnelem).prevall('.up-pic-list').append('<li><div><img src="' + dataurl + '"/><i class="pic-close">×</i></div><input type="text"  value="'+filename+'"/></li>');
	var e = $(btnelem).prevall('.up-pic-list');
	upllist(e);
	}
	
	return false;
});


//取消
$('body').on('click', '.pic-close', function() {
	var e = $(this).parents('.up-pic-list');
	$(this).parents('.up-pic-list li').remove();
	upllist(e);
})


//加载后遍历
$('.up-pic-list').each(function(){
	upllist(this);
})

//修改比例
$('.scale-list a').click(function(){
	$('.scale-list a').removeclass('on');
	$(this).addclass('on');
	scale();
})


//遍历
function upllist(obj){
	var sum = $(obj).find('img').length;
	var x = [];
	var y = [];
	
/*	//遍历图片名
	for( var i = 0; i < sum ; i ++ ){
		x[i] =  $(obj).find('img').eq(i).attr('src');
	}
	$(obj).nextall('.up-val').val(x);	
	
	//遍历名称
	for( var i = 0; i < sum ; i ++ ){
		y[i] =  $(obj).find('input').eq(i).val();
	}
	$(obj).nextall('.up-name').val(y);*/
	
	var  ej = [];
	for( var i = 0; i < sum ; i ++ ){
		ej.push({"base":$(obj).find('img').eq(i).attr('src'),"name":$(obj).find('input').eq(i).val()});
	}
	
	$(obj).nextall('.up-val').val(json.stringify(ej));
	
}

//遍历名称
$('body').on('blur', 'input',function(){
	var obj = $(this).parents('.up-pic-list');
		upllist(obj)
})


//获取比例
var picw,pich,picscale;
function scale(){
	picscale = $('.scale-list .on').attr('data-scale').split(",");
	picw = picscale[0];
	pich = picscale[1];
	
//	console.log(picw+','+pich);
	$('.preview-01').css({'width':'','height':''});
	if(picw >= pich){
		$('.preview-01').css({'width':'','height':$('.preview-01').width()/picw*pich});
	}else{
		$('.preview-01').css({'height':'','width':$('.preview-01').height()/pich*picw});
	}
	if(picw == 0 && pich == 0){
		source = true;
		$image.cropper("setaspectratio", 'auto');//原图
	}else{
		source = false;
		$image.cropper("setaspectratio", picw / pich);//裁剪比例
	}
}

})


//压缩方法
function dealimage(base64, w, callback) {
	var newimage = new image();
	var quality = 0.8; 
	newimage.src = base64;
	var imgwidth, imgheight;
	newimage.onload = function () {
		imgwidth = this.width;
		imgheight = this.height;
		var canvas = document.createelement("canvas");
		var ctx = canvas.getcontext("2d");
		if (math.max(imgwidth, imgheight) > w) {
			if (imgwidth > imgheight) {
				canvas.width = w;
				canvas.height = w * imgheight / imgwidth;
			} else {
				canvas.height = w;
				canvas.width = w * imgwidth / imgheight;
			}
		} else {
			canvas.width = imgwidth;
			canvas.height = imgheight;
			quality = 0.8;
		}
		ctx.clearrect(0, 0, canvas.width, canvas.height);
		ctx.drawimage(this, 0, 0, canvas.width, canvas.height);
		var base64 = canvas.todataurl("image/jpeg", quality); 
		callback(base64);
	}
}