var vm;
var reportdata;
$(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) {
        if (typeof (data) === "string") {
            showAlert(data, GetTextByKey("P_IPT_ERROR", 'Error'));
        }
        else {
            reportdata = data;
            vm.reload(data);
            showReportLayout(data.ReportLayout);
            showIdentifiedQuestions(data.IdentifiedQuestions);
            showPages(data);
            showSignature(data);
        }

        showmaskbg(false);
    }, function (err) {
        showmaskbg(false);
    });
}

function showReportLayout(layout) {
    $('#reportlayoutlogo').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();
        if (layout.IncludeLOGO && 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);
        }
    }
}

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">IDENTIFIED ISSUES</div>'));
    if (questions && questions.length > 0) {
        for (var i = 0; i < questions.length; i++) {
            var q = questions[i];
            var div_question = $('<div class="question"></div>');
            content.append(div_question);
            div_question.append($('<div style="width:320px;flex-grow:1;"></div>').text(q.DisplayText))
            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)
            }

            createAnswerContent(content, q);
        }
    }
    else
        content.append($('<div class="question"></div>').text(GetTextByKey("P_IPT_NOQUESTIONS", 'No Questions')));

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

function showSeverityLevel(level) {
    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>'));

    for (var i = 0; i < pages.length; i++) {
        var p = pages[i];
        var pagecontent = createPage(p);
        pagescontent.append(pagecontent);
    }
    $('#divpages').append(pagescontent);
}

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

function createPage(page) {
    var content = $('<div style="padding:0px;"></div>');
    var divpage = $('<div class="page"></div>');
    content.append(divpage);

    var btnpage = $('<em class="spanbtn iconangledown" style="font-size:22px;width:24px;"></em>');
    btnpage.click(function () {
        var icon = $(this);
        if (icon.hasClass('iconangleright')) {
            icon.removeClass('iconangleright').addClass('iconangledown');
            icon.parent().next().show();
        }
        else {
            icon.removeClass('iconangledown').addClass('iconangleright');
            icon.parent().next().hide();
        }
    });
    divpage.append(btnpage);
    divpage.append($('<span></span>').text(page.DisplayText));

    var sectioncontent = createSectionContent(page);
    content.append(sectioncontent);

    return content;
}

function createSectionContent(page) {
    var content = $('<div style="margin-bottom:30px;"></div>');
    if (page.Sections && page.Sections.length > 0) {
        for (var i = 0; i < page.Sections.length; i++) {
            var s = page.Sections[i];
            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(function () {
                var icon = $(this);
                if (icon.hasClass('iconangleright')) {
                    icon.removeClass('iconangleright').addClass('iconangledown');
                    icon.parent().next().show();
                }
                else {
                    icon.removeClass('iconangledown').addClass('iconangleright');
                    icon.parent().next().hide();
                }
            });
            divsection.append(btnsection);
            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);

            var qc = createQuestionContent(s, i);
            content.append(qc);
        }
    }
    else
        content.append($('<div class="question"></div>').text('No Sections'));
    return content;
}

function createQuestionContent(section) {
    var content = $('<div style="margin-bottom:30px;"></div>');
    if (section.Questions && section.Questions.length > 0) {
        for (var i = 0; i < section.Questions.length; i++) {
            var q = section.Questions[i];
            var div_question = $('<div class="question"></div>');
            content.append(div_question);

            var div_title = $('<div style="width:320px;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)
            }

            createAnswerContent(content, q);

            if (i != section.Questions.length - 1)
                content.append($('<div style="border-bottom:1px solid #dbdbdb;"></div>'));
        }
    }
    else
        content.append($('<div class="question"></div>').text(GetTextByKey("P_IPT_NOQUESTIONS", 'No Questions')));
    return content;
}

function createPictures(pictures, p) {
    for (var i = 0; i < pictures.length; i++) {
        var pic = pictures[i];
        var img = $('<img style="width:40px;height:40px;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 createAnswerContent(p, q) {
    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()) {
                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 == 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>');
                    if (q.QuestionType == 1
                        || (q.QuestionType == 15 && q.SubType == 14))
                        p.append(div_answer.html(replaceHtmlText(result))).append("<div style='clear:both;'></div>");
                    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 + ')'))
                        ).append("<div style='clear:both;'></div>");
                    else
                        p.append(div_answer.text(result)).append("<div style='clear:both;'></div>");

                    div_answer.append(label_level);
                }
                else if (q.QuestionType == 5) {//YesOrNo
                    if (a.SelectedItems && a.SelectedItems.length > 0) {
                        var item = $('<div class="answer" ></div>');
                        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).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>');
                                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).append("<div style='clear:both;'></div>");
                            }
                        }
                    }
                    else {
                        if (a.SelectedItems && a.SelectedItems.length > 0) {
                            var item = $('<div class="answer" ></div>');
                            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).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>');
                            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 = $('<div style="min-height:80px;overflow:auto;padding-left:90px;"></div>');
                    p.append(pics);
                    //pics.append(label_level);
                    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 (['.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")
                                    });
                                    pics.append(v);
                                }
                                else {
                                    var pic = $('<img class="media"></img>').attr('src', m.ThumbnailUrl);
                                    pic.click(m.Url, function (e) {
                                        window.open(e.data, "_blank")
                                    });
                                    pics.append(pic);
                                }
                            }
                        }
                    }
                }
                else if (q.QuestionType == 19) {//Asset Status
                    var divanswer = $('<div class="answer" ></div>');
                    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).append("<div style='clear:both;'></div>");

                    }
                    divanswer.append(label_level);

                    var pics = $('<div style="min-height:80px;overflow:auto;padding-left:90px;"></div>');
                    p.append(pics);
                    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 (['.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")
                                    });
                                    pics.append(v);
                                }
                                else {
                                    var pic = $('<img class="media"></img>').attr('src', m.ThumbnailUrl);
                                    pic.click(m.Url, function (e) {
                                        window.open(e.data, "_blank")
                                    });
                                    pics.append(pic);
                                }
                            }
                        }
                    }
                    if (a.Result && a.Result != "") {
                        p.append($('<div class="answer" style="color:#808080"></div>').html(replaceHtmlText(a.Result)));
                    }
                }
                if (a.Comment && a.Comment != "") {
                    p.append($('<div class="answer" style="color:#808080"></div>').html(replaceHtmlText(a.Comment)));
                }
                return;
            }
        }
    }
    p.append($('<div class="answer"></div>').text(""));


    //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


    return result;
}

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";
        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;
}