var page = 0 ;



$(function(){
    console.log("js on load") ;
    query();
    get_accounts();
    bind() ;

    //test() ;
}) ;

var test = function(){
    var test_cnt = 10 ;
    var arr = [ 0 ] ;
    var total = 0

    for (var i = 0 ; i < test_cnt ; i++) {
        arr.push(new Date().getTime());
        console.log("start delay..." + i)
        $.get("delay?i=" + i , function(result){
            var diff = new Date().getTime() - arr[i] ;
            console.log("delay" + i + " = " + diff) ;
            total += diff ;
            console.log("total=" + total + " avg=" + (total/test_cnt)) ;
        });
    }
}

var bind = function(){
    $("#goNext").on("click", function(){
        page = page + 1;
        query() ;
    });
    $("#goPrev").on("click", function(){
        page = page - 1;
        if ( page < 0 ) { page = 0 ; }
        query() ;
    });


    $("#inputSource").on("change", function(data){
    	query() ;
	console.log($("#inputSource").val()) ;
    });

	   $("#inputScript").on("change", function(data){
	            query() ;
	   });

	   $("#inputPerpage").on("change", function(data){
	            query() ;
	   });

	$("#inputOrder").on("change", function(data){
		query()
	});

	$("#inputAccount").on("change", function(data){
		query()
	});

	$("#processVal").on("change", function(data){
		query()
	});
}



var server_url = "" ;


var query = function(){

    var dict = {
        page: page,
        perpage: $("#inputPerpage").val(),
	source: $("#inputSource").val(),
	script: $("#inputScript").val(),
	time_order: $("#inputOrder").val(),
	account: $("#inputAccount").val(),
	process: $("#processVal").val()

    } ;

    $.get(server_url + 'query', dict, function(result){
        console.log(result) ;
        // var j = JSON.parse(result) ;
        console.log("result=" + result.data )
        display(result.data) ;
    });
}

var get_accounts = function(){

    $.get(server_url + 'accounts', function(result){
	    console.log(result) ;
	    var j = result
	    var sel = $("#inputAccount") ;
	    $(sel).html( '<option selected value="%"></option>') ;

	    for (let data of j.data){
	    	console.log( "@@" + data.account);
		$(sel).append('<option value="' + data.account + '">' + data.account + '</option>') ;
    	    }
    });
}
var display = function(rows) {
    $("#databody").html("");
    for ( let row of rows) {
        console.log(row) ;
        console.log("raw=" + row.json)

        var raw = {} ;
        var utm_json = ""

        if (row.json != undefined) {
            try {
                raw = JSON.parse(row.json) ;
                if (raw.utm != undefined){
                    utm_json = "<pre>" + JSON.stringify(raw.utm, undefined, 2) + "</pre>" ;
                }
                else {
                    utm_json = ""
                }
            } catch(ex) {
                utm_json = "URL ERROR<BR><pre>" + row.raw + "</pre>";
            }
        }

        var row1 = "";
        row1 += "id: " + row.id + "<BR>" ;

        var hid_href = "<a href=./web/history/" + (row.hid) + ">" + (row.hid) + "</a>"
        row1 += "hid: " + hid_href + "<BR>" ;
        row1 += "pid: " + row.pid + "<BR>" ;
        row1 += row.account + "<BR>" ;
        row1 += row.script + "<BR>" ;
        row1 += row.source + "<BR>" ;

//        https://adbotvideo.s3.ap-northeast-1.amazonaws.com/20230514/screen1_R9TR9036Z4T_
//        x = "20230514_022201.jpg".length
//        8+6+5=19

        var temps = row.screen1 + "" ;
        temps = temps.slice(-19);
        temps = temps.substring(0, 15) ;
        row1 += temps + "<BR>" ;

        var row2 = ""
        row2 += "industry:<BR>" ;
        row2 += row.industry + "<BR>" ;
        row2 += "brand:<BR>" ;
        row2 += row.brand_en + "<BR>" ;
        row2 += row.brand_loc + "<BR>" ;
        row2 += "category:<BR>" ;
        row2 += row.category + "<BR>" ;
        row2 += row.sub_category + "<BR>" ;
        row2 += "product:<BR>" ;
        row2 += row.product_group + "<BR>" ;
        row2 += row.product_en + "<BR>" ;
        row2 += row.product_loc + "<BR>" ;
        row2 += "比對資訊:" + row["history_x_product.json"] + "<BR>" ;
        if (utm_json != ""){
            row2 += utm_json + "<BR>" ;
        }

        row2 += "ocr_screen1:" + row.ocr_screen1 + "<BR>" ;
        row2 += "ocr_screen2:" + row.ocr_screen2 + "<BR>" ;

        /*
        row2 += row.json ;
        row2 += row.screen1 + "<BR>" ;
        if (row.screen2 != undefined){
            row2 += row.screen2 + "<BR>" ;
        }
        if (row.video != undefined){
            row2 += row.video + "<BR>" ;
        }
        */
        var row3 = '<a target=_blank href="' + row.screen1 + '"><img width="75%" height="75%" src="' + row.screen1 + '" ></a>';

        if (row.screen2 != undefined) {
            row3 += '<a target=_blank href="' + row.screen2 + '"><img width="75%" height="75%" src="' + row.screen2 + '" ></a>';
        }
        if (row.video != undefined) {
            //row3 += '<video width="270" height="480" controls><source src="' + row.video +'" type="video/mp4"></video>';
            row3 += '<BR><a target=_blank href="' + row.video + '">Video</a>';
        }


        $('#databody').append($('<tr>')
            .append($('<th score="row">').append(row1))
            .append($('<td colspan="1">').append(row2))
            .append($('<td>').append(row3))
            //.append($('<td colspan="1">').append(html))
            //.append($('<td>').append(row.parsetime))
        )
		//.append($('<td>').append(row.account)))
    } // end for

} // end