<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<html>
<head>
    <title>提交新问题</title>
    <meta name="decorator" content="default"/>
    <script type="text/javascript" src="../../assets/common/exif.js">
    </script>
    <script type="text/javascript">
        $(function () {
            $("#grandParentCategory").change(function () {
                var id = $(this).val();
                $.ajax({
                type: "POST",
                url:"${ctx}/faqApi/findByParentId",
                data:{"parent.id":id,"module":"ask"},// 你的formid
                dataType:"json",
                async: false,
                error: function(request) {
                alert("Connection error");
                },
                success: function(data) {
                var list = data.categoryEntities;
                console.log(list);
                var code = "<option value=''>请选择</option>";
                for (i = 0; i< list.length; i++) {
                    code = code + "<option value='"+ list[i].id + "'>" + list[i].name+"</option>";
                }
                console.log(code);
                console.log($("#categoryId"));
                $("#categoryId").empty();
                $("#categoryId").append(code);
                $("#s2id_categoryId .select2-chosen").text("请选择");
                }
                });
            });

            $("#searchForm").submit(function(){
                var categoryId = $("#categoryId").val();
                var content = $("#content").val();
                if (categoryId == "" || categoryId == null || categoryId == "请选择"){
                    $('#categoryId').siblings(".error").show();
                    return false;
                }else {
                    $("#categoryId").siblings(".error").hide();
                }
                if(content == "" || content == null){
                    $("#content").siblings(".error").show();
                    return false;
                }else {
                    $("#content").siblings(".error").hide();
                }
                var haha= $("#content").val();
                dbstr =  haha.replace(/\n|\r\n/g,"<br>");
                $("#content").val(dbstr);
                loading('正在提交，请稍等...');
                return true;
            });

            $('#searchForm').on('click','.upload-img a',function(e){
                e.stopPropagation();
                e.preventDefault();
                $(this).closest('li').remove();
                var length = $('.p-img ul li').length;
                if(length<6){
                    $('#addImg').show();
                }
            });

            previewImage=function(file){
                var formData = new FormData();
                var tempObj={};
                tempObj.module='images/ask' + '';
                var Orientation = null;
                tempObj.userCode='1000154873';
                tempObj.versionName='1.0';
                tempObj.language='zh_CN';
                tempObj.device_token='';
                tempObj.platform='HTML5';
                tempObj.appCode='30006';
                tempObj.appkey='';
                tempObj.contentType='png';
                EXIF.getData($('#input')[0].files[0], function() {
                    var newdata = EXIF.getAllTags(this);
                    Orientation = EXIF.getTag(this, 'Orientation');
                    console.log(Orientation);
                    tempObj.orientation = Orientation;
                    formData.append('file', $('#input')[0].files[0]);
                    formData.append("content", JSON.stringify(tempObj));
                    formData.append("sign",'sign');
                    formData.append("module","images/ask");
                    //console.log(formData.get("file"))

                    var i=0;
                    i = $('.upload-img').length;
                    $('.p-img ul').prepend('<li class="upload-img" id="uploadimg'+i+'"><p style="padding-top:76px;font-size:14px;background: url(../../assets/images/loading2.gif) no-repeat center 25px;background-size: 24% auto;">上传中</p><a></a></li>')
                    var length = $('.p-img ul li').length;
                    $('#imgCount span').html(length-1);
                    if(length>5){
                        $('#addImg').hide();
                    }
                    $.ajax({
                        url : '${ctx}/api/upload/files',
                        type : 'POST',
                        data : formData,
                        processData : false,
                        contentType : false,
                        dataType: 'JSON',
                        success : function(res) {
                            console.log("11111111111111"+res);
                            if(res&&res.status == '2000'){

                                var src = res.data.url;
                                var path = res.data.files[0].path;
                                var name = res.data.files[0].name;
                                var size = res.data.files[0].size;
                                console.log(src);
                                $('#uploadimg'+i).attr('type',path);
                                $('#uploadimg'+i).attr('name',name);
                                $('#uploadimg'+i).attr('size',size);
                                $('#uploadimg'+i).html('<div class="div-img"><img style="width: 100%;height: 100%;" id="imghead'+i+'" src="'+src+path+'"/><a></a></div>');
                                $('.p-img li .div-img').css("overflow","hidden");
                                $('.p-img li .div-img').width($('#addImg').width());
                                $('.p-img li .div-img').height($('#addImg').width());
                                $('#imgCount').show();
                                $('#imghead'+i).closest('li').css('border-color','#fff');

                                $('#uploadimg'+i).append('<input style="display:none" name=fileList['+i+'].fileName  value ="'+name+'">');
                                $('#uploadimg'+i).append('<input style="display:none" name=fileList['+i+'].filePath  value ="'+path+'">');
                                $('#uploadimg'+i).append('<input style="display:none" name=fileList['+i+'].fileSize  value ="'+size+'">');
                                //压缩图片
//                            $(".p-img .upload-img img").load(function(){
//                                $(".upload-img").each(function() {
//                                    var size = $(this).width();
//                                    var width = $(this).find("img").width();
//                                    var height = $(this).find("img").height();
//                                    var _size = width;
//                                    if(width>height){
//                                        _size = height;//得到最小的边长
//                                    }
//                                    //按比例将得到图片缩小后的长宽
//                                    var scaling = size/_size;
//                                    height = height*(scaling);
//                                    width = width*(scaling);
//                                    $(this).find("img").width(width).height(height);
//                                    $(this).find("img").css("max-width",width);
//                                });
//                            });
                            }else {
                                $("#uploadimg" + i).remove();
                                alertx(res.message);
                            }
                        },
                        error: function(err){
                            $("#uploadimg" + i).remove();
                            console.log("err:"+err);
                            alertx(err);
                        },
//                    beforeSend: function(e){
//                        console.log("3333333333"+e);
//                    },
                    });
                });
            };


        });
    </script>
</head>
<body>
<ul class="nav nav-tabs">
    <li class="active"><a href="${ctx}/ask/form">提交新问题</a></li>
</ul><br/>

<form:form id="searchForm" modelAttribute="entity" action="${ctx}/ask/saveAsk" method="post" class="form-horizontal">
    <sys:message content="${message}" />

    <div class="control-group">
        <label class="control-label">一级类型:</label>
        <div class="controls">
            <form:select id="grandParentCategory" path="categoryEntity.parent.id" htmlEscape="false" class="input-medium required">
                <form:option value="">请选择</form:option>
                <c:forEach items="${grandParent}" var="grandParent">
                    <form:option value="${grandParent.id}">${grandParent.name}</form:option>
                </c:forEach>
            </form:select>
        </div>
    </div>
    <div class="control-group">
        <label class="control-label">二级类型:</label>
        <div class="controls">
            <form:select path="categoryId" htmlEscape="false" class="input-medium required">
                <option value="">请选择</option>
            </form:select>
            <label style="display:none;" class="error">必填信息</label>
        </div>
    </div>
    <div class="control-group">
        <label class="control-label">问题内容:</label>
        <div class="controls">
            <form:textarea path="content" cssStyle="width: 800px;height: 150px;" class="required"  maxlength="300" placeholder="最多输入300字"></form:textarea>
            <label style="display:none;" class="error">必填信息</label>
        </div>
    </div>
    <div class="control-group">
        <label class="control-label">上传图片:</label>
        <div class="controls p-img">
            <!-- <div class="h3">上传图片<p id="imgCount" style="display: none;">完成<span>2</span>/5</p></div> -->
            <ul>
                <li id="addImg">
                    <b></b>
                    <p>最多5张</p>
                    <input type="file" onchange='previewImage(this)' id="input"/>
                </li>
            </ul>
            <div class="clearf"></div>
        </div>
    </div>

    <div class="form-actions">
        <shiro:hasPermission name="ask:ask:edit"><input id="btnSubmit" class="btn btn-primary" type="submit"<%-- onclick="submitBtn();"--%> value="提&nbsp;交"/>&nbsp;</shiro:hasPermission>
        <input id="btnCancel" class="btn" type="button" value="返 回" onclick="history.go(-1)" />
    </div>
</form:form>
</body>
</html>