<!--# 
var name = name!"attachement";
var uploadURL = ctxPath+"/core/file/uploadAttachment.json";
var chooseId = name+"List";
var uploadId = name+"ListAction";
var filesListId = name+"DataList";
//加载已经在数据库列表
var files = (isNew=="true")?[]:core.file(batchFileUUID);

-->
<div class="layui-upload">
	<input type="hidden" name="${name}" value="${batchFileUUID}" ${isNotEmpty(layVerify)?('lay-verify="'+layVerify+'"'):''} />
	<button type="button" class="layui-btn layui-btn-normal"
		id="${chooseId}">选择多文件</button>
	
	<button type="button" class="layui-btn" id="${uploadId}">开始上传</button>
	<div class="layui-upload-list">
		<table class="layui-table">
			<thead>
				<tr>
					<th>编号</th>
					<th>文件名</th>
					<th>状态</th>
					<th>操作</th>
				</tr>
			</thead>
			<tbody id="${filesListId}">
				<!--# for(file in files){  -->
		      	<tr>
		      	<td>${file.id}</td>
		      	<td>${file.name}</td>
		        <td>成功</td>
		        <td>
			        
			        <button class="layui-btn layui-btn-mini  layui-btn-danger demo-delete">删除</button>
			        <button class="layui-btn layui-btn-mini  demo-preview">预览</button>
			        <button class="layui-btn layui-btn-mini  demo-download">下载</button>
		        </td>
		      </tr>
      			<!--# }  -->
			</tbody>
		</table>
	</div>

</div>

<script>
var previewStr = '<button class="layui-btn layui-btn-mini demo-preview">预览</button>';
var deleteStr = '<button class="layui-btn layui-btn-mini  demo-delete layui-btn-danger">删除</button>';
var downloadStr ='<button class="layui-btn layui-btn-mini demo-download">下载</button>'
layui.use('upload',
function() {
    var $ = layui.jquery,
    upload = layui.upload;
    var demoListView = $('#${filesListId}'),
    uploadListIns = upload.render({
        elem: '#${chooseId}',
        url: '${uploadURL}',
        accept: 'file',
        multiple: true,
        auto: false,
        data: {
            "batchFileUUID": "${batchFileUUID}",
            "bizId":"${bizId!}",
            "bizType":"${bizType}"
        },
        bindAction: '#${uploadId}',
        choose: function(obj) {
            var files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列
            //读取本地文件
            obj.preview(function(index, file, result) {
                var tr = $(['<tr id="${name}Upload-' + index + '">', '<td></td>', '<td>' + file.name + '</td>', '<td>等待上传</td>', '<td>', '<button class="layui-btn layui-btn-mini demo-reload  layui-hide">重传</button>', '<button class="layui-btn layui-btn-mini layui-btn-danger demo-cancel">取消</button>', '</td>', '</tr>'].join(''));
                //单个重传
                tr.find('.demo-reload').on('click',
                function() {
                    obj.upload(index, file);
                });

                //取消
                tr.find('.demo-cancel').on('click',
                function() {
                    delete files[index]; //删除对应的文件
                    tr.remove();
                    uploadListIns.config.elem.next()[0].value = ''; //清空 input file 值，以免删除后出现同名文件不可选
                });

                demoListView.append(tr);
            });
        },
        done: function(res, index, upload) {
            if (res.code != 0) {
                this.error(index, upload);
                return
            } //上传成功
            var tr = demoListView.find('tr#${name}Upload-' + index),
            tds = tr.children();
            tds.eq(0).html(  res.data.id);
            tds.eq(2).html('<span style="color: #5FB878;">上传成功</span>');
            tds.eq(3).html(deleteStr+previewStr +downloadStr); //清空操作
            initTr(tr);
            return delete this.files[index]; //删除文件队列已经上传成功的文件
        },
        error: function(index, upload) {
            var tr = demoListView.find('tr#${name}upload-' + index),
            tds = tr.children();
            tds.eq(2).html('<span style="color: #FF5722;">上传失败</span>');
            tds.eq(3).find('.demo-reload').removeClass('layui-hide'); //显示重传
        }
    });

    var trs = demoListView.children();
    for (var i = 0; i < trs.length; i++) {
        initTr($(trs[i]));
    }

    function initTr(tr) {
    		var tds = tr.children();
    		var fileId = tds.eq(0).html();
    		var fileName= tds.eq(1).html();
        tr.find('.demo-delete').on('click',function() {
            
            Common.post("/core/file/deleteAttachment.json", {
                "fileId": fileId,
                "batchFileUUID": "${batchFileUUID}"
            },
            function() {
                tr.remove();
                uploadListIns.config.elem.next()[0].value = ''; //清空 input file 值，以免删除后出现同名文件不可选
                Common.info("删除成功");
            });
            return false;

        });
        //预览服务器文件
        tr.find('.demo-preview').on('click',
        function() {
            //文件下载地址
            var file = encodeURIComponent("http://" + window.location.host+"/core/file/download/"+fileId+"/${batchFileUUID}/"+fileName);
            //8012为预览服务器地址，参考 https://gitee.com/kekingcn/file-online-preview 安装
            Common.openDlg("${env('file.previewURL')}?url="+file,fileName+"预览")
            //window.open("http://localhost:8012/onlinePreview?url="+file);
           	return false;
        });
        
        //下载服务器文件
        tr.find('.demo-download').on('click',
        function() {
            //文件下载地址
            var address = "${ctxPath}/core/file/download/"+fileId+"/${batchFileUUID}/"+fileName;
            console.log(address);
           	window.location.href=address;
           	return false;
        });
    }

});
 </script>

