/**
 * 文件上传组件
 * @author
 * @since 2021/7/23
 * @File : upload
 */
package widget

import (
	"fmt"
	"gitlab.52pay.top/go/easygoadmin/utils/gconv"
	"html/template"
	"strings"
)

// 上传图片
func UploadImage(param string, url interface{}, exts string, size int) template.HTML {
	// 参数拆解
	item := strings.Split(param, "|")
	// 组件名称
	name := item[0]
	// 组件标题
	title := "图片"
	if item[1] != "" {
		title = item[1]
	}
	// 组件显示尺寸
	sizeStr := "90x90"
	if item[2] != "" {
		sizeStr = item[2]
	}
	sizeArr := strings.Split(sizeStr, "x")
	// 组件提示语
	showTips := item[3]
	// 裁剪尺寸
	cropSize := ""
	isCrop := 2
	if len(item) >= 5 && item[4] != "" {
		cropSize = item[4]
		isCrop = 1
	} else {
		cropSize = "300x300"
		isCrop = 2
	}
	// 计算长宽比例
	cropArr := strings.Split(cropSize, "x")
	// 裁剪比例
	cropRate := float64(gconv.Int(cropArr[0])) / float64(gconv.Int(cropArr[1]))
	cropRateStr := fmt.Sprintf("%2f", cropRate)

	// 上传后缀
	if exts == "" {
		exts = "jpg|png|gif|bmp|jpeg"
	}

	// 上传大小
	if size <= 0 {
		size = 10 * 1024
	}

	html := ``
	html += `<style type="text/css">
	.layui-upload-drag {
	    position: relative;
	    padding: 10px;
	    border: 1px dashed #e2e2e2;
	    background-color: #fff;
	    text-align: center;
	    cursor: pointer;
	    color: #999;
	}
</style>
<div class="layui-input-block">
	<div class="layui-upload-drag">`
	// 图片展示
	html += `<img id="` + name + `_show_id" src="`
	if url != nil && url != "" {
		html += gconv.String(url)
	} else {
		html += `/resource/assets/images/default_upload.png`
	}
	html += `" alt="上传` + title + `" width="` + sizeArr[0] + `" height="` + sizeArr[1] + `">`
	// 隐藏域
	html += `<input type="hidden" id="` + name + `" name="` + name + `" value="`
	// 隐藏域
	if url != "" {
		html += gconv.String(url)
	}
	html += `">
	</div>
	<div style="margin-top:10px;">
		<button type="button" class="layui-btn" id="upload_` + name + `"><i class="layui-icon">&#xe67c;</i>上传` + title + `</button>
	</div>`

	// 提示语
	if showTips != "" {
		html += `<div class="layui-form-mid layui-word-aux">建议尺寸：` + showTips + `</div>`
	}

	html += `</div>`
	// 组件JS代码
	html += `<script type="text/javascript">
layui.use(['upload','croppers'],function(){
	//声明变量
	var layer = layui.layer
	,upload = layui.upload
	,croppers = layui.croppers
	,$ = layui.$;
	
	if(` + gconv.String(isCrop) + `==1) {
		
		//图片裁剪组件
	    croppers.render({
	        elem: '#upload_` + name + `'
	        ,name:"` + name + `"
	        ,saveW:` + cropArr[0] + `     //保存宽度
	        ,saveH:` + cropArr[1] + `
	        ,mark:` + cropRateStr + `    //选取比例
	        ,area:['750px','500px']  //弹窗宽度
	        ,url: "/upload/uploadImage/` + name + `"
	        ,done: function(url){ 
	        	//上传完毕回调
	            $('#` + name + `').val(url);
	            $('#` + name + `_show_id').attr('src',url);
	        }
	    });
		
	}else{
		
		/**
		 * 普通图片上传
		 */
		var uploadInst = upload.render({
		    elem: '#upload_` + name + `'
			,url: "/upload/uploadImage/` + name + `"
			,accept:'images'
			,acceptMime:'image/*'
			,exts: "` + exts + `"
			,field:'file'//文件域字段名
			,size: ` + gconv.String(size) + ` //最大允许上传的文件大小
			,before: function(obj){
				//预读本地文件
			}
			,done: function(res){
				//上传完毕回调
				
				if(res.code != 0){
					layer.msg(res.msg,{ icon: 5 });
					return false;
				}

				//上传成功
				$('#` + name + `_show_id').attr('src', res.data.fileUrl);
	    		$('#` + name + `').val(res.data.fileUrl);
			}
			,error: function(){
				//请求异常回调
				return layer.msg('数据请求异常');
			}
		});
		
	}
	
});

</script>`
	return template.HTML(html)
}

func Album(param string, data interface{}, exts string, size int) template.HTML {
	// 参数拆解
	item := strings.Split(param, "|")
	// 组件名称
	albumName := item[0]
	//// 组件标题
	//albumTitle := "图片"
	//if item[1] != "" {
	//	albumTitle = item[1]
	//}
	// 组件显示尺寸
	sizeStr := "90x90"
	if item[2] != "" {
		sizeStr = item[2]
	}
	sizeArr := strings.Split(sizeStr, "x")
	// 允许最大上传数
	albumNum := item[3]
	// 组件提示语
	albumTips := item[4]
	// 裁剪尺寸
	cropSize := ""
	isCrop := 2
	if len(item) >= 6 && item[5] != "" {
		cropSize = item[5]
		isCrop = 1
	} else {
		cropSize = "300x300"
		isCrop = 2
	}
	// 计算长宽比例
	cropArr := strings.Split(cropSize, "x")
	// 裁剪比例
	cropRate := gconv.Int(cropArr[0]) / gconv.Int(cropArr[1])

	// 上传后缀
	if exts == "" {
		exts = "jpg|png|gif|bmp|jpeg"
	}

	// 上传大小
	if size <= 0 {
		size = 10 * 1024
	}

	// HTML拼接
	html := ``

	// CSS拼接
	html += `<style type="text/css">
	.layui-upload-drag {
	    position: relative;
	    padding: 10px;
	    border: 1px dashed #e2e2e2;
	    background-color: #fff;
	    text-align: center;
	    cursor: pointer;
	    color: #999;
		margin-right:10px;
		margin-bottom:10px;
	}
	.del_img{
		position: absolute;
		z-index: 99;
		right: 0;
		top: 0;
		width: 25px;
		height: 25px;
		display: block;
	}
	.del_img img{
		position: absolute;
		z-index: 9;
		right: 0px;
		top: 0px;
		width: 25px;
		height: 25px;
		display: inline-block;
	}
</style>`
	var list []string
	switch data.(type) {
	case []string:
		list = data.([]string)
	case string:
		if data.(string) != "" {
			list = strings.Split(data.(string), ",")
		}
	}
	// 上传控件拼接
	for _, v := range list {
		html += `<div class="layui-upload-drag">
		<div class="del_img" onclick="remove_image_` + albumName + `(this);">
			<img src="/resource/assets/images/delete.png">
		</div>
		<a href="` + v + `" target="_blank">
			<img name="img_src_` + albumName + `" src="` + v + `" alt="` + albumTips + `(点击放大预览)" title="` + albumTips + `(点击放大预览)" width="` + sizeArr[0] + `" height="` + sizeArr[1] + `">
		</a>
	</div>`
	}
	html += `<div class="layui-upload-drag img_upload_` + albumName + `">
 	<img id="upload_album_` + albumName + `" src="/resource/assets/images/default_upload.png" alt="上传` + albumTips + `" title="上传` + albumTips + `" width="` + sizeArr[0] + `" height="` + sizeArr[1] + `">
 	<input type="hidden" id="` + albumName + `" name="` + albumName + `" value="">
</div>`

	// JS拼接
	html += `<script type="text/javascript">

layui.use(['upload','croppers'],function(){

	//声明变量
	var layer = layui.layer
		,upload = layui.upload
		,croppers = layui.croppers
		,$ = layui.$;

	// 初始化图片隐藏域
	var ids = '';
	$('img[name="img_src_` + albumName + `"]').each(function(){
		ids += $(this).attr('src') + ","
	});
	ids = ids.substr(0, (ids.length - 1));
	$("#` + albumName + `").val(ids);

	if(` + gconv.String(isCrop) + `==1) {
		// 图片裁剪组件
		croppers.render({
			elem: '#upload_album_` + albumName + `'
			,name:"` + albumName + `"
			,saveW:` + cropArr[0] + `     //保存宽度
			,saveH:` + cropArr[1] + `
			,mark:` + gconv.String(cropRate) + `    //选取比例
			,area:['750px','500px']  //弹窗宽度
			,url: "/upload/uploadImage/` + albumName + `"
			,done: function(url){
				// 如果上传失败
				if(!url){
					return layer.msg('上传失败');
				}

				var hideStr = $("#` + albumName + `").attr("value");
				var itemArr = hideStr.split(',');
				if(itemArr.length>="` + albumNum + `"){
					layer.msg("最多上传` + albumNum + `张图片",{ icon: 5,time: 1000}, function () {
						//TODO...
					});
					return false;
				}

				// 渲染界面
				var attStr = '<div class="layui-upload-drag">'+
						'<div class="del_img" onclick="remove_image_` + albumName + `(this);">'+
						'<img src="/resource/assets/images/delete.png"></img>'+
						'</div>'+
						'<a href="'+url+'" target="_blank">'+
						'<img name="img_src_` + albumName + `" src="'+url+'" alt="` + albumTips + `(点击放大预览)" title="` + albumTips + `(点击放大预览)" width="` + sizeArr[0] + `" height="` + sizeArr[1] + `">'+
						'</a>'+
						'</div>';
				$(".img_upload_` + albumName + `").before(attStr);

				// 获取最新的图集
				var ids = '';
				$('img[name="img_src_` + albumName + `"]').each(function(){
					ids += $(this).attr('src') + ","
				});
				ids = ids.substr(0, (ids.length - 1));
				// 给隐藏域赋值
				$("#` + albumName + `").val(ids);

				return false;
			}
		});

	}else{
		/**
		 * 普通图片上传
		 */
		var uploadInst = upload.render({
			elem: '#upload_album_` + albumName + `'
			,url: "/upload/uploadImage/` + albumName + `"
			,accept:'images'
			,acceptMime:'image/*'
			,exts: "` + exts + `"
			,field:'file'//文件域字段名
			,size: ` + gconv.String(size) + ` //最大允许上传的文件大小
			,multiple: true
			,number: ` + albumNum + ` //最大上传张数
			,before: function(obj){
				//预读本地文件
			}
			,done: function(res){
				//上传完毕回调

				var hideStr = $("#` + albumName + `").attr("value");
				var itemArr = hideStr.split(',');
				if(itemArr.length>="` + albumNum + `"){
					layer.msg("最多上传` + albumNum + `张图片",{ icon: 5,time: 1000}, function () {
						//TODO...
					});
					return false;
				}

				//如果上传失败
				if(res.status <= 0){
					return layer.msg('上传失败');
				}

				//渲染界面
				var attStr = '<div class="layui-upload-drag">'+
						'<div class="del_img" onclick="remove_image_` + albumName + `(this);">'+
						'<img src="/resource/assets/images/delete.png"></img>'+
						'</div>'+
						'<a href="'+res.data.fileUrl+'" target="_blank">'+
						'<img name="img_src_` + albumName + `" src="'+res.data.fileUrl+'" alt="` + albumTips + `(点击放大预览)" title="` + albumTips + `(点击放大预览)" width="` + sizeArr[0] + `" height="` + sizeArr[1] + `">'+
						'</a>'+
						'</div>';
				$(".img_upload_` + albumName + `").before(attStr);

				//获取最新的图集
				var ids = '';
				$('img[name="img_src_` + albumName + `"]').each(function(){
					ids += $(this).attr('src') + ","
				});
				ids = ids.substr(0, (ids.length - 1));
				//给隐藏域赋值
				$("#` + albumName + `").val(ids);

				return false;
			}
			,error: function(){
				//请求异常回调
				return layer.msg('数据请求异常');
			}
		});
	}

});

// 删除图片
function remove_image_` + albumName + `(obj) {
	//obj.remove();
	layui.$(obj).parent().remove();

	//获取最新的图集
	var ids = '';
	layui.$('img[name="img_src_` + albumName + `"]').each(function(){
		ids += layui.$(this).attr('src') + ","
	});
	ids = ids.substr(0, (ids.length - 1));
	//给隐藏域赋值
	layui.$("#` + albumName + `").val(ids);
}

</script>`

	return template.HTML(html)
}