<link rel="stylesheet" th:href="@{/css/cases/content.css}" xmlns:th="http://www.w3.org/1999/xhtml"/>

<style>
	.ui-autocomplete{z-index: 100000;}
	/* #tagNames_tagsinput{height: 34px !important; border-radius: 3px; box-shadow: none; border-color: #d2d6de;} */
	div.tagsinput, div.tagsinput span.tag {padding: 3px !important;}
</style>
<form class="form-horizontal" id="newsForm" enctype="multipart/form-data" onsubmit="return false;">
    <input class="hidden" id="dataid" name="id" th:value="${id}">
    <input class="hidden" name="applicationId" th:value="${applicationId}">
    <input class="hidden" name="type" th:value="${caseType}">
    <input class="hidden" id="result" name="count" th:value="${count}">
    <div class="box-body">
        <div class="form-group">
            <label class="col-sm-2 control-label"><font color="red">*</font> 标题：</label>
            <div class="col-sm-9">
                <input id="title" name="title" class="form-control" require="必填项" th:value="${title}" min="5" max="20">
            </div>
        </div>

		<div class="form-group">
            <label class="col-sm-2 control-label">状态：</label>
            <div class="col-sm-2">
     			<select id="applicationStatus" class="selectpicker" disabled="disabled">
                    <option value="">请选择</option>
                </select>
            </div>
            <label class="col-sm-2 control-label">关联部门：</label>
            <div class="col-sm-2">
            <select id="contentType26" name="tagLists" class="selectpicker" multiple>
            </select>
            </div>
        </div>

        <div class="form-group">
            <label class="col-sm-2 control-label">案例类型：</label>
            <div class="col-sm-2">
                <select id="contentType18" name="tagLists" class="selectpicker">
                    <option value="">请选择</option>
                </select>
            </div>
            <label class="col-sm-2 control-label">案例用途：</label>
            <div class="col-sm-2">
                <select id="contentType19" name="tagLists" class="selectpicker" multiple>
                </select>
            </div>
        </div>

        <div class="form-group">
            <label class="col-sm-2 control-label">创意形式：</label>
            <div class="col-sm-2">
                <select id="contentType20" name="tagLists" class="selectpicker" multiple>
                </select>
            </div>
            <label class="col-sm-2 control-label">节日事件：</label>
            <div class="col-sm-2">
                <select id="contentType21" name="tagLists" class="selectpicker" multiple>
                </select>
            </div>
        </div>

        <div class="form-group">
            <label class="col-sm-2 control-label">品牌公司：</label>
            <div class="col-sm-2">
                <select id="contentType23" name="tagLists" class="selectpicker" multiple>
                </select>
            </div>
            <label class="col-sm-2 control-label">广告公司：</label>
            <div class="col-sm-2">
                <select id="contentType24" name="tagLists" class="selectpicker" multiple>
                </select>
            </div>
        </div>

		<div class="form-group">
            <label class="col-sm-2 control-label"><font color="red">*</font> 标签：</label>
            <div class="col-sm-5" style="padding-right: 0px;">
                <input id="tagNames" name="tags" class="form-control" require="必填项"><!-- 提交到后台字段是tags -->
            </div>
            <div class="col-sm-4 control-label" style="font-size:90%;color:gray;text-align:left;padding-left:0px;padding-top:10px;">（按空格键从下拉中选择标签，也可直接输入新标签，按回车确认）</div>
        </div>

        <div class="form-group">
            <label class="col-sm-2 control-label"><font color="red">*</font> URL：</label>
            <div class="col-sm-9">
                <input type="text" id="url" name="url" class="form-control" require="必填项" th:value="${url}" min="10" max="200" >
            </div>
            <div th:if="${caseType} == 'video'" class="col-sm-1" style="padding-left: 0px;">
            	<!-- 视频案例，后面加上上传视频的按钮 -->
            	<input type="file" id="video_file" name="file" style="display: none;">
                <button type="button" id="btn_uploadvideo" class="btn btn-info" for="video_file">上传</button>
            </div>
        </div>

        <div class="form-group">
            <label  class="col-sm-2 control-label"><font color="red">*</font> 封面图：</label>
            <div class="col-sm-2">
                <label class="btn btn-info" for="listicon_file" style="color:white;vertical-align:top;">上传</label>
                <input type="file" id="listicon_file" name="file" style="display: none;">
                <input type="hidden" id="listicon" name="listicon" th:value="${listicon}" style="display: none;">
                &nbsp;&nbsp;&nbsp;&nbsp;
                <span><img style="display:none;" id="img_listicon" th:src="${listicon}" width="70px" height="70px"></span>
            </div>

            <label class="col-sm-5 control-label">附件：</label>
            <div class="col-sm-2">
                <label class="btn btn-info" for="attachment_file" style="color:white;vertical-align:top;">上传</label>
                <input type="file" id="attachment_file" name="file" style="display: none;">
                <input type="hidden" id="attachment" name="attachment" th:value="${attachment}" style="display: none;">
                <div style="height: 20px; line-height: 20px;">
                	<a class="a_viewfile" href="javascript:;" target="_blank" title="点击下载"  style="height: 34px; line-height: 34px;"></a>
                </div>
            </div>
        </div>

        <div class="form-group img-group" style="display: '';">
            <label class="col-sm-2 control-label">图集：</label>
            <div class="col-sm-9">
            	<input type="hidden" id="imgList" name="images" th:value="${imgList}" /><!-- 后台用字符串接受,字段是images -->
				<label class="btn btn-info" for="fileInput" style="color:white; vertical-align:top;">选择文件</label>
               	<input type="file" id="fileInput" name="fileInput" multiple="" style="display: none;" >
				<button type="button" id="fileBtn" class="btn btn-info" style="display: none;">批量上传</button>

				<table width="100%" border="1" class="fileList_parent" style="display: none;">
					<thead>
						<tr>
							<th>文件名</th>
							<th>排序</th>
							<th>进度</th>
							<th>操作</th>
						</tr>
					</thead>
					<tbody class="fileList"></tbody>
				</table>
            </div>
        </div>

        <div class="form-group">
            <label class="col-sm-2 control-label"><font color="red">*</font> 描述：</label>
            <div class="col-sm-9">
                <textarea id="desct" name="desct" class="form-control" rows="1" require="必填项" min="50" max="300" >[[${desct}]]</textarea>
            </div>
        </div>

    </div>
    <!-- /.box-body -->
    <div class="box-footer">
        <div class="pull-right">
            <button type="button" id="btn_save" class="btn btn-info">保 存</button>
            <button type="button" data-dismiss="modal" class="btn btn-default">取 消</button>
        </div>
    </div>
    <!-- /.box-footer -->
    </div>
</form>


<script th:inline="javascript">
var caseType = [[${caseType}]];
</script>
<script charset="utf-8" type="text/javascript" th:src="@{/libs/kindeditor/kindeditor-all-custom-min.js}"></script>
<script charset="utf-8" type="text/javascript" th:src="@{/libs/kindeditor/lang/zh-CN.js}"></script>
<script charset="utf-8" type="text/javascript" th:src="@{/libs/jquery.form/jquery.form.min.js}"></script>
<script charset="utf-8" type="text/javascript" th:src="@{/js/cases/content.js}"></script>
<script type="text/javascript">
    var editor;
    function initKEdit(desct){
        editor = KindEditor.create(desct,{
            filterMode: false,	// 取消过滤video等
            themeType : 'simple', // 简单风格'simple'
            width: '100%',
            height: '400px',
            langType: 'zh-CN',		// 语言 'zh-CN' 'en'
            uploadJson: '[[@{/console/kindeditor/oss/api/file-upload}]]',	// 指定上传文件的服务器端程序
            //	fileManagerJson: '[[@{/console/kindeditor/local/api/file-manager}]]',	// 指定浏览远程图片的服务器端程序
            allowFileManager: false,	// 不允许对上传图片/文件进行管理，文件空间功能，OSS是KeyMap文件系统对目录列表支持不一样
            afterChange:function(){this.sync();},
            afterUpload: function(){this.sync();},	// 图片上传后，将上传内容同步到textarea中
            afterBlur: function(){this.sync();},	// 失去焦点时，将上传内容同步到textarea中
            afterCreate: function(){
                //	console.log('after Create');
                //	let _styles = '<style> .ke-content img{max-width:100%;} </style>'
                //	$(".ke-edit-iframe").contents().find("body").append(_styles);
            },
            resizeMode: 1
        });
        // editor.ready(function() {
        //     console.log('DOM loaded');
        // });
    }

    $(".selectpicker").selectpicker({
        noneSelectedText : '请选择'
    });

    function getDropDownBox(){
        //初始化下拉框
        $.getJSON("/cases/console/datadict/getDropDownBox",function (data){
            $.each(data.data, function(i, item){
                if(item.dictId === 26 ){
                    $("#contentType26").append("<option value='"+item.tid+"'>"+item.tagName+"</option>\n");

                }else if(item.dictId === 18 ){
                    $("#contentType18").append("<option value='"+item.tid+"'>"+item.tagName+"</option>\n");

                }else if(item.dictId === 19 ){
                    $("#contentType19").append("<option value='"+item.tid+"'>"+item.tagName+"</option>\n");

                }else if(item.dictId === 20 ){
                    $("#contentType20").append("<option value='"+item.tid+"'>"+item.tagName+"</option>\n");

                }else if(item.dictId === 21 ){
                    $("#contentType21").append("<option value='"+item.tid+"'>"+item.tagName+"</option>\n");

                }else if(item.dictId === 23 ){
                    $("#contentType23").append("<option value='"+item.tid+"'>"+item.tagName+"</option>\n");

                }else if(item.dictId === 24 ){
                    $("#contentType24").append("<option value='"+item.tid+"'>"+item.tagName+"</option>\n");

                }
            });
           /* $("#contentType26").find("option[value='"+$("#contentType26 option:eq(0)").val()+"']").attr("selected",true);
            $("#contentType18").find("option[value='"+$("#contentType18 option:eq(0)").val()+"']").attr("selected",true);
            $("#contentType19").find("option[value='"+$("#contentType19 option:eq(0)").val()+"']").attr("selected",true);
            $("#contentType20").find("option[value='"+$("#contentType20 option:eq(0)").val()+"']").attr("selected",true);
            $("#contentType21").find("option[value='"+$("#contentType21 option:eq(0)").val()+"']").attr("selected",true);
            $("#contentType23").find("option[value='"+$("#contentType23 option:eq(0)").val()+"']").attr("selected",true);
            $("#contentType24").find("option[value='"+$("#contentType24 option:eq(0)").val()+"']").attr("selected",true);*/
            //使用refresh方法更新UI以匹配新状态
            $('.selectpicker').selectpicker('refresh');
            //render方法强制重新渲染引导程序
            $('.selectpicker').selectpicker('render');
        });
    }


    // 上传icon图片
	function uploadIconFile(obj) {
        //如果没有文件
		if(obj.length < 1){
			console.log('没有选择文件');
			return false;
		}
		// 先全部校验一遍
		for( var i=0;i<obj.length;i++ ){
			var fileObj = obj[i];		//单个文件
			var name = fileObj.name;	//文件名
			var size = fileObj.size;	//文件大小
			var nameArr = name.split(".");
			var type = nameArr[nameArr.length-1].toLowerCase(); //文件类型，获取的是文件的后缀
			//文件为空不上传
			if(size == 0){
				layer.msg('文件"'+ name +'"为空，不能上传');
				return false;
			}
			//文件类型不为这几种，就不上传
			if(("png/jpg/jpeg/bmp/gif").indexOf(type) == -1){
				layer.msg('文件"'+ name +'"格式不对，请上传正确的图片');
				return false;
			}
			//文件大于1M，就不上传
			if(size > 1*1024*1024){
				layer.msg('文件过大，请上传1M内的图片');
				return false;
			}
		}

        $('#newsForm').ajaxSubmit({
            url: '[[@{/console/tool/oss/uploadFile}]]?caseType=[[${caseType}]]&category=icon',
            type: 'post',
            async: true,
            data: $('#newsForm').serialize(),
            dataType: "json",
            success: function (data) {
                if (data.ret==0) {
                    $('#listicon').parent().find('input[type="file"]').val(''); // 清空值
                    $('#listicon').val(data.data.url);
                    $("#img_listicon").attr('src', data.data.url);
            		$('#img_listicon').show();
                }else{
                    layer.msg(data.msg);
                }
            }
        });
	}

	// 上传附件
	function uploadAttrFile() {
        $('#newsForm').ajaxSubmit({
            url: '[[@{/console/tool/oss/uploadFile}]]?category=attachment&caseType=[[${caseType}]]',
            type: 'post',
            async: true,
            data: $('#newsForm').serialize(),
            dataType: "json",
            success: function (data) {
                if (data.ret==0) {
                	var ori_name = data.data.ori_name;
                	if(ori_name.length>10)ori_name=ori_name.substring(0, 8)+"..."+ori_name.substring(ori_name.length-4, ori_name.length);

                    $('#attachment').parent().find('input[type="file"]').val(''); // 清空值
                    $('#attachment').val(JSON.stringify(data.data));
                    $(".a_viewfile").attr('href', data.data.url);
                    $(".a_viewfile").text(ori_name);
            		$('.a_viewfile').show();
                }else{
                    layer.msg(data.msg);
                }
            }
        });
	}

	// 上传视频
	function uploadVideoFile(obj) {
        //如果没有文件
		if(obj.length < 1){
			console.log('没有选择文件');
			return false;
		}
		// 先全部校验一遍
		for( var i=0;i<obj.length;i++ ){
			var fileObj = obj[i];		//单个文件
			var name = fileObj.name;	//文件名
			var size = fileObj.size;	//文件大小
			var nameArr = name.split(".");
			var type = nameArr[nameArr.length-1].toLowerCase(); //文件类型，获取的是文件的后缀
			//文件为空不上传
			if(size == 0){
				layer.msg('文件"'+ name +'"为空，不能上传');
				return false;
			}
			//文件类型不为这几种，就不上传
			if(("mp4/mov/mkv/rmvb/rm/avi/flv").indexOf(type) == -1){
				layer.msg('文件"'+ name +'"格式不对，请上传正确的视频');
				return false;
			}
			//文件大于20M，就不上传
			if(size > 20*1024*1024){
				layer.msg('文件过大，请上传20M内的视频');
				return false;
			}
		}

		var loadIndex = layer.load(1);
        $('#newsForm').ajaxSubmit({
            url: '[[@{/console/tool/oss/uploadFile}]]?caseType=[[${caseType}]]&category=video',
            type: 'post',
            async: true,
            data: $('#newsForm').serialize(),
            dataType: "json",
            success: function (data) {
           		layer.close(loadIndex);
                if (data.ret==0) {
                    layer.msg('视频上传成功');
                    $('#video_file').val(''); // 清空值
                    $('#url').val(data.data.url);
                }else{
                    layer.msg(data.msg);
                }
            }
        });
	}

	// 查询案例来源下拉
	function getFromSelectStore(){
		$.getJSON('console/datadict/getCaseFromSelect?dictKey=from_[[${caseType}]]',function(data){
	    	if(data.ret == 0){
	    		var opts="";
	    		var items = data.data;
	    		for(var i in items){
	    			opts+="<option value='"+items[i].id+"'>"+items[i].name+"</option>";
	    		}
	    		$("#fromid").append(opts);
	    		var edit_fromid = '[[${fromid}]]';
	    		if(edit_fromid>0)$("#fromid").val(edit_fromid);
	    	}
		});
	}

	function initLoad(){

		// 加载附件内容
		if($('#dataid').val() > 0){
			var attachment = '[[${attachment}]]';
			if(attachment != null && attachment != undefined){
				attachment=attachment.replace(new RegExp('&quot;','g'),'"');
				if(attachment!=null && $.trim(attachment)!=''){
					var jsondata = JSON.parse(attachment);
					$('#attachment').parent().find('input[type="file"]').val(''); // 清空值
	                $('#attachment').val(attachment);
	                $(".a_viewfile").attr('href', jsondata.url);
	                $(".a_viewfile").text(jsondata.ori_name);
	           		$('.a_viewfile').show();
           		}
			}
		}

		// 加载标签插件数据
		if($('#dataid').val() > 0){
			var tags = '[[${tags}]]';
			if(tags != null && tags != undefined){
				tags=tags.replace(new RegExp('&quot;','g'),'"');
				var jsondata = JSON.parse(tags);
				for(var i=0;i<jsondata.length;i++){
				    if(jsondata[i].dictId === 25 ){
                        $('#tagNames').addTag(jsondata[i].tagName);
                    }
				}
			}
		}


        setTimeout(function (){
            if($('#dataid').val() > 0){
                var tags = '[[${tags}]]';
                if(tags != null && tags != undefined){
                    tags=tags.replace(new RegExp('&quot;','g'),'"');
                    var jsondata = JSON.parse(tags);
                    for(var i=0;i<jsondata.length;i++){
                        if(jsondata[i].dictId === 26 ){
                            $("#contentType26").find("option[value='"+jsondata[i].tid+"']").attr("selected",true);
                        }else if(jsondata[i].dictId === 18 ){
                            $("#contentType18").find("option[value='"+jsondata[i].tid+"']").attr("selected",true);
                        }else if(jsondata[i].dictId === 19 ){
                            $("#contentType19").find("option[value='"+jsondata[i].tid+"']").attr("selected",true);

                        }else if(jsondata[i].dictId === 20 ){
                            $("#contentType20").find("option[value='"+jsondata[i].tid+"']").attr("selected",true);

                        }else if(jsondata[i].dictId === 21 ){
                            $("#contentType21").find("option[value='"+jsondata[i].tid+"']").attr("selected",true);

                        }else if(jsondata[i].dictId === 23 ){
                            $("#contentType23").find("option[value='"+jsondata[i].tid+"']").attr("selected",true);

                        }else if(jsondata[i].dictId === 24 ){
                            $("#contentType24").find("option[value='"+jsondata[i].tid+"']").attr("selected",true);

                        }
                    }

                    var release = '[[${release}]]';
                    if(release != null && release != undefined){
                        console.log(release)
                        if(release === '1' ){
                            $("#applicationStatus").append("<option value='"+release+"'>未发布</option>\n").attr("selected",true);
                        }else if(release === '2' ){
                            $("#applicationStatus").append("<option value='"+release+"'>已发布</option>\n").attr("selected",true);
                        }else if(release === '4' ){
                            $("#applicationStatus").append("<option value='"+release+"'>已下线</option>\n").attr("selected",true);
                        }
                    }
                    //使用refresh方法更新UI以匹配新状态
                    $('.selectpicker').selectpicker('refresh');
                    //render方法强制重新渲染引导程序
                    $('.selectpicker').selectpicker('render');
                }
            }
        },100)


		// 加载图集的table
    	if(caseType == 'h5' || caseType=='design' || caseType=='video'){
    		if($('#dataid').val() > 0)setTableList('[[${images}]]');
    	}
	}

    $(function () {
        initKEdit('#desct'); // 初始化编辑器
        getDropDownBox();


        if($("#result").val() > 0){
            $("#btn_save").hide();
        }

		initLoad();

		$('#tagNames').tagsInput({
			width:'auto',
			height:'34px',
			defaultText:'选择标签',
			autocomplete_url:'[[@{/console/datadict/getTags}]]?dictKey=tag_[[${caseType}]]',
			onAddTag:function(tag){
			//	console.log('增加了'+tag+', total='+$('#tagNames').val());
         	},
          	onRemoveTag:function(tag){
          	//	console.log('删除了'+tag+', total='+$('#tagNames').val())
         	}
		});

		// 选择图片自动上传
		$("#newsForm").on("change","#listicon_file",function(){
		    uploadIconFile(this.files);
		});

		// 选择附件自动上传
		$("#newsForm").on("change","#attachment_file",function(){
		    uploadAttrFile();
		});

		// 选择视频自动上传
		$("#newsForm").on("change","#video_file",function(){
		    uploadVideoFile(this.files);
		});


    	// 解决模态框中编辑器无法在文本框输入值的问题
    	$('#news-edit-modal').on('shown.bs.modal',function(){
			$(document).off('focusin.modal');
		});

		var picurl = $('#img_listicon').attr('src');
		if(picurl!=null && $.trim(picurl)!=''){
			$('#img_listicon').show();
		}

		// 点击封面图片预览大图
		$('#img_listicon').click(function(){
			var picurl = $(this).attr('src');
			if(picurl!=null && $.trim(picurl)!=''){
			//	window.open(picurl, "_blank");
				layer.photos({
					photos: {"id":'a1',"start":0,"data":[{"src":""+picurl+""}]}
					,anim: 5 // 0-6的选择，指定弹出图片动画类型，默认随机
				});
			}
		});

    	// 点击上传视频的按钮,自动触发上传
    	$('#btn_uploadvideo').click(function(){
    		$("#video_file").click();
    	});

    	// 提交保存
        $("#btn_save").on('click', function () {
            //编辑器需输入文本值  不然只输入图片 编辑器会出bug
            var str = $("#desct").val();
             str = str.substr(str.length-1,1);
            if(str === ">"){
                alert("请在视频或图片后面输入文本值！");
                return;
            }

            if($("#contentType26").val() === null){
                 alert('关联部门不能为空！');
                 return;
            }
            if($("#contentType18").val() === null){
                alert('案例类型不能为空！');
                return;
            }
            if($("#contentType19").val() === null){
                alert('案例用途不能为空！');
                return;
            }
            if($("#contentType20").val() === null){
                alert('创意形式不能为空！');
                return;
            }
            if($("#contentType21").val() === null){
                alert('节日事件不能为空！');
                return;
            }
            if($("#contentType23").val() === null){
                alert('品牌公司不能为空！');
                return;
            }
            if($("#contentType24").val() === null){
                alert('广告公司不能为空！');
                return;
            }
            console.log($("#tagNames").val())
            if($("#tagNames").val() === ''){
                alert('标签不能为空！');
                return;
            }
        //	editor.sync(); // 同步editor数据
        	if(caseType == 'design' || caseType == 'video' || caseType == 'h5'){
        		$('#imgList').val(getImgJsonList()); // 同步多图json数据
        	}
            editor.sync(); // 同步editor数据

            //	let htmlValue = editor.html();
            let textValue = editor.text();
            // 替换所有的换行符和所有所有的空格
            textValue = textValue.trim().replace(/\r\n/g, "").replace(/\n/g, "").replace(/\s/g,"");
            $('#content_text').val(textValue);

            if (doValidForm(newsForm)) {
            //	$('#type').removeAttr('disabled'); // disabled的表单form.serialize取不到值
                Core.mask("#btn_save");
                Core.postAjax("[[@{/console/content/merge}]]",$("#newsForm").serialize(),function (data) {
                    Core.unmask("#btn_save");
	                if (data.ret==0) {
                        $("#news-edit-modal").modal("hide");
                        $("#myModal").modal("hide");
                        Core.refreshTable("#table",true);
                        layer.msg('保存成功！');
	                }else{
	                	layer.msg(data.msg);
	                }
                });
            }
        });
    });
</script>
