////////////////////////////////////////////////////////////////////////////
// System Pre-define Functions
// 95099372-ef3e-11ea-9c81-bf848405c62e

//Callback of data preparation stage before UI is fully loaded.
function OnInitializeData(reload, preview) {
    
        PUI(()=>{
                //you can access the 'ui' namespace in the parent form using the variable 'pui' here.
                //The 'pui' variable is valid in all functions of this document.
                //For robustness, you'd better use 'PUI(cb);' to access 'pui' variable.
	
        });
        OnCutModelShow();
        OnOutlineModelShow();
        model.startLocalhost(()=>{
                ui.webview.value = "http://localhost:4000";
                parent.setTimeout(()=>{
                        model.updateLineChart(getChart1());
                       
                }, 100);
        });
}

function update(){
        model.updateLineChart(getChart1());
}

//Callback after UI is fully loaded and displayed.
function OnReady(reload, preview) {
    
        PUI(()=>{
                //you can access the 'ui' namespace in the parent form using the variable 'pui' here.
                //The 'pui' variable is valid in all functions of this document.
                //For robustness, you'd better use 'PUI(cb);' to access 'pui' variable.
	
        });
}

function OnCloseForm() {
}

function OnException(err) {
        //ui.MessageBox('Error', '' + err, MessageBox.Icon.Critical, MessageBox.Button.Ok);
}

//////////////////////////////////////////////////////////////////////////
// Callback Functions.
// 641a254c-ef3e-11ea-bc8a-379bb908bdd7
function getChart1() {
        option = {
                xAxis: {
                        type: 'category',
                        boundaryGap: false
                },
                yAxis: {
                        type: 'value',
                        boundaryGap: [0, '30%']
                },
                visualMap: {
                        type: 'piecewise',
                        show: false,
                        dimension: 0,
                        seriesIndex: 0,
                        pieces: [
                                {
                                        gt: 1,
                                        lt: 3,
                                        color: 'rgba(0, 0, 180, 0.4)'
                                },
                                {
                                        gt: 5,
                                        lt: 7,
                                        color: 'rgba(0, 0, 180, 0.4)'
                                }
                        ]
                },
                series: [
                        {
                                type: 'line',
                                smooth: 0.6,
                                symbol: 'none',
                                lineStyle: {
                                        color: '#5470C6',
                                        width: 5
                                },
                                markLine: {
                                        symbol: ['none', 'none'],
                                        label: { show: false },
                                        data: [{ xAxis: 1 }, { xAxis: 3 }, { xAxis: 5 }, { xAxis: 7 }]
                                },
                                areaStyle: {},
                                data: [
                                        ['2019-10-10', 200],
                                        ['2019-10-11', 560],
                                        ['2019-10-12', 750],
                                        ['2019-10-13', 580],
                                        ['2019-10-14', 250],
                                        ['2019-10-15', 300],
                                        ['2019-10-16', 450],
                                        ['2019-10-17', 300],
                                        ['2019-10-18', 100]
                                ]
                        }
                ]
        };
        return option;
}

function OnBlankChange(){
        unit.form.side_pane.OnBlankOutlineCopy();
}

function OnCutModelHide(){
        ui.cut_down_btn.visible = false;
        ui.cut_right_btn.visible = true;
        ui.cut_stk.visible = false;
}

function OnCutModelShow(){
        ui.cut_down_btn.visible = true;
        ui.cut_right_btn.visible = false;
        ui.cut_stk.visible = true;
}

function OnOutlineModelHide(){
        ui.outline_down_btn.visible = false;
        ui.outline_right_btn.visible = true;
        ui.outline_stk.visible = false;
}

function OnOutlineModelShow(){
        ui.outline_down_btn.visible = true;
        ui.outline_right_btn.visible = false;
        ui.outline_stk.visible = true;
}

//The message corresponding callback executed by the docker pane.
// when calling [side_pane].fireEvent(type,para) in the main form.
function OnParentDockerMessage(type, para) {
}

//////////////////////////////////////////////////////////////////////////
// Utils Functions.
// 6c165ad6-ef3e-11ea-987c-b761a131c2fe

function onDragFile(filepath) {
}

function PUI(cb) {
        if(pui){cb();}
}

/*Usage of BLOCK_EVENT
        BLOCK_EVENT(()=>{
                ui.[name].[var] = ...;
        });
*/

function BLOCK_EVENT(cb) {
        ui.block_event = true;
        
        cb();
        
        ui.block_event = false;
}

//////////////////////////////////////////////////////////////////////////
// template codes for cw callback js.

function CW_DeclareVariable(name, setter, getter) {
        if(typeof(__DeclareVariable) === 'function') {
                __DeclareVariable(name, setter, getter);
        }
}

function CW_DeclareOuterVariable(name) {
        if(typeof(__DeclareOuterVariable) === 'function') {
                __DeclareOuterVariable(name);
        }
}