var RealtimePanel = function (parent) {
    this.Parent = parent;
    this.ResultList = new ResultList(this, '#realtime-result-list');
    
    this.TaskInfo = null;
    this.TaskStateCheckTimer = null;

    this.isDecimal = true;

    this.PullGroundData = null;
    this.PreValues = {
        Longitude: 0,
        Latitude: 0,
        Height: 0
    };

    this.Startup = function () {
        this.ResultList.Startup();
        this.InitReleaseTime();
        this.InputChange();

        this.OnFileOnchange('#param-upload');
        this.OnFileOnchange('#file-input');
        $('#calc-btn').on('click', this.OnCalcButtonClick.bind(this));
        $('#reset-btn').on('click', this.OnResetButtonClick.bind(this));
        $('#add-label').on('click', this.OnAddLabelButtonClick.bind(this));
        $('#control-switch a').on('click', this.OnSwitchButtonClick.bind(this));
        $('.type-select span').on('click', this.OnTypeSelectClick.bind(this));
    };

    this.InitReleaseTime = function () {
        $('#release-date').datetimebox({
            panelWidth: 190,
            panelHeight: 230,
            panelAlign: 'right',
            showSeconds: false,
            currentText: '现在'
        });
    };
    
    this.OnSwitchButtonClick = function (event) {
        if ($(event.target).is('a'))
            $(event.target).parent().toggleClass('control-switch-on');
        else
            $(event.target).toggleClass('control-switch-on');

        let isPullDown = $("#control-switch").hasClass("control-switch-on");
        this.Parent.Map.IsPullGround(isPullDown);
    };

    this.SwitchValues = function (isPullDown) {
        let longitude = $('#longitude').val();
        let latitude = $('#latitude').val();
        let height = $('#height').val();

        if (isPullDown) {
            var data = this.PullGroundData[this.PullGroundData.length - 1];
            $('#longitude').val(data[0]);
            $('#latitude').val(data[1]);
            $('#height').val(data[2]);
        }
        else {
            $('#longitude').val(this.PreValues.Longitude);
            $('#latitude').val(this.PreValues.Latitude);
            $('#height').val(this.PreValues.Height);
        }

        this.PreValues.Longitude = longitude;
        this.PreValues.Latitude = latitude;
        this.PreValues.Height = height;
    };

    this.OnFileOnchange = function (id) {
        var uploader = $(id);
        uploader.fileinput({
            language: 'zh',
            uploadUrl: '/Beijing/UploadFile',
            showUpload: false,
            showRemove: false,
            showCancel: false,
            showCaption: false,
            showPreview: false,
            uploadClass: "btn btn-primary"
        });

        uploader.on('change', function (event) {
            uploader.fileinput("upload");
            $('.kv-upload-progress').hide();
        });

        if (id === '#param-upload') {
            uploader.on('fileuploaded', function (event, data, previewId, index) {
                this.Parent.Map.ClearLiveLayer('compare-layer');

                var pullGroundData = [];

                $(data.response).each(function (index, point) {
                    pullGroundData.push([point.Longitude, point.Latitude, point.Height, moment(point.DateTime).format("YYYYMMDD_HHmmss")]);
                }.bind(this));

                console.log(pullGroundData);

                this.PullGroundData = pullGroundData;
                var value = this.PullGroundData[this.PullGroundData.length - 1];
                var time = moment(value[3], "YYYYMMDD_HHmmss");
                var type = $('.type-select span.active').attr('type');
                if (type === 'decimal') {
                    $('#longitude').val(value[0]);
                    $('#latitude').val(value[1]);
                } else {
                    $('#lng-degree').val(this.getLngLatDecimal(value[0]).degree);
                    $('#lng-minute').val(this.getLngLatDecimal(value[0]).minute);
                    $('#lng-second').val(this.getLngLatDecimal(value[0]).second.toFixed(2));
                    $('#lat-degree').val(this.getLngLatDecimal(value[1]).degree);
                    $('#lat-minute').val(this.getLngLatDecimal(value[1]).minute);
                    $('#lat-second').val(this.getLngLatDecimal(value[1]).second.toFixed(2));
                }
                
                $('#height').val(value[2]);
                $("#release-date").datetimebox('setValue', moment(time).format('YYYY/MM/DD HH:mm'));
            }.bind(this));
        } else {
            uploader.on('fileuploaded', function (event, data, previewId, index) {
                var marks = [];
                var newArray = [];

                data.response.forEach(function (item, index) {
                    marks.push(item.Longitude, item.Latitude, moment(item.DateTime).format("YYYYMMDD_HHmmss"));
                });

                $(data.response).each(function (index, point) {
                    newArray.push([point.Longitude, point.Latitude, point.Height, moment(point.DateTime).format("YYYYMMDD_HHmmss")]);
                });

                this.PullGroundData = newArray;

                this.Parent.Map.LoadRealTimeData('compare-layer', newArray);
            }.bind(this));
        }

        $('.hidden-xs').text('上传...');
        $('.hidden-xs').addClass('realtime-btn');
        $('.hidden-xs').css({
            'marginLeft': '-2px',
            'position': 'absolute',
            'text-align': 'center',
            'float': 'left'
        });
        $('.file-input').css({
            'width': '86px',
            'float': 'left'
        });

        $('.live-file .hidden-xs').text('实况数据...');
    };

    this.OnCalcButtonClick = function () {
        // Close details
        this.ResultList.Reset();

        // Prepare task info
        this.TaskInfo = {
            Id: this.CreateId(),
            Result: null,
            CreateTime: new Date()
        };

        // Submit task
        if (Config.InProductionMode)
            this.SubmitTask(this.TaskInfo.Id);
        else
            this.SubmitTest(this.TaskInfo.Id, 39.917, 116.405);
    };

    this.OnResetButtonClick = function () {
        this.Reboot('success', null);
    };

    this.OnAddLabelButtonClick = function () {
        var value = $('#label-input').val().trim();
        if (value.length === 0)
            return;

        $.ajax({
            type: "POST",
            dataType: 'json',
            data: {
                userId: parseInt($('#user-info').attr('userid')),
                taskId: this.TaskInfo.Id,
                name: value
            },
            url: '/Beijing/AddTag',
            success: function (result) {
                var label = $('<a href="javascript:;" tagId="{0}">{1}<span class="clear-btn"><i></i></span></a>'.format(result, value));
                label.on('click', this.SetActiveLabel.bind(this));
                label.find('.clear-btn').on('click', this.RemoveLabel.bind(this));

                $('#realtime-slider').find('.label-list:first').append(label);
                this.Relayout();
            }.bind(this)
        });
    };

    this.CheckTaskState = function () {
        $.ajax({
            type: "GET",
            dataType: 'json',
            url: this.getCheckUrl(this.TaskInfo.Id),
            success: function (result) {
                this.TaskInfo.Result = result;

                if (result.code === 200) {
                    this.AddTask(this.TaskInfo.Id);
                    this.LoadData(result);
                    this.TaskStopped();
                }
                else if (this.IsTaskTimeout()) {
                    this.Reboot("error", "任务计算已超时，请重新提交计算。");
                    this.TaskStopped();
                }
            }.bind(this)
        });
    };

    this.getCheckUrl = function (taskId) {
        if (Config.InProductionMode)
            return 'http://{0}/bj/check?num={1}'.format(Config.ApiRoot, taskId);
        else
            return '/Content/json/beijing/check.json'.format(taskId);
    };

    this.getJsonUrl = function (taskId) {
        if (Config.InProductionMode)
            return "http://{0}/bj/getresult/{1}.json".format(Config.ApiRoot, taskId);
        else
            return '/Content/json/beijing/{0}.json'.format(taskId);
    };

    this.LoadData = function (result) {
        $.getJSON(this.getJsonUrl(result.num), function (data) {
            var param = this.GetTaskParams(this.TaskInfo.Id);
            this.Parent.Map.LoadAverageData('realtime-layer', {
                ReleaseTime: param.releaseTime,
                Longitude: param.longitude,
                Latitude: param.latitude,
                Height: param.height
            }, data);

            this.Parent.Map.GetTargetPolygon(data);
            this.Parent.Map.SetForecastData(data);
            this.ResultList.SetData('realtime-layer', [param.latitude, param.longitude], data);
        }.bind(this));
    };

    this.Reboot = function (type, text) {
        $.ajax({
            type: "GET",
            dataType: 'json',
            url: 'http://{0}/bj/reboot'.format(Config.ApiRoot),
            success: function (data) {
                this.MessageBox(type, text !== null ? text : data.info);
            }.bind(this)
        });
    };

    this.TaskStarted = function (taskId) {
        this.TaskStateCheckTimer = setInterval(this.CheckTaskState.bind(this), 10000);
        $('#task-id-span').text(taskId);
        $('.shade').show();
    };

    this.TaskStopped = function () {
        clearInterval(this.TaskStateCheckTimer);
        $('.shade').hide();
    };

    this.CreateId = function () {
        var time = this.GetReleaseTime();
        time = time.replace(new RegExp('-', 'g'), "");

        var now = new Date();
        return time + now.getMilliseconds();
    };

    this.IsTaskTimeout = function () {
        var fromTime = this.TaskInfo.CreateTime.getTime();
        var toTime = (new Date).getTime();
        var seconds = (toTime - fromTime) / 1000;
        return seconds > 600;
    };

    this.GetCalcPramas = function (taskId) {
        var type = $('.type-select span.active').attr('type');
        var lngDegree = $('#lng-degree').val();
        var lngMinute = $('#lng-minute').val();
        var lngSecond = $('#lng-second').val();
        var latDegree = $('#lat-degree').val();
        var latMinute = $('#lat-minute').val();
        var latSecond = $('#lat-second').val();

        return {
            lon: type === 'decimal' ? $('#longitude').val() : this.getLngLatDegree(lngDegree, lngMinute, lngSecond),
            lat: type === 'decimal' ? $('#latitude').val() : this.getLngLatDegree(latDegree, latMinute, latSecond),
            num: taskId,
            hgt: $('#height').val(),
            rlen: $('#time-length-input').val(),
            tlen: $('#interval-length-input').val(),
            rlen2: $('#spread-length-input').val(),
            tlen2: $('#interval-spread-input').val(),
            tpoint: this.GetReleaseTime(),
            pullGround: $("#control-switch").hasClass("control-switch-on") ? 1 : -1
        };
    };

    this.getLngLatDegree = function (degree, minute, second) {
        var str = parseFloat(minute) + parseFloat(second / 60);
        var value = parseFloat(str / 60) + parseFloat(degree);
        return value.toFixed(6);
    };

    this.getLngLatDecimal = function (value) {
        var text = value.split(".");
        var degree = text[0];

        var temp = "0." + text[1];
        temp = String(temp * 60);
        var str = temp.split(".");
        var minute = str[0];

        temp = "0." + str[1];
        temp = temp * 60;
        var second = temp;
        return {
            degree: degree,
            minute: minute,
            second: second
        };
    };

    this.GetTaskParams = function (taskId) {
        var type = $('.type-select span.active').attr('type');
        var lngDegree = $('#lng-degree').val();
        var lngMinute = $('#lng-minute').val();
        var lngSecond = $('#lng-second').val();
        var latDegree = $('#lat-degree').val();
        var latMinute = $('#lat-minute').val();
        var latSecond = $('#lat-second').val();

        return {
            taskId: taskId,
            region: 'bj',
            longitude: type === 'decimal' ? $('#longitude').val() : this.getLngLatDegree(lngDegree, lngMinute, lngSecond),
            latitude: type === 'decimal' ? $('#latitude').val() : this.getLngLatDegree(latDegree, latMinute, latSecond),
            height: $('#height').val(),
            simulatedDuration: $('#time-length-input').val(),
            simulatedInterval: $('#interval-length-input').val(),
            releaseTime: $("#release-date").datetimebox('getValue'),
            resultState: this.TaskInfo.Result.code,
            resultMessage: this.TaskInfo.Result.code === '200' ? '成功' : this.TaskInfo.Result.info
        };
    };

    this.GetReleaseTime = function () {
        var time = $('#release-date').datetimebox('getValue');
        return moment(time, 'YYYY/MM/DD HH:mm').format('YYYY-MM-DD-HH-mm');
    };

    this.SubmitTask = function (taskId) {
        var params = this.GetCalcPramas(taskId);
        var partten = 'http://{0}/bj/{1}?lon={2}&lat={3}&num={4}&hgt={5}&rlen={6}&tlen={7}&tpoint={8}&rlen2={9}&tlen2={10}&fac={11}';
        var url = partten.format(Config.ApiRoot, 'backward', params.lon, params.lat, params.num, params.hgt, params.rlen, params.tlen, params.tpoint, params.rlen2, params.tlen2, params.pullGround);

        $.ajax({
            type: "GET",
            dataType: 'json',
            url: url,
            beforeSend: function () {
                this.Parent.Map.CenterMap(parseFloat(params.lat), parseFloat(params.lon));
                this.TaskStarted(taskId);
            }.bind(this),
            success: function (result) {
                this.TaskStopped();
                this.MessageBox("warning", result.info);
            }.bind(this),
            complete: function () {
                $('.param-label').removeClass('label-shade');
            }.bind(this)
        });
    };

    this.SubmitTest = function (taskId, lat, lon) {
        $.ajax({
            type: "GET",
            dataType: 'json',
            url: this.getCheckUrl(taskId),
            success: function (result) {
                this.TaskInfo.Id = taskId;
                this.TaskInfo.Result = result;

                this.Parent.Map.CenterMap(lat, lon);
                this.AddTask(this.TaskInfo.Id);
                this.LoadData(result);
            }.bind(this)
        });
    };

    this.AddTask = function (taskId) {
        $.ajax({
            type: "POST",
            dataType: 'json',
            url: '/Beijing/AddTask',
            data: this.GetTaskParams(taskId),
            success: function (result) {
                this.Parent.HistoryPanel.InitDateTimes();
                this.Parent.HistoryPanel.ReloadDataGrid();
            }.bind(this)
        });
    };

    this.MessageBox = function (type, text) {
        swal({
            title: "",
            text: text,
            type: type,
            icon: type,
            showCancelButton: false,
            confirmButtonText: "确定",
            closeOnConfirm: true
        });
    };

    this.SetActiveLabel = function (event) {
        $(event.target).toggleClass('active');
    };

    this.RemoveLabel = function (event) {
        if ($(event.target).parent().is('a'))
            $(event.target).parent().remove();
        else
            $(event.target).parents('a').remove();
        this.Relayout();
    };

    this.Relayout = function () {
        var windowHeight = $(window).height();
        var labelHeight = $('#realtime-slider').find('.label-list:first').height();

        var resultList = $('#realtime-result-list');
        resultList.find('.calc-list ul').height(windowHeight - labelHeight - (this.isDecimal ? 742 : 790));
    };

    this.OnTypeSelectClick = function (event) {
        $('.type-select span').removeClass("active");
        $(event.target).addClass("active");

        if ($(event.target).attr('type') === 'decimal') {
            this.isDecimal = true;
            this.Relayout();

            $('#lng-decimal').show();
            $('#lat-decimal').show();
            $('#lng-degrees').hide();
            $('#lat-degrees').hide();
            $('.degree-text').hide();
        } else {
            this.isDecimal = false;
            this.Relayout();

            $('#lng-decimal').hide();
            $('#lat-decimal').hide();
            $('#lng-degrees').show();
            $('#lat-degrees').show();
            $('.degree-text').show();
        }
    };

    this.InputChange = function () {
        $('#lng-degree').on('change', this.checkInput.bind(this, $('#lng-minute'), $('#lng-second'), 180));
        $('#lng-minute').on('change', this.checkInput.bind(this, $('#lng-degree'), $('#lng-second'), 60));
        $('#lng-second').on('change', this.checkInput.bind(this, $('#lng-degree'), $('#lng-minute'), 60));

        $('#lat-degree').on('change', this.checkInput.bind(this, $('#lat-minute'), $('#lng-second'), 180));
        $('#lat-minute').on('change', this.checkInput.bind(this, $('#lat-degree'), $('#lng-second'), 60));
        $('#lat-second').on('change', this.checkInput.bind(this, $('#lat-degree'), $('#lng-minute'), 60));
    };

    this.checkInput = function (value1, value2, maxNumber, event) {
        $('#lng-degree-text').text('');
        $('#lng-degree-text').removeClass('degree-text-error');
        if ($(event.target).val().trim() === '' || value1.val().trim() === '' || value2.val().trim() === '' || $(event.target).val() > maxNumber || $(event.target).val() < 0) {
            $('#lng-degree-text').text('请输入正确的值。');
            $('#lng-degree-text').addClass('degree-text-error');
            return;
        }

        if ($(event.target).attr('id') === 'lng-degree')
            $('#lng-degree-text').text(this.getLngLatDegree($(event.target).val(), value1.val(), value2.val()));
        else if ($(event.target).attr('id') === 'lng-minute')
            $('#lng-degree-text').text(this.getLngLatDegree(value1.val(), $(event.target).val(), value2.val()));
        else if ($(event.target).attr('id') === 'lng-second')
            $('#lng-degree-text').text(this.getLngLatDegree(value1.val(), value2.val(), $(event.target).val()));
        else if ($(event.target).attr('id') === 'lat-degree')
            $('#lng-degree-text').text(this.getLngLatDegree($(event.target).val(), value1.val(), value2.val()));
        else if ($(event.target).attr('id') === 'lat-minute')
            $('#lng-degree-text').text(this.getLngLatDegree(value1.val(), $(event.target).val(), value2.val()));
        else if ($(event.target).attr('id') === 'lat-second')
            $('#lng-degree-text').text(this.getLngLatDegree(value1.val(), value2.val(), $(event.target).val()));
    }
};