<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="include :: header('新增线索视频')" />
    <th:block th:include="include :: bootstrap-fileinput-css"/>
</head>
<body class="white-bg">
<div class="wrapper wrapper-content animated fadeInRight ibox-content">
    <form class="form-horizontal m" id="form-video-add">
        <div class="form-group">
            <label class="col-sm-3 control-label">视频：</label>
            <div class="col-sm-8">
                <input name="videoUrl" type="text" value="" hidden>
                <input type="file" name="videoUrlImg" id="videoUrlImg" multiple class="file"  />
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">视频封面：</label>
            <div class="col-sm-8">
                <input name="videoImg" type="text" value="" hidden>
                <input type="file" name="videoImgImg" id="videoImgImg" multiple class="file"  />
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">视频标题：</label>
            <div class="col-sm-8">
                <input name="videoTitle" class="form-control" type="text">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">显示时间：</label>
            <div class="col-sm-8">
                <input name="videoShowDate" class="form-control" type="text">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">来源APP：</label>
            <div class="col-sm-8">
                <input name="sourceApp" class="form-control" type="text">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">备注：</label>
            <div class="col-sm-8">
                <input name="remark" class="form-control" type="text">
            </div>
        </div>
    </form>
</div>
<th:block th:include="include :: footer" />
<th:block th:include="include :: bootstrap-fileinput-js"/>
<script th:inline="javascript">
    var prefix = ctx + "system/video"
    $("#form-video-add").validate({
        focusCleanup: true
    });

    function submitHandler() {
        if ($.validate.form()) {
            $.operate.save(prefix + "/add", $('#form-video-add').serialize());
        }
    }

    // 封面
    $('#videoImgImg').fileinput({
        language: 'zh',     //设置语言
        dropZoneEnabled: false,      //是否显示拖拽区域
        showPreview: false,
        uploadExtraData: {
            "name": "videoImgImg"
        },
        dropZoneTitle: "可以将图片拖放到这里",    //拖拽区域显示文字
        uploadUrl: ctx + 'tool/qiniu/upload',  //上传路径
        allowedFileExtensions: ['jpg', 'png', 'gif', 'jpeg'],   //指定上传文件类型
        maxFileSize: 0,
        maxFileSize: 10240,   //上传文件最大值，单位kb
        uploadAsync: true,  //异步上传
        maxFileCount: 1    //上传文件最大个数。
    }).on("fileuploaded", function(event,data) { //异步上传成功后回调
        if(data.response.code === 0){
            $("input[name='videoImg']").val(data.response.url)
        }else {
            alert("上传失败!");
        }
    });

    // 视频素材
    $('#videoUrlImg').fileinput({
        language: 'zh',     //设置语言
        dropZoneEnabled: false,      //是否显示拖拽区域
        showPreview: false,
        uploadExtraData: {
            "name": "videoUrlImg"
        },
        dropZoneTitle: "可以将视频拖放到这里",    //拖拽区域显示文字
        uploadUrl: ctx + 'tool/qiniu/upload',  //上传路径
        allowedFileExtensions: ['mp4', 'wmv', 'm4v', 'avi'],   //指定上传文件类型
        maxFileSize: 0,
        maxFileSize: 204800,   //上传文件最大值，单位kb
        uploadAsync: true,  //异步上传
        maxFileCount: 1    //上传文件最大个数。
    }).on("fileuploaded", function(event,data) { //异步上传成功后回调
        if(data.response.code === 0){
            $("input[name='videoUrl']").val(data.response.url)
        }else {
            alert("上传失败!");
        }
    });
</script>
</body>
</html>