<!DOCTYPE html>
<!--[if IE 8]>
<html lang="en" class="ie8 no-js"> <![endif]-->
<!--[if IE 9]>
<html lang="en" class="ie9 no-js"> <![endif]-->
<!--[if !IE]><!-->
<html>
<!--<![endif]-->
<!-- BEGIN HEAD -->
<head>
    <base href="#springUrl('/assets/adminlte/')"/>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>工作台</title>
    <!-- Tell the browser to be responsive to screen width -->
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <!-- Bootstrap 3.3.5 -->
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="plugins/font-awesome/css/font-awesome.min.css">
    <!-- Ionicons -->
    <link rel="stylesheet" href="plugins/ionicons/css/ionicons.min.css">

    <!-- DataTables -->
    <link rel="stylesheet" href="plugins/datatables/dataTables.bootstrap.css">

    <!-- Theme style -->
    <link rel="stylesheet" href="dist/css/AdminLTE.min.css">
    <!-- AdminLTE Skins. Choose a skin from the css/skins
         folder instead of downloading all of them to reduce the load. -->
    <link rel="stylesheet" href="dist/css/skins/_all-skins.min.css">
    <!-- iCheck -->
    <link rel="stylesheet" href="plugins/iCheck/flat/blue.css">
    <!-- Date Picker -->
    <link rel="stylesheet" href="plugins/datepicker/datepicker3.css">
    <!-- Daterange picker -->
    <link rel="stylesheet" href="plugins/daterangepicker/daterangepicker-bs3.css">
    <!-- bootstrap wysihtml5 - text editor -->
    <link rel="stylesheet" href="plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.min.css">
    <!--validate css-->
    <link rel="stylesheet" href="plugins/jquery-validation/css/validate.css">
    <!--fileinput css-->
    <link rel="stylesheet" href="plugins/fine-uploader/css/fine-uploader-new.css">
    <!-- ztree css -->
    <link rel="stylesheet"
          href="plugins/ztree/css/metroStyle/metroStyle.css" type="text/css"/>
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]> -->
    <script src="plugins/fine-uploader/javascript/fine-uploader.min.js"></script>
    <script type="text/template" id="qq-template-manual-trigger">
        <div class="qq-uploader-selector qq-uploader" qq-drop-area-text="文件显示区">
            <div class="qq-total-progress-bar-container-selector qq-total-progress-bar-container">
                <div role="progressbar" aria-valuenow="0" aria-valuemin="0"
                     aria-valuemax="100"
                     class="qq-total-progress-bar-selector qq-progress-bar qq-total-progress-bar"></div>
            </div>
            <div class="qq-upload-drop-area-selector qq-upload-drop-area" qq-hide-dropzone>
                <span class="qq-upload-drop-area-text-selector"></span>
            </div>
            <div class="buttons">
                <div class="qq-upload-button-selector qq-upload-button">
                    <div><i class="fa fa-search"></i> 选择文件</div>
                </div>
                <button type="button" id="trigger-upload" class="btn btn-primary">
                    <i class="fa fa-cloud-upload"></i> 上传
                </button>
            </div>
            <span class="qq-drop-processing-selector qq-drop-processing">
                <span>Processing dropped files...</span>
                <span class="qq-drop-processing-spinner-selector qq-drop-processing-spinner"></span>
            </span>
            <ul class="qq-upload-list-selector qq-upload-list" aria-live="polite"
                aria-relevant="additions removals">
                <li>
                    <div class="qq-progress-bar-container-selector">
                        <div role="progressbar" aria-valuenow="0" aria-valuemin="0"
                             aria-valuemax="100"
                             class="qq-progress-bar-selector qq-progress-bar"></div>
                    </div>
                    <span class="qq-upload-spinner-selector qq-upload-spinner"></span>
                    <img class="qq-thumbnail-selector"   qq-server-scale>
                    <!--<span class="qq-upload-file-selector qq-upload-file"></span>
                    <span class="qq-edit-filename-icon-selector qq-edit-filename-icon"
                          aria-label="Edit filename"></span>
                    <input class="qq-edit-filename-selector qq-edit-filename" tabindex="0"
                           type="text">-->
                    <span class="qq-upload-size-selector qq-upload-size"></span>
                    <button type="button"
                            class="qq-btn qq-upload-cancel-selector qq-upload-cancel">
                        <i class="fa fa-fw  fa-trash-o"></i>
                    </button>
                    <button type="button"
                            class="qq-btn qq-upload-retry-selector qq-upload-retry">Retry
                    </button>
                    <button type="button"
                            class="qq-btn qq-upload-delete-selector qq-upload-delete">Delete
                    </button>
                    <span role="status"
                          class="qq-upload-status-text-selector qq-upload-status-text"></span>
                </li>
            </ul>

            <dialog class="qq-alert-dialog-selector">
                <div class="qq-dialog-message-selector"></div>
                <div class="qq-dialog-buttons">
                    <button type="button" class="qq-cancel-button-selector">Close</button>
                </div>
            </dialog>

            <dialog class="qq-confirm-dialog-selector">
                <div class="qq-dialog-message-selector"></div>
                <div class="qq-dialog-buttons">
                    <button type="button" class="qq-cancel-button-selector">No</button>
                    <button type="button" class="qq-ok-button-selector">Yes</button>
                </div>
            </dialog>

            <dialog class="qq-prompt-dialog-selector">
                <div class="qq-dialog-message-selector"></div>
                <input type="text">
                <div class="qq-dialog-buttons">
                    <button type="button" class="qq-cancel-button-selector">Cancel</button>
                    <button type="button" class="qq-ok-button-selector">Ok</button>
                </div>
            </dialog>
        </div>
    </script>
    <![endif]-->
    <style>
        #trigger-upload {
            color: white;
            background-color: #3c8dbc;
            font-size: 14px;
            padding: 7px 20px;
            background-image: none;
        }

        #fine-uploader-manual-trigger .qq-upload-button {
            margin-right: 15px;
            background-color: #3c8dbc;
        }

        #fine-uploader-manual-trigger .buttons {
            width: 36%;
        }

        #fine-uploader-manual-trigger .qq-uploader .qq-total-progress-bar-container {
            width: 60%;
        }
        /*lisw 2017-09-05*/
        .qq-thumbnail-selector{
            height:160px;
            width:auto;
            border: 1px solid #ddd;
            box-shadow: 1px 1px 5px 0 #a2958a;
            padding: 10px 10px 30px 10px;
        }
        .qq-upload-list li{
            float:left;
            position: relative;
        }
        .qq-upload-cancel-selector{
            position: absolute;
            bottom: 15px;
            right: 15px;
        }
        .qq-upload-cancel-selector{
            background-color: transparent;
            border:1px;
        }
        .qq-upload-cancel-selector i{
            color:red;
        }
    </style>
</head>
<!-- END HEAD -->
<body class="hold-transition skin-blue sidebar-mini">

<div class="wrapper">
    <div class="content-wrapper" style="margin-left:0;">

        <section class="content-header">
            <h1>
                素材上传管理
                <small>素材上传</small>
            </h1>
            <ol class="breadcrumb">
                <li><a href="#"><i class="fa fa-dashboard"></i>首页</a></li>
                <li><a class="active">素材上传</a></li>
            </ol>
        </section>


        <!-- Main content -->
        <section class="content">
            <div class="row">
                <div class="col-xs-12">
                    <!-- general form elements disabled -->
                    <div class="box box-primary">
                        <form role="form" id="qq-form" enctype="multipart/form-data" method="post"
                              action="#springUrl('/a/materialUpload/formData')?_csrf=${_csrf.token}&_csrf_header=${_csrf.headerName}">
                            <input name="id" value="$!{data.id}" hidden="true"/>
                            <div class="box-body">
                                <div class="form-group form-md-line-input">
                                    <label>分类</label>
                                    <div class="input-group">
                                        <input type="text" id="categoryid" name="categoryid" value="$!{data.categoryid}"
                                               class="form-control" style="display: none">
                                        <input type="text" id="categoryName" name="categoryName" value="$!{data.categoryName}"
                                               class="form-control" disabled>
                                        <span class="input-group-btn">
                                            <button type="button" id="categorySelect"
                                                    class="btn btn-info btn-flat">选择</button>
                                         </span>
                                    </div>
                                </div>
                                <input type="text" style="display: none" name="_csrf" value="${_csrf.token}"/>
                                <input  type="text" style="display: none" name="_csrf_header" value="${_csrf.headerName}"/>
                                <div class="form-group form-md-line-input">
                                    <label>标题</label>
                                    <input type="text"
                                           class="form-control" name="title"
                                           id="title"
                                           maxlength="100" placeholder="标题"
                                           value="$!{data.title}"
                                           required="required"
                                    >

                                </div>
                                <div class="form-group form-md-line-input">
                                    <label>素材存储位置</label>
                                    <select name="cosconfigId" class="form-control">
                                        <!--<option value="0">本地</option>-->
                                        #foreach($cosconfig in $cosconfigList)
                                        #if($cosconfig.cosType == "qcloud")
                                        <option value="$cosconfig.id">腾讯</option>
                                        #end
                                        #if($cosconfig.cosType == "ali")
                                        <option value="$cosconfig.id">阿里</option>
                                        #end
                                        #if($cosconfig.cosType == "qiniu")
                                        <option value="$cosconfig.id">七牛</option>
                                        #end
                                        #end
                                    </select>
                                </div>
                                <div id="fine-uploader-manual-trigger"></div>
                                <!--<div class="box-footer">
                                    #if($shiro.hasPermission("material:edit"))
                                    <input class="btn btn-primary" id="save" value="保存" type="submit">
                                    #end
                                    <a href="#springUrl('/a/materialUpload/list')" class="btn btn-default">取消</a>
                                    &lt;!&ndash;<button class="btn btn-primary" id="uploadBtn">上传</button>&ndash;&gt;
                                </div>-->
                            </div>
                        </form>
                        <!-- /.box-body -->
                    </div><!-- /.box -->
                </div><!-- /.col -->
            </div><!-- /.row -->
        </section><!-- /.content -->
    </div><!-- /.content-wrapper -->


    <!-- Add the sidebar's background. This div must be placed
         immediately after the control sidebar -->
    <div class="control-sidebar-bg"></div>
</div><!-- ./wrapper -->
<script src="plugins/jQuery/jQuery-2.1.4.min.js"></script>
<!-- ztree -->
<script src="plugins/ztree/js/jquery.ztree.all.min.js"
        type="text/javascript"></script>
<!-- AdminLTE App -->
<script src="common/js/cfapp.js"></script>
<script>
    $().ready(function () {
        Cfapp.init();
        var sSource = "#springUrl('/a/materialCategory/treeData')";
        $('#categorySelect').on('click',
            function () {
                Cfapp.treeSingleSelect({
                    title: '分类选择',
                    url: sSource,
                    displayFields: 'categoryName',
                    storeFields: 'categoryid',
                    success: function () {
                        console.log('success');
                    },
                    cancel: function () {
                        console.log('cancel');
                    }
                })
            });
    });
    var manualUploader = new qq.FineUploader({
        element: document.getElementById('fine-uploader-manual-trigger'),
        template: 'qq-template-manual-trigger',
        request: {
            endpoint: "#springUrl('/a/materialUpload/formData')"
        },
        thumbnails: {
            placeholders: {
                waitingPath: 'plugins/fine-uploader/img/waiting-generic.png',
                notAvailablePath: 'plugins/fine-uploader/img/not_available-generic.png'
            }
        },
        autoUpload: false,
        debug: false,
        disableCancelForFormUploads:true,
        editFilename: {                                             //编辑名字
            enable: true
        },
        text: {
            uploadButton: '上传'
        },validation: {
            //控制上传文件的后缀格式数组
            allowedExtensions: ['jpeg', 'jpg', 'png', 'gif'],
            //控制上传文件大小
            sizeLimit: 5000 * 1024 // 5M
        },
        maxConnections:1,
        callbacks: {
            onDelete: function(id) {
                // ...
            },
            onDeleteComplete: function(id, xhr, isError) {
                //...
            },
            onAllComplete:function(id,name){
                Cfapp.confirm({
                    message: "创建成功",
                    btnoktext: "继续创建",
                    btncanceltext: "关闭",
                    success: function () {
                        location.href = "#springUrl('/a/materialUpload/form')"+"?categoryid="+$("#categoryid").val()+"&categoryName="+$("#categoryName").val();
                    },
                    cancel: function () {
                        location.href = "#springUrl('/a/materialUpload/list')";
                    }
                });
            }
        }
    });
    qq(document.getElementById("trigger-upload")).attach("click", function () {
        manualUploader.uploadStoredFiles();
    });
</script>
<!-- Bootstrap 3.3.5 -->
<script src="bootstrap/js/bootstrap.min.js"></script>
<!-- DataTables -->
<script src="plugins/datatables/jquery.dataTables.min.js"></script>
<script src="plugins/datatables/extensions/i18n/lanauage_ch.js"></script>
<script src="plugins/datatables/dataTables.bootstrap.min.js"></script>
<!-- SlimScroll -->
<script src="plugins/slimScroll/jquery.slimscroll.min.js"></script>
<!-- FastClick -->
<script src="plugins/fastclick/fastclick.min.js"></script>
<script src="plugins\bootstrap-fileinput\fileinput.js"></script>
<script src="plugins/bootstrap-fileinput/zh.js"></script>
<!--fileinput js-->
<!-- AdminLTE App -->
<script src="dist/js/app.min.js"></script>
<script src="plugins/bootstrap-maxlength/bootstrap-maxlength.min.js" type="text/javascript"></script>
<script src="plugins/security/sha256.js" type="text/javascript"></script>
<script src="plugins/jquery-validation/js/jquery.validate.min.js"></script>
<script src="plugins/jquery-validation/js/localization/messages_zh.js"></script>
<script src="js/jquery.form.min.js"></script>
<!-- END PAGE LEVEL PLUGINS -->
<script>
    $("#qq-form").validate({
        rules: {},
        messages: {},
        submitHandler: function (form) {
            $("#save").attr("disabled", true);
            var options = {
                url: "#springUrl('/a/materialUpload/formData')",
                type: "POST",
                dataType: "json",
                data: {},
                success: function (data) {
                    $("#save").attr("disabled", false);
                    if (data.errorNo == 0) {  //保存成功
                        Cfapp.confirm({
                            message: "创建成功",
                            btnoktext: "继续创建",
                            btncanceltext: "关闭",
                            success: function () {
                                location.href = "#springUrl('/a/materialUpload/form')"+"?categoryid="+$("#categoryid").val()+"&categoryName="+$("#categoryName").val();
                            },
                            cancel: function () {
                                location.href = "#springUrl('/a/materialUpload/list')";
                            }
                        });
                    } else {
                        Cfapp.alert({
                            message: "创建失败",
                            btntext: "确定",
                            success: function () {
                                location.href = "#springUrl('/a/materialUpload/list')";
                            }
                        });
                    }
                }, error: function (data) {
                    $("#save").attr("disabled", false);
                }
            };
            $("#myForm").ajaxSubmit(options);
        }
    })

</script>

</body>
<!-- END BODY -->
</html>