var vm;
var reportdata;
var reportlayout;
var layoutStyle = 0;
var layoutDivider = 0;
var layoutSpacing = 1;
var layoutPicturesDisplay = 0;
var layoutCaptionImages = false;
var layoutHighlightColor = "";
var mediasdata = [];
$(function () {
    $("#host_header").find(".button").remove();
    $("#spanUserName").remove();

    checkBrowser();

    if (teamintelligence) {
        $('.assettr').remove();
        $(".assettrmobile").remove();
    }
    vm = new Vue({
        el: '#divreport',
        data: {
            report: {
                Asset: {},
                Template: {},
                ReportLayout: {}
            }
        },
        methods: {
            reload: function (data) {
                this.report = data;
            }
        }
    });
    GetInspectionReport();
});

function checkBrowser() {
    if (isMobile()) {
        $(".logo").remove();
        $(".logoright").remove();
        $(".headernote").remove();
        $("#host_header").css("text-align", "left").css("min-width", "unset");

        $("#divreport").css("width", "unset");
        //$("#button-edit").remove();
        $("#button-print").remove();
        $("#button-dl").css("margin-right", 10);
        $(".assettr").remove();

        $("#tdiissues").attr("colspan", "2");
        $("#tdpages").attr("colspan", "2");
        //$(".assettrmobile").children().eq(0).css("width", 130);
        //$(".assettrmobile").children().eq(1).css("width", "auto");
        $(".assettrmobile").show();
    }
    else {
        $(".assettrmobile").remove();
    }
}

function GetInspectionReport() {
    showmaskbg(true);
    var p = JSON.stringify([teamintelligence, htmlencode(reportid)]);
    inspectionrequest("GetInspectionReport", p, function (data) {
        showmaskbg(false);
        if (!data) {
            showAlert(GetTextByKey("P_IPT_INSPECTIONCANNOTBEFOUND", 'Inspection cannot be found.'), GetTextByKey("P_IPT_ERROR", 'Error'));
            $(".function_title").remove();
            return;
        }
        if (typeof (data) === "string") {
            showAlert(data, GetTextByKey("P_IPT_ERROR", 'Error'));
        }
        else {
            reportdata = data;
            reportlayout = data.ReportLayout;
            if (reportlayout) {
                layoutStyle = parseInt(reportlayout.Style);
                layoutDivider = parseInt(reportlayout.Divider);
                layoutSpacing = parseInt(reportlayout.Spacing);
                layoutPicturesDisplay = parseInt(reportlayout.PicturesDisplay);
                layoutCaptionImages = reportlayout.CaptionImages;
                layoutHighlightColor = reportlayout.HighlightColor;
                if (layoutStyle == 2)
                    layoutPicturesDisplay = 1;
            };
            vm.reload(data);
            showReportLayout(data.ReportLayout);
            if (data.Template.DisplayInspectionIssues)
                showIdentifiedQuestions(data.IdentifiedQuestions);
            showPages(data);
            showSignature(data);
            if (layoutPicturesDisplay == 1 && mediasdata && mediasdata.length > 0) {
                showMedias();
            }
        }
    }, function (err) {
        showmaskbg(false);
    });
}

function showReportLayout(layout) {
    $('#reportlayoutlogo').hide();
    $('#reportlayoutcenterlogo').hide();
    $('#reportlayoutrightlogo').hide();
    $('.td_pageheaderleft').html('');
    $('.td_pageheadercenter').html('');
    $('.td_pageheaderright').html('');
    $('.td_pagefooterleft').html('');
    $('.td_pagefootercenter').html('');
    $('.td_pagefooterright').html('');
    if (layout) {
        $('.td_pageheaderleft').html(layout.PageHeaderLeft);
        $('.td_pageheadercenter').html(layout.PageHeaderCenter);
        $('.td_pageheaderright').html(layout.PageHeaderRight);
        $('.td_pagefooterleft').html(layout.PageFooterLeft);
        $('.td_pagefootercenter').html(layout.PageFooterCenter);
        $('.td_pagefooterright').html(layout.PageFooterRight);

        $('#reportlayoutlogo').show();
        $('#reportlayoutcenterlogo').show();
        $('#reportlayoutrightlogo').show();
        if (layout.LOGO && layout.LOGO.length > 0) {
            var jpeg = layout.LOGO;
            if (typeof (layout.LOGO) !== "string") {
                jpeg = arrayBufferToBase64(layout.LOGO);
            }
            $('#reportlayoutlogo').attr('src', 'data:image/png;base64,' + jpeg);
        }
        if (layout.CenterLOGO && layout.CenterLOGO.length > 0) {
            var jpeg = layout.CenterLOGO;
            if (typeof (layout.CenterLOGO) !== "string") {
                jpeg = arrayBufferToBase64(layout.CenterLOGO);
            }
            $('#reportlayoutcenterlogo').attr('src', 'data:image/png;base64,' + jpeg);
        }
        if (layout.RightLOGO && layout.RightLOGO.length > 0) {
            var jpeg = layout.RightLOGO;
            if (typeof (layout.RightLOGO) !== "string") {
                jpeg = arrayBufferToBase64(layout.RightLOGO);
            }
            $('#reportlayoutrightlogo').attr('src', 'data:image/png;base64,' + jpeg);
        }
    }
}

function arrayBufferToBase64(buffer) {
    var binary = '';
    var bytes = new Uint8Array(buffer);
    var len = bytes.byteLength;
    for (var i = 0; i < len; i++) {
        binary += String.fromCharCode(bytes[i]);
    }
    return window.btoa(binary);
}

function showIdentifiedQuestions(questions) {
    if (!questions || questions.length == 0)
        return;
    var content = $('<div></div>');
    content.append($('<div class="catelog">' + GetTextByKey('P_IPT_IDENTIFIEDISSUES', 'IDENTIFIED ISSUES') + '</div>'));
    if (questions && questions.length > 0) {
        if (layoutStyle == 1 || layoutStyle == 2) {
            var qcontent = $('<table class="question_table"style="width:100%;" ></table>');
            content.append(qcontent);
            createQuestionContent1(qcontent, questions, true);
            if (layoutDivider == 1)//Line
                qcontent.addClass('question_line');
            else if (layoutDivider == 2)//Grid
                qcontent.addClass('question_table_grid');
            qcontent.css('line-height', layoutSpacing == 1 ? '32px' : '16px');
        }
        else
            createQuestionContent1(content, questions, true);
    }
    else
        content.append($('<div class="question"></div>').text(GetTextByKey("P_IPT_NOQUESTIONS", 'No Questions')));


    $('#divquestions').append(content);
}


function showSeverityLevel(level) {
    if (layoutStyle == 1 || layoutStyle == 2)
        return "";

    var levertext = GetTextByKey("P_IPT_SEVERITYLEVEL_COLON", "Severity Level: ");
    if (level === 0)
        levertext = "";
    if (level === 1)
        levertext += GetTextByKey("P_IPT_SL_LOW", "Low");
    else if (level === 2)
        levertext += GetTextByKey("P_IPT_SL_MEDIUM", "Medium");
    else if (level === 3)
        levertext += GetTextByKey("P_IPT_SL_HIGH", "High");
    return levertext;
}

function showPages(report) {
    var pages = report.Template.Pages;
    var pagescontent = $('<div></div>');
    pagescontent.append($('<div class="catelog" style="margin-top:20px;">' + GetTextByKey("P_IPT_INSPECTIONDETAIL", "INSPECTION DETAIL") + '</div>'));


    if (layoutStyle == 1 || layoutStyle == 2) {
        var content = $('<table class="question_table"style="width:100%;" ></table>');
        pagescontent.append(content);
        if (layoutDivider == 1)//Line
            content.addClass('question_line');
        else if (layoutDivider == 2)//Grid
            content.addClass('question_table_grid');

        content.css('line-height', layoutSpacing == 1 ? '32px' : '16px');
        for (var i = 0; i < pages.length; i++) {
            var p = pages[i];
            createPage(content, p);
        }
    }
    else {
        for (var i = 0; i < pages.length; i++) {
            var p = pages[i];
            createPage(pagescontent, p);
        }
    }
    $('#divpages').append(pagescontent);
}

function showSignature(report) {
    if (report && report.SignatureUrl && report.SignatureUrl != "") {
        var divsign = $('#divsign');
        divsign.append($('<div class="catelog" style="margin-top:20px;">' + GetTextByKey("P_IPT_SIGNATURE", "Signature") + '</div>'));
        var div_pic = $('<div></div>');
        divsign.append(div_pic);
        var pic = $('<img loading="lazy" style="height:320px; margin-left:70px;margin-right:10px;margin-bottom:10px;"></img>').attr('src', report.SignatureUrl);

        div_pic.append(pic);
        if (layoutDivider == 1)//Line
            div_pic.addClass('question_line');
        else if (layoutDivider == 2)//Grid
            div_pic.addClass('question_div_grid');

        div_pic.css('line-height', layoutSpacing == 1 ? '32px' : '16px');
    }
}

function showMedias() {
    var content = $('<div></div>');
    content.append($('<div class="catelog">Required	Images</div>'));
    var media_div = $('<div style="overflow:auto;"></div>');
    content.append(media_div);
    for (var i = 0; i < mediasdata.length; i++) {
        var m = mediasdata[i];
        var piccontent = createMedias(m);
        media_div.append(piccontent);
    }

    $('#divpages').append(content);
}

function createMedias(m) {
    var piccontent = $('<div style="float:left;"></div>');
    if (['.mp4', '.mov'].indexOf(m.FileType.toLowerCase()) >= 0) {
        var v = $('<div class="media"><span class="video"></span></div>');
        v.click(m.Url, function (e) {
            window.open(e.data, "_blank")
        });
        piccontent.append(v);
        if (layoutCaptionImages) {
            var div_caption = $('<div class="mediacaption"></div>').attr('title', m.FileName);
            piccontent.append(div_caption);
            var span_caption = $('<span></span>').text(m.FileName);
            div_caption.append(span_caption);
        }
    }
    else {
        var pic = $('<img loading="lazy" class="media"></img>').attr('src', m.ThumbnailUrl);
        pic.click(m.Url, function (e) {
            window.open(e.data, "_blank")
        });
        piccontent.append(pic);
        if (layoutCaptionImages) {
            var div_caption = $('<div class="mediacaption"></div>').attr('title', m.FileName);;
            piccontent.append(div_caption);
            var span_caption = $('<span></span>').text(m.FileName);
            div_caption.append(span_caption);
        }
    }
    return piccontent;
}

var lastdisplaypageid = null;
function createPage(content, page) {
    if (layoutStyle == 1 || layoutStyle == 2) {
        if (page.DisplayOnReport) {
            var trpage = $('<tr style="width:100%;text-align:center;background-color:#a9a9a9;" ></tr>');
            content.append(trpage);
            var tdpage = "";
            if (layoutStyle == 1)
                tdpage = $('<td colspan="3" style="width:100%;"></td>')
            else
                tdpage = $('<td colspan="4" style="width:100%;"></td>')
            trpage.append(tdpage);
            tdpage.append($('<span></span>').text(page.DisplayText));
        }
    }
    else {
        if (page.DisplayOnReport) {
            lastdisplaypageid = page.Id;
            var divpage = $('<div class="page"></div>');
            content.append(divpage);
            var btnpage = $('<em class="spanbtn iconangledown" style="font-size:22px;width:24px;"></em>');
            btnpage.click(page.Id, function (e) {
                var icon = $(this);
                if (icon.hasClass('iconangleright')) {
                    icon.removeClass('iconangleright').addClass('iconangledown');
                    //icon.parent().next().show();
                    $(".page" + e.data).show();
                    $(".page" + e.data).find("em").removeClass('iconangleright').addClass('iconangledown');
                }
                else {
                    icon.removeClass('iconangledown').addClass('iconangleright');
                    //icon.parent().next().hide();
                    $(".page" + e.data).hide();
                    $(".page" + e.data).find("em").removeClass('iconangledown').addClass('iconangleright');
                }
            });
            divpage.append(btnpage);
            divpage.append($('<span></span>').text(page.DisplayText));
        }
    }

    createSectionContent(content, page, lastdisplaypageid);
}

var lastdisplaysectionid = null;
function createSectionContent(content, page, lastdisplaypageid) {
    if (layoutStyle == 1 || layoutStyle == 2) {
        if (page.Sections && page.Sections.length > 0) {
            for (var i = 0; i < page.Sections.length; i++) {
                var s = page.Sections[i];
                var condmatched = checkConditional(s.Conditional)
                if (s.DisplayOnReport && condmatched) {
                    var trsection = $('<tr style="width:100%;text-align:center;background-color:#cbcbcb;" ></tr>');
                    content.append(trsection);
                    var tdsection = $('<td style="width:100%;" ></td>');
                    if (layoutStyle == 1)
                        tdsection = $('<td colspan="3" style="width:100%;"></td>')
                    else
                        tdsection = $('<td colspan="4" style="width:100%;"></td>')
                    trsection.append(tdsection);
                    tdsection.append($('<span></span>').text(s.DisplayText));
                }

                if (condmatched)
                    createQuestionContent(content, s);
            }
        }
    }
    else {
        if (page.Sections && page.Sections.length > 0) {
            for (var i = 0; i < page.Sections.length; i++) {
                var s = page.Sections[i];
                if (s.DisplayOnReport && checkConditional(s.Conditional)) {
                    lastdisplaysectionid = s.Id;
                    var divsection = $('<div class="section"></div>');
                    content.append(divsection);

                    var btnsection = $('<em class="spanbtn iconangledown" style="font-size:18px;display:inline-block;"></em>');
                    btnsection.click(s.Id, function (e) {
                        var icon = $(this);
                        if (icon.hasClass('iconangleright')) {
                            icon.removeClass('iconangleright').addClass('iconangledown');
                            $(".section" + e.data).show();
                            //icon.parent().next().show();
                        }
                        else {
                            icon.removeClass('iconangledown').addClass('iconangleright');
                            //icon.parent().next().hide();
                            $(".section" + e.data).hide();
                        }
                    });
                    divsection.append(btnsection);
                    if (lastdisplaypageid)
                        divsection.addClass("page" + lastdisplaypageid);
                    var ispic = false;
                    if (s.StaticPictures && s.StaticPictures.length > 0) {
                        ispic = true;
                        var div_pic = $('<span></span>');
                        createPictures(s.StaticPictures, div_pic);
                        divsection.append(div_pic);
                        divsection.append('<br/>');
                    }
                    var span_title = $('<span></span>').text(s.DisplayText);
                    if (ispic)
                        span_title.css('margin-left', 24);
                    divsection.append(span_title);
                }
                createQuestionContent(content, s, lastdisplaysectionid, lastdisplaypageid);
            }
        }
        else
            content.append($('<div class="question"></div>').text('No Sections'));
    }
}

function createQuestionContent(content, section, lastdisplaysectionid, lastdisplaypageid) {
    if (section.Questions && section.Questions.length > 0) {
        createQuestionContent1(content, section.Questions, false, lastdisplaysectionid, lastdisplaypageid);
    }
    else
        content.append($('<div class="question"></div>').text(GetTextByKey("P_IPT_NOQUESTIONS", 'No Questions')));
    return content;
}

function createQuestionContent1(content, questions, isidentified, lastdisplaysectionid, lastdisplaypageid) {
    if (questions && questions.length > 0) {
        if (layoutStyle == 1) {//Compressed
            for (var i = 0; i < questions.length; i++) {
                var q = questions[i];
                if (ignoreQuestion(q, isidentified) || !checkConditional(q.Conditional)) continue;

                var tr_question = $('<tr style="width:100%;"></tr>');
                content.append(tr_question);
                tr_question.append($('<td style="width:50%;"></td>').text(q.DisplayText));
                var td_answer = $('<td style="width:20%;"></td>');
                tr_question.append(td_answer);
                createAnswerContent(td_answer, q, isidentified);
                var td_comment = $('<td style="width:30%;"></td>');
                tr_question.append(td_comment);
                var comment = td_answer.data('comment');
                if (comment && comment != "") {
                    var div_comment = $('<div class="answer"></div>').html(replaceHtmlText(comment));
                    td_comment.append(div_comment);
                    div_comment.css('color', (q.IsImportant && layoutHighlightColor) ? layoutHighlightColor : "#808080");
                }
                if (q.IsImportant && layoutHighlightColor)
                    tr_question.css('color', layoutHighlightColor);
            }
        }
        else if (layoutStyle == 2) {//Split
            var tr_question = "";
            var qindex = 0;
            for (var i = 0; i < questions.length; i++) {
                var q = questions[i];
                if (ignoreQuestion(q, isidentified) || !checkConditional(q.Conditional)) continue;

                if (qindex % 2 == 0) {
                    tr_question = $('<tr style="width:100%;"></tr>');
                    content.append(tr_question);
                }
                var td_question = $('<td style="width:35%;"></td>').text(q.DisplayText);
                tr_question.append(td_question);
                var td_answer = $('<td style="width:15%;"></td>');
                tr_question.append(td_answer);
                createAnswerContent(td_answer, q, isidentified);
                if (q.IsImportant && layoutHighlightColor) {
                    td_question.css('color', layoutHighlightColor);
                    td_answer.css('color', layoutHighlightColor);
                }

                qindex++;
            }
            if (qindex % 2 != 0) {
                tr_question.append($('<td style="width:35%;"></td><td style="width:15%;"></td>'));
            }
        }
        else {
            for (var i = 0; i < questions.length; i++) {
                var q = questions[i];
                if (ignoreQuestion(q, isidentified) || !checkConditional(q.Conditional)) continue;
                var tab_question = $('<table style="width:100%;"></table>');
                if (lastdisplaysectionid)
                    tab_question.addClass("section" + lastdisplaysectionid);
                if (lastdisplaypageid)//没有显示Section的时候设置PageID
                    tab_question.addClass("page" + lastdisplaypageid);
                content.append(tab_question);
                var tr_question = $('<tr style="width:100%;"></tr>');
                tab_question.append(tr_question);
                var td_question = $('<td style="width:100%;"></td>');
                tr_question.append(td_question);
                var div_question = $('<div class="question"></div>');
                td_question.append(div_question);
                var div_title = $('<div style="flex-grow:1;"></div>').text(q.DisplayText);
                div_question.append(div_title);
                if (q.StaticPictures && q.StaticPictures.length > 0) {
                    var div_pic = $('<div style=""></div>');
                    div_pic = createPictures(q.StaticPictures, div_pic);
                    div_question.append(div_pic)
                }

                tr_question = $('<tr style="width:100%;"></tr>');
                tab_question.append(tr_question);
                var td_answer = $('<td style="width:100%;"></td>');
                tr_question.append(td_answer);
                createAnswerContent(td_answer, q, isidentified);

                if (layoutDivider == 1)//Line
                    tab_question.addClass('question_standard_table_line');
                else if (layoutDivider == 2)//Grid
                    tab_question.addClass('question_standard_table_grid');
                tab_question.css('line-height', layoutSpacing == 1 ? '32px' : '16px');

                if (q.IsImportant && layoutHighlightColor) {
                    tab_question.css('color', layoutHighlightColor);
                    div_question.css('color', layoutHighlightColor);
                }
            }
        }

        content.find('.answer').each(function () {
            var div_answer = $(this);
            if (layoutStyle == 1 || layoutStyle == 2) {
                div_answer.addClass('table_content');
            }
        });
        content.find('.div_media').each(function () {
            var div_media = $(this);
            if (layoutStyle == 1 || layoutStyle == 2) {
                div_media.css('padding-left', '3px');
            }
        });
    }
    return content;
}

function createPictures(pictures, p) {
    for (var i = 0; i < pictures.length; i++) {
        var pic = pictures[i];
        var img = $('<img loading="lazy" style="height:30px;margin-left:5px;"/>').attr('src', pic.Url).attr('title', pic.Name);
        img.click(pic.Url, function (e) {
            window.open(e.data, "_blank")
        });
        $(p).append(img);
    }
    return p;
}
function ignoreQuestion(q, isidentified) {
    var ignore = false;
    if (q.QuestionType == 10 || (q.QuestionType == 15 && q.SubType == 15)) {//Picture
        var hasPicture = false;
        if (reportdata && reportdata.Answers) {
            for (var i = 0; i < reportdata.Answers.length; i++) {
                var a = reportdata.Answers[i];
                if (a.QuestionId.toLowerCase() == q.Id.toLowerCase()) {
                    if (reportdata.Medias && reportdata.Medias.length > 0) {
                        for (var j = 0; j < reportdata.Medias.length; j++) {
                            var m = reportdata.Medias[j];
                            if (m.AnswerId.toLowerCase() == a.Id.toLowerCase()) {
                                if (layoutPicturesDisplay == 1)//Displayed At Bottom
                                {
                                    if (isidentified == false)
                                        mediasdata.push(m);
                                }
                                else
                                    hasPicture = true;
                            }
                        }
                    }
                }
            }
        }
        ignore = !hasPicture;
    }
    else
        ignore = false;
    return ignore;
}

function checkConditional(cond) {
    if (!cond) return true;

    var qid = cond.QuestionId.toLowerCase();
    if (qid == "and") {
        for (let scond of cond.SubItems) {
            var r = checkConditional(scond);
            if (!r) return false;
        }
        return true;
    }
    else if (qid == "or") {
        for (let scond of cond.SubItems) {
            var r = checkConditional(scond);
            if (r) return true;
        }
        return false;
    }
    else {
        var condquestion = getQuestionAndSection(cond.QuestionId);
        if (!condquestion) return false;
        if (!condquestion.Question || !checkConditional(condquestion.Question.Conditional)) return false;
        if (!condquestion.Section || !checkConditional(condquestion.Section.Conditional)) return false;

        if (!cond.Value) return false;
        var ans = reportdata.Answers.find(c => c.QuestionId.toLowerCase() == cond.QuestionId.toLowerCase());
        if (ans == null) return false;
        var condValue = Number(cond.Value);
        switch (cond.Operator) {
            case "gt"://>
                return ans.AsDouble > condValue;
            case "gteq"://>=
                return ans.AsDouble >= condValue;
            case "lt"://<
                return ans.AsDouble < condValue;
            case "lteq"://<=
                return ans.AsDouble <= condValue;
            case "between"://between
                var condValue1 = Number(cond.Value1);
                return ans.AsDouble >= condValue && ans.AsDouble <= condValue1;
            case "in"://in
                if (!ans.SelectedItems || ans.SelectedItems.length == 0) return false;
                var condvs = cond.Value.toLowerCase().split(';');
                for (let item of ans.SelectedItems) {
                    var sv = item.Value;
                    if (condquestion.Question.QuestionType == 19 || condquestion.Question.QuestionType == 5)
                        sv = item.Text;
                    if (!sv || condquestion.Question.LookupSource != 0)
                        sv = item.Text;
                    if (condvs.indexOf(sv.toLowerCase()) >= 0)
                        return true;
                }
                return false;
            case "noteq":
                var v = "";
                if (condquestion.Question.QuestionType == 5// QuestionTypes.YesOrNo
                    || condquestion.Question.QuestionType == 8//QuestionTypes.DropDown
                    || condquestion.Question.QuestionType == 9//QuestionTypes.List
                    || condquestion.Question.QuestionType == 19) {//QuestionTypes.AssetStatus) 
                    if (!ans.SelectedItems || ans.SelectedItems.length == 0) return false;
                    if (ans.SelectedItems.length > 1) return true;
                    v = ans.SelectedItems[0].Value;
                    if (!v || condquestion.Question.QuestionType == 19 || condquestion.Question.QuestionType == 5 || condquestion.Question.LookupSource != 0)
                        v = ans.SelectedItems[0].Text;
                }
                else
                    v = ans.Result;

                return cond.Value.toLowerCase() != v.toLowerCase() && ans.AsDouble != condValue;
            default: //=
                var v = "";
                if (condquestion.Question.QuestionType == 5// QuestionTypes.YesOrNo
                    || condquestion.Question.QuestionType == 8//QuestionTypes.DropDown
                    || condquestion.Question.QuestionType == 9//QuestionTypes.List
                    || condquestion.Question.QuestionType == 19) {//QuestionTypes.AssetStatus) 
                    if (!ans.SelectedItems || ans.SelectedItems.length != 1) return false;
                    v = ans.SelectedItems[0].Value;
                    if (!v || condquestion.Question.QuestionType == 19 || condquestion.Question.QuestionType == 5 || condquestion.Question.LookupSource != 0)
                        v = ans.SelectedItems[0].Text;
                }
                else
                    v = ans.Result;

                return cond.Value.toLowerCase() == v.toLowerCase() || ans.AsDouble == condValue;
        }
    }
}
function getQuestionAndSection(questionid) {
    for (var p of reportdata.Template.Pages) {
        for (var s of p.Sections) {
            for (var q of s.Questions) {
                if (q.Id.toLowerCase() == questionid.toLowerCase())
                    return { Question: q, Section: s };
            }
        }
    }
    return null;
}

function createAnswerContent(p, q, isidentified) {
    var leveltext = showSeverityLevel(q.SeverityLevel);
    var label_level = $('<label class="label_level"></label>').text(leveltext);
    if (reportdata && reportdata.Answers) {
        for (var i = 0; i < reportdata.Answers.length; i++) {
            var a = reportdata.Answers[i];
            if (a.QuestionId.toLowerCase() == q.Id.toLowerCase()) {
                p.data('comment', a.Comment);
                if ([5, 8, 9, 10, 14, 15, 19].indexOf(q.QuestionType) < 0
                    || (q.QuestionType == 15 && q.SubType != 15)) {//except YesOrNo/DropDown/MultipleChoice/Picture/FuelRecords
                    var result = a.Result;
                    if (result == null) {
                        result = '';
                    }
                    if (q.QuestionType == 6 && result.indexOf(' ') >= 0)//Date do not show time
                        result = result.split(' ')[0];
                    if (q.QuestionType == 11//Odometer
                        || q.QuestionType == 18 //FuelUsed
                        || q.QuestionType == 12//EngineHours
                        || q.QuestionType == 13//FuelRemaining
                        || (q.QuestionType == 15 && q.SubType == 8)//FuelRecords Odometer
                        || (q.QuestionType == 15 && q.SubType == 10))//FuelRecords Quantity
                        result += " " + convertUnits(a.Units);

                    var div_answer = $('<div class="answer"></div>').data('isimportant', q.IsImportant);
                    if (q.QuestionType == 1
                        || (q.QuestionType == 15 && q.SubType == 14))
                        p.append(div_answer.html(replaceHtmlText(result)));
                    else if (q.QuestionType == 17 && q.TextToCompare != null && result.toLowerCase() != q.TextToCompare.toLowerCase())  // BarCodeValidate
                        p.append(div_answer
                            .append($('<span style="color:red"></span>').text(result))
                            .append($('<span style="margin-left:6px"></span>').text('(' + q.TextToCompare + ')'))
                        );
                    else
                        p.append(div_answer.text(result));

                    div_answer.append(label_level);
                    p.append(item);
                    if (layoutStyle == 0)
                        p.append("<div style='clear:both;'></div>");
                }
                else if (q.QuestionType == 5) {//YesOrNo
                    if (a.SelectedItems && a.SelectedItems.length > 0) {
                        var item = $('<div class="answer" ></div>').data('isimportant', q.IsImportant);
                        var div_bg = $('<div class="circle"></div>');
                        var label = $('<label style="margin-left:5px;"></lable>').text(a.SelectedItems[0].Text);
                        item.append(div_bg);
                        item.append(label);
                        leveltext = showSeverityLevel(a.SelectedItems[0].SeverityLevel);
                        label_level = $('<label class="label_level"></label>').text(leveltext);
                        item.append(label_level);
                        if (a.SelectedItems[0].BackgroundColor && a.SelectedItems[0].BackgroundColor != "") {
                            div_bg.css('background-color', a.SelectedItems[0].BackgroundColor);
                        }

                        p.append(item);
                        if (layoutStyle == 0)
                            p.append("<div style='clear:both;'></div>");
                    }
                }
                else if (q.QuestionType == 8 || q.QuestionType == 9//DropDown、List
                    || (q.QuestionType == 15 && q.SubType == 6)
                    || (q.QuestionType == 15 && q.SubType == 9)) {
                    if (q.MultipleSelect) {
                        if (a.SelectedItems && a.SelectedItems.length > 0) {
                            for (var j = 0; j < a.SelectedItems.length; j++) {
                                var item = $('<div class="answer"></div>').data('isimportant', q.IsImportant);
                                var div_bg = $('<div class="circle"></div>');
                                var label = $('<label style="margin-left:5px;"></lable>').text("" + (j + 1) + ". " + a.SelectedItems[j].Text);
                                item.append(div_bg);
                                item.append(label);
                                leveltext = showSeverityLevel(a.SelectedItems[j].SeverityLevel);
                                label_level = $('<label class="label_level"></label>').text(leveltext);
                                item.append(label_level);
                                if (a.SelectedItems[j].BackgroundColor && a.SelectedItems[j].BackgroundColor != "") {
                                    div_bg.css('background-color', a.SelectedItems[j].BackgroundColor);
                                }

                                p.append(item);
                                if (layoutStyle == 0)
                                    p.append("<div style='clear:both;'></div>");
                            }
                        }
                    }
                    else {
                        if (a.SelectedItems && a.SelectedItems.length > 0) {
                            var item = $('<div class="answer"></div>').data('isimportant', q.IsImportant);
                            var div_bg = $('<div class="circle"></div>');
                            var label = $('<label style="margin-left:5px;"></lable>').text(a.SelectedItems[0].Text);
                            item.append(div_bg);
                            item.append(label);
                            leveltext = showSeverityLevel(a.SelectedItems[0].SeverityLevel);
                            label_level = $('<label class="label_level"></label>').text(leveltext);
                            item.append(label_level);
                            if (a.SelectedItems[0].BackgroundColor && a.SelectedItems[0].BackgroundColor != "") {
                                div_bg.css('background-color', a.SelectedItems[0].BackgroundColor);
                            }
                            p.append(item);
                            if (layoutStyle == 0)
                                p.append("<div style='clear:both;'></div>");
                        }
                    }
                }
                else if (q.QuestionType == 14) {//Email (Drop Down)
                    if (a.SelectedItems && a.SelectedItems.length > 0) {
                        for (var j = 0; j < a.SelectedItems.length; j++) {
                            var item = $('<div class="answer"></div>').data('isimportant', q.IsImportant);
                            var label = $('<label style="margin-left:5px;"></lable>').text("" + (j + 1) + ". " + a.SelectedItems[j].Text + "<" + a.SelectedItems[j].Value + ">");
                            item.append(label);
                            item.append(label_level);
                            p.append(item).append("<div style='clear:both;'></div>");
                        }
                    }
                }
                else if (q.QuestionType == 10
                    || (q.QuestionType == 15 && q.SubType == 15)) {//Picture
                    var pics;
                    if (layoutPicturesDisplay != 1) {//Displayed At Bottom
                        pics = $('<div class="div_media" style="min-height:80px;overflow:auto;padding-left:90px;"></div>').data('isimportant', q.IsImportant);
                        p.append(pics);
                    }
                    //pics.append(label_level);
                    var nopics = true;
                    if (reportdata.Medias && reportdata.Medias.length > 0) {
                        for (var j = 0; j < reportdata.Medias.length; j++) {
                            var m = reportdata.Medias[j];
                            if (m.AnswerId.toLowerCase() == a.Id.toLowerCase()) {
                                if (layoutPicturesDisplay == 1)//Displayed At Bottom
                                {
                                    if (isidentified == false)
                                        mediasdata.push(m);
                                }
                                else {//Displayed As Taken
                                    var media = createMedias(m);
                                    pics.append(media);
                                    nopics = false;
                                }
                            }
                        }
                    }
                    if (pics && nopics)
                        pics.hide();
                }
                else if (q.QuestionType == 19) {//Asset Status
                    var divanswer = $('<div class="answer" ></div>').data('isimportant', q.IsImportant);
                    if (a.SelectedItems && a.SelectedItems.length > 0) {
                        var div_bg = $('<div class="circle"></div>');
                        var label = $('<label style="margin-left:5px;"></lable>').text(a.SelectedItems[0].Text);
                        divanswer.append(div_bg);
                        divanswer.append(label);
                        if (a.SelectedItems[0].BackgroundColor && a.SelectedItems[0].BackgroundColor != "") {
                            div_bg.css('background-color', a.SelectedItems[0].BackgroundColor);
                        }

                        p.append(divanswer);
                        if (layoutStyle == 0)
                            p.append("<div style='clear:both;'></div>");
                    }
                    divanswer.append(label_level);
                    var pics;
                    if (layoutPicturesDisplay != 1) {//Displayed At Bottom
                        pics = $('<div class="div_media" style="min-height:80px;overflow:auto;padding-left:90px;"></div>').data('isimportant', q.IsImportant);
                        p.append(pics);
                    }
                    var nopics = true;
                    if (reportdata.Medias && reportdata.Medias.length > 0) {
                        for (var j = 0; j < reportdata.Medias.length; j++) {
                            var m = reportdata.Medias[j];
                            if (m.AnswerId.toLowerCase() == a.Id.toLowerCase()) {
                                if (layoutPicturesDisplay == 1)//Displayed At Bottom
                                {
                                    if (isidentified == false)
                                        mediasdata.push(m);
                                }
                                else {//Displayed As Taken
                                    var media = createMedias(m);
                                    pics.append(media);
                                    nopics = false;
                                }
                            }
                        }
                    }
                    if (pics && nopics)
                        pics.hide();
                    if (a.Result && a.Result != "") {
                        var divresult = $('<div class="answer"></div>').data('isimportant', q.IsImportant).html(replaceHtmlText(a.Result));
                        p.append(divresult);
                        if (q.IsImportant && layoutHighlightColor)
                            divresult.css('color', layoutHighlightColor);
                    }
                }
                if (layoutStyle != 1 && layoutStyle != 2 && a.Comment && a.Comment != "") {
                    var divcomment = $('<div class="answer" style="color:#808080"></div>').data('isimportant', q.IsImportant).html(replaceHtmlText(a.Comment));
                    p.append(divcomment);
                    if (q.IsImportant && layoutHighlightColor)
                        divcomment.css('color', layoutHighlightColor);
                }
            }
        }
    }


    //public string Id { get; set; }
    //public string QuestionId { get; set; }
    //public string Result { get; set; }
    //public string Comment { get; set; }
    //public string Units { get; set; }
    //public SeverityLeveles SeverityLevel { get; set; }
    //public List<SelectItem> SelectedItems { get; }

    //SingleLineText = 0,
    //MultipleLineText = 1,
    //Email = 2,
    //Number = 3,
    //Integer = 4,
    //YesOrNo = 5,
    //Date = 6,
    //DateAndTime = 7,
    //DropDown = 8,
    //MultipleChoice = 9,
    //Picture = 10,
    //Odometer = 11,
    //EngingHours = 12

    //如果是非select类型，则是界面上直接录的值
    //如果question type为odometer时，units表示所用的单位，其它类型忽略units
    //如果question是select类型的(多选，单选，yes / no) ，则忽略result, 此时question的答案要从selecteditems当中去取
    //如果是picture类型，result存的是media的id,
    //@Tsanie picture类型是这样的吧
    //picture类型的没在ReportInfo结构上存，是MediaInfo里的AnswerId为ReportInfo里的Id
    //如果AssetStatus类型，result存的是notes


}

function convertUnits(u) {
    switch (u.toLowerCase()) {
        case "mile":
            return "Mile(s)";
        case "kilometre":
        case "kilometer":
            return "Kilometer";
        case "percent":
            return "Percent";
        case "gallon":
        case "gal":
            return "Gallon";
        case "litre":
            return "Litre";
        case "percent":
            return "Percent";
        case "hour":
            return "Hour(s)";
        default:
            break;
    }
    return u;
}

function isLight(color) {
    color = color.replace('#', '');
    var r, g, b;
    if (color.length == 6) {
        r = '0x' + color.substr(0, 2);
        g = '0x' + color.substr(2, 2);
        b = '0x' + color.substr(4, 2);

        return 0.213 * parseInt(r) + 0.715 * parseInt(g) + 0.072 * parseInt(b) > 255 / 2;
    }
    return true;
}