<!doctype html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <base th:href="${#request.getContextPath() + '/'}">
    <meta charset="utf-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="assets/fonts/font-awesome/css/font-awesome.css"/>
    <link rel="stylesheet" href="assets/layuiadmin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="assets/layuiadmin/style/admin.css" media="all">
</head>
<body>
<div class="layui-anim layui-anim-fadein">
    <div class="layui-card" style="text-align: center;">
        <div class="layui-card-body" style="padding: 15px;">
            <blockquote class="layui-elem-quote">下载“下载模板”整理数据，点击“导入数据”上传，格式为xls或xlsx</blockquote>
            <button id="downloadFile" type="button" class="layui-btn layui-btn">
                <i class="fa fa-lg fa-cloud-download"></i> 下载模板
            </button>
            <button type="button" class="layui-btn layui-btn" id="uploadExcel">
                <i class="fa fa-lg fa-cloud-upload"></i> 导入数据
            </button>
        </div>
    </div>
    <iframe style="display: none" name="downloadTarget"></iframe>
</div>
<script src="assets/layuiadmin/layui/layui.js"></script>
<script>
    layui.config({
        base: 'assets/layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index', 'upload', 'common'], function(){
        var $ = layui.$;
        var form = layui.form;
        var common = layui.common;

        $('#downloadFile').click(function() {
            window.open('route/user/upload/upload-excel-template', 'downloadTarget');
        })

        $(document).on('click', '.error-excel', function() {
            window.open('route/file/download/false/'+ this.dataset.errorId, 'downloadTarget');
        })

        function closeBox() {
            parent.layer.close(parent.layer.getFrameIndex(window.name));
        }

        // 初始化Excel上传
        function initExcelUpload() {
            // Excel上传
            var uploadLoading;
            layui.upload.render({
                elem: '#uploadExcel',
                url: 'api/user/importexcel',
                accept: 'file',
                exts: 'xls|xlsx',
                field: 'excel',
                before: function() {
                    uploadLoading = layer.msg('正在上传，请稍后...', {icon: 16, time: 0, shade: 0.3});
                },
                done: function(data) {
                    layer.close(uploadLoading);
                    if(data.failedCount > 0) {
                        layer.open({
                            type: 1,
                            title: false,
                            closeBtn: 0,
                            shadeClose: true,
                            skin: '',
                            content: '<div style="padding: 15px;">' +
                                '<div>失败数量：'+ data.failedCount +'</div><br/>' +
                                '<div><a class="error-excel" href="javascript:void(0);" onclick="window.open(\'route/file/download/false/'+ data.errorExcel +'\');" target="downloadTarget">点击下载错误信息</a></div>' +
                                '</div>'
                        });
                    } else {
                        layer.msg('导入成功', {time: 2000}, function() {
                            closeBox();
                        });
                    }
                },
                error: function(data, index){
                    layer.close(uploadLoading);
                    if(data != null) {
                        top.dialog.msg(data.msg);
                    }
                },
            });
        }
        initExcelUpload();

        $('.close').on('click', function() {
            closeBox();
        });
    });
</script>
</body>
</html>