<%@ 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">
        $(document).ready(function() {
            var showContent = $("#showContent").text();
            $("#showContent").html(showContent);
            var detailAskContent = $("#detailAskContent").text();
            $("#detailAskContent").html(detailAskContent);
            $('#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={};
                var Orientation = null;
                tempObj.module='images/ask';
                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("content", JSON.stringify(tempObj));
                    formData.append('file', $('#input')[0].files[0]);

                    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(res);
                            console.log(formData);
                            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;
                                $('#uploadimg'+i).attr('type',path);
                                $('#uploadimg'+i).attr('name',name);
                                $('#uploadimg'+i).attr('size',size);
                                $('#uploadimg'+i).html('<img id="imghead'+i+'" src="'+src+path+'"/><a></a>');
                                $('.p-img li img').width($('#addImg').width());
                                $('.p-img li img').height($('#addImg').width());
                                $('#imgCount').show();
                                $('#imghead'+i).closest('li').css('border-color','#fff');

                                $('#uploadimg'+i).append('<input style="display:none" name=askCommentEntity.commentFiles['+i+'].fileName  value ="'+name+'">');
                                $('#uploadimg'+i).append('<input style="display:none" name=askCommentEntity.commentFiles['+i+'].filePath  value ="'+path+'">');
                                $('#uploadimg'+i).append('<input style="display:none" name=askCommentEntity.commentFiles['+i+'].fileSize  value ="'+size+'">');

                            }else {
                                $("#uploadimg" + i).remove();
                                alertx(res.message);
                            }
                        },
                        error: function(err){
                            $("#uploadimg" + i).remove();
                            console.log("err:"+err);
                            alertx(err);
                        },
                        beforeSend: function(){

                        },
                    });
                });
            };

            $(".yellow-star .help-inline span").on("click",function(){
                $(this).css({"background": "url(../../assets/images/star-yellow.png) no-repeat center center","background-size":"18px auto"});
                $(this).parents(".yellow-star .help-inline").prevAll().find("span").css({"background": "url(../../assets/images/star-yellow.png) no-repeat center center","background-size":"18px auto"});
                $(this).parents(".yellow-star .help-inline").nextAll().find("span").css({"background": "url(../../assets/images/star-grey.png) no-repeat center center","background-size":"18px auto"});
            });
        });
        function showImg(dom) {
            window.open(dom)
        }
        function list() {
            $("#dataForm").submit();
        }
        function resolve() {// 替换掉富文本中的换行符
            var haha= $("#textAreaContent").val();
            dbstr =  haha.replace(/\n|\r\n/g,"<br>");
            $("#textAreaContent").val(dbstr);
            $("#searchForm").submit();
        }
        function upvotesBtn() {
            $("#searchForm").attr("action","${ctx}/ask/addUpvotes");
            $("#searchForm").submit();
        }
    </script>
    <style type="text/css" >
        .controls .help-inline{position: relative;}
        .orientataion{
            -moz-transform:rotate(90deg);
            -webkit-transform:rotate(90deg);
            filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
        }
        .controls .help-inline input{position: absolute;top: 8px;left: 8px;display: none;}
        .controls .help-inline span{background: url(../../assets/images/star-yellow.png) no-repeat center center;background-size: 18px auto;display: inline-block;width: 18px;height: 18px;margin-top: 3px;margin-left: 3px;}
    </style>
</head>
<body>
<ul class="nav nav-tabs">
    <li><a onclick="list()">问题列表</a></li>
    <li class="active"><a href="form?askId=${entity.askId}">问题详情</a></li>
</ul><br/>
<form id="dataForm" action="${ctx}/ask/list">
    <input name="status" type="hidden" value="${entity.fStatus}">
    <input name="beginDate" type="hidden" value="<fmt:formatDate value="${entity.beginDate}" pattern="yyyy-MM-dd HH:mm:ss"/>">
    <input name="endDate" type="hidden" value="<fmt:formatDate value="${entity.endDate}" pattern="yyyy-MM-dd HH:mm:ss"/>">
    <input name="keyword" type="hidden" value="${entity.keyword}">
</form>
<form:form id="searchForm" modelAttribute="entity"
           action="${ctx}/ask/save" method="post"
           class="form-horizontal">
    <sys:message content="${message}" />
    <input type="hidden" name="askId" value="${entity.askId}">

    <div class="control-group">
        <label class="control-label">一级类型:</label>
        <div class="controls">
            <span class="help-inline">${entity.categoryEntity.parent.name}</span>
        </div>
    </div>
    <div class="control-group">
        <label class="control-label">二级类型:</label>
        <div class="controls">
            <span class="help-inline">${entity.categoryEntity.name}</span>
        </div>
    </div>
    <div class="control-group">
        <label class="control-label">提问者:</label>
        <div class="controls">
            <span class="help-inline"><c:if test="${not empty entity.officeName}">${entity.officeName}&nbsp;|&nbsp;</c:if>${entity.createName}</span>
        </div>
    </div>
    <div class="control-group">
        <label class="control-label">提问日期:</label>
        <div class="controls">
            <span class="help-inline"><fmt:formatDate value="${entity.createDate}" pattern="yyyy-MM-dd HH:mm"></fmt:formatDate></span>
        </div>
    </div>
    <div class="control-group">
        <label class="control-label">问题内容:</label>
        <div class="controls">
            <span id="detailAskContent" class="help-inline" style="word-wrap:break-word;word-break:break-all;">${entity.content}</span>
        </div>
    </div>
    <c:if test="${fn:length(entity.fileList) > 0}">
        <div class="control-group">
            <label class="control-label">上传的图片:</label>
            <div class="controls">
                <span class="help-inline">
                    <c:forEach items="${entity.fileList}" var="file">
                        <img <c:if test="${file.orientation eq '6'}">class="orientataion" </c:if> onclick="showImg('${file.filePath}')" src="${file.filePath}" />
                    </c:forEach>
                </span>
            </div>
        </div>
    </c:if>

        <!-- 需要填解决方法 -->
    <shiro:hasPermission name="cms:article:resolve">
    <c:if test="${entity.status == 0}">
        <shiro:hasPermission name="ask:ask:edit">
        <div class="control-group">
            <label class="control-label">解决方法:</label>
            <div class="controls">
            <span class="help-inline">
                <textarea id="textAreaContent" name="content" style="width: 800px;height: 150px;" maxlength="500" placeholder="最多输入500字"></textarea>
            </span>
            </div>
            <br>
            <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>

            <label class="control-label"></label>
            <div class="controls">
                <input class="btn btn-primary" onclick="resolve();" type="button" value="问题已解决"/>
            </div>
        </div>
        </shiro:hasPermission>
    </c:if>
    </shiro:hasPermission>

    <!-- 显示 处理内容和上传的文件-->
   <%-- <input type="hidden" name="status" value="${entity.status}">--%>
    <form:hidden path="status"></form:hidden>
    <c:if test="${entity.status == 1 || entity.status == 2}">
        <div class="control-group">
            <label class="control-label">已解决</label>
            <div class="controls">
            <span class="help-inline">
                ${entity.askCommentEntity.createName}&nbsp;&nbsp;&nbsp;&nbsp;<fmt:formatDate value="${entity.askCommentEntity.createDate}" pattern="yyyy-MM-dd HH:mm"></fmt:formatDate>
            </span>
            </div>
        <br>
            <label class="control-label"></label>
            <div class="controls">
            <span class="help-inline" id="showContent">
                ${entity.askCommentEntity.content}
            </span>
            </div>
            <c:if test="${fn:length(entity.askCommentEntity.commentFiles) > 0}">
                <br>
                <label class="control-label"></label>
                <div class="controls">
                <span class="help-inline">
                        <c:forEach items="${entity.askCommentEntity.commentFiles}" var="commentFile">
                            <img <c:if test="${commentFile.orientation eq '6'}">class="orientataion"</c:if> onclick="showImg('${commentFile.filePath}')" src="${commentFile.filePath}" />
                        </c:forEach>
                </span>
                </div>
            </c:if>
            <shiro:hasPermission name="ask:ask:evaluate">
                <c:if test="${entity.status == 1 && entity.isAdmin == 0}"><!-- 显示评价 -->
                    <hr>
                    <label class="control-label">评分：</label>
                    <div class="controls yellow-star">
                    <span class="help-inline">
                        <input type="radio" id="upvotes1" name="upvotes" value="1"><label for="upvotes1"><span></span></label>
                    </span>
                        <span class="help-inline">
                        <input type="radio" id="upvotes2" name="upvotes" value="2"><label for="upvotes2"><span></span></label>
                    </span>
                        <span class="help-inline">
                        <input type="radio" id="upvotes3" name="upvotes" value="3"><label for="upvotes3"><span></span></label>
                    </span>
                        <span class="help-inline">
                        <input type="radio" id="upvotes4" name="upvotes" value="4"><label for="upvotes4"><span></span></label>
                    </span>
                        <span class="help-inline">
                        <input type="radio" id="upvotes5" name="upvotes" value="5" checked><label for="upvotes5"><span></span></label>
                    </span>
                    </div>
                    <br>
                    <label class="control-label"></label>
                    <div class="controls">
                        <input class="btn btn-primary" onclick="upvotesBtn();" type="button" value="提交评价"/>
                    </div>
                </c:if>
            </shiro:hasPermission>
        </div>
    </c:if>

    <!-- 需要显示评分 -->
    <c:if test="${entity.status == 2}">
        <div class="control-group">
            <label class="control-label">评分:</label>
            <div class="controls pingfen-star">
                <c:forEach begin="1" end="${entity.upvotes}">
                    <span style="background: url(../../assets/images/star-yellow.png) no-repeat center center;
                        background-size: 18px auto;
                        display: inline-block;
                        width: 18px;
                        height: 18px;
                        margin-top: 3px;
                        margin-left: 3px;"></span>
                </c:forEach>
                <c:forEach begin="${entity.upvotes + 1}" end="5">
                    <span style="background: url(../../assets/images/star-grey.png) no-repeat center center;
                        background-size: 18px auto;
                        display: inline-block;
                        width: 18px;
                        height: 18px;
                        margin-top: 3px;
                        margin-left: 3px;"></span>
                </c:forEach>
            </div>
        </div>
    </c:if>
    <div class="form-actions">
        <input id="btnCancel" class="btn" type="button" value="返 回" onclick="history.go(-1)" />
    </div>
</form:form>
</body>
</html>