BemsWebApplication.ChargePrice = function (params, viewInfo) {

    var now = new Date();
    var selectEnergy = "전력";
    var priceType = new Array(2);
    var priceCodes; 

    function setPriceCodeData(SiteID, FuelTypeId) {
        var dataSource = new DevExpress.data.DataSource({
            store: new DevExpress.data.ODataStore({
                url: 'http://localhost:3403/BemsDataService.svc/BemsSitePrice'
            }),
            expand: ['BemsPriceCode','BemsPriceType'],
            requireTotalCount: true,
            pageSize: 100
        });
        dataSource.filter([
                ["SiteID", "=", SiteID],
                "and",
                ["FuelTypeId", "=", FuelTypeId],
                "and",
                ["UseYN","=","Y"]
        ]);
        dataSource.sort({ getter: "PriceCode", asc: true });
        dataSource.load()
        .done(function (result) {
            priceType[0] = result[0].PriceTypeId;
            priceType[1] = result[0].BemsPriceType.PriceTypeIdDesc;
            $('#priceTypeId').text(priceType[1]);
            var tmpDate = $("#startDatePicker").dxDateBox("instance").option('value');
            var endDay = 32 - new Date(tmpDate.getFullYear(), tmpDate.getMonth(), 32).getDate();
            $("#startDate").dxDateBox("instance").option('value',new Date(tmpDate.getFullYear(),tmpDate.getMonth(),1,0,0,0,0));
            $("#endDate").dxDateBox("instance").option('value', new Date(tmpDate.getFullYear(), tmpDate.getMonth(), endDay, 0, 0, 0, 0));
            var $detail = $('#detail'); // finds the <detail> element
            $('#detail').empty();
            priceCodes = new Array();
            for (var i = 0; i < result.length; i++) {
                priceCodes[i] = result[i].PriceCode;
                //<div class="dx-field-label cw-multi-field-label-ex">기본요금</div>
                //<div id="labelBaseCharge" class="dx-field-value" data-bind="text: '6,240,000'"></div>
                //<div id="txtBaseCharge" style="margin-left: 10px; position: absolute; left: 14%;" data-bind="dxTextBox: { value: '6,240,000' , placeholder: '기본요금' , visible : false}"></div>
                $('<div class="fl setText" style="line-height:220%;cursor:default;background:#d5ecfd url(../images/custom/ibems_light/arrow01.png) 5px center no-repeat;padding-left:15px;width:15%;height:32px;"></div>')                 // creates a new HTML element
                    .appendTo($detail)     // appends a new HTML element to the <body> element
                $('<div class="fl setInput" style="margin-left: 10px;width:15%;" data-bind="dxTextBox: {}"></div>')
                    .appendTo($detail)
                    .dxTextBox();
                if (i % 3 == 2) {
                    $('<br>').appendTo($detail)
                    $('<br>').appendTo($detail)
                }
            }
            var setTexts = document.querySelectorAll('.setText');
            var setInputs = document.querySelectorAll('.setInput');
            for (var i = 0; i < result.length; i++) {
                setTexts[i].id = "text" + result[i].PriceCode;
                setTexts[i].innerHTML = result[i].BemsPriceCode.PriceCodeDesc;
                setInputs[i].id = result[i].PriceCode;
                //$('#switch' + i).dxSwitch("instance").option('onText', 'On');
                //$('#switch' + i).dxSwitch("instance").option('offText', 'Off');
            }
        })
        .fail(function (error) {
            alert(error);
        });
    }

    function getHistoryData(SiteId,FuelTypeId,PayDate) {
        var dataSource = new DevExpress.data.DataSource({
            store: new DevExpress.data.ODataStore({
                url: 'http://localhost:3403/BemsDataService.svc/BemsSitePriceHistory'
            }),
            expand: ['BemsPriceCode','BemsPriceType'],
            requireTotalCount: true,
            pageSize: 100
        });
        dataSource.filter([
                ["SiteId", "=", SiteId],
                "and",
                ["FuelTypeId", "=", FuelTypeId],
                "and",
                ["PayDate", "=", PayDate]
        ]);
        dataSource.load()
        .done(function (result) {
            priceType[0] = result[0].PriceTypeId;
            priceType[1] = result[0].BemsPriceType.PriceTypeIdDesc;
            $('#priceTypeId').text(priceType[1]);
            $('#priceTypeId').text(priceType[1]);
            var tmpDate = $("#startDatePicker").dxDateBox("instance").option('value');
            var endDay = 32 - new Date(tmpDate.getFullYear(), tmpDate.getMonth(), 32).getDate();
            $("#startDate").dxDateBox("instance").option('value', result[0].StartDate);
            $("#endDate").dxDateBox("instance").option('value', result[0].EndDate);
            $("#startDate").dxDateBox("instance").option('readOnly', true);
            $("#endDate").dxDateBox("instance").option('readOnly', true);
            var $detail = $('#detail'); // finds the <detail> element
            $('#detail').empty();
            priceCodes = new Array();
            for (var i = 0; i < result.length; i++) {
                priceCodes[i] = result[i].PriceCode;
                $('<div class="fl setText" style="line-height:220%;cursor:default;background:#d5ecfd url(../images/custom/ibems_light/arrow01.png) 5px center no-repeat;padding-left:15px;width:15%;height:32px;"></div>')                 // creates a new HTML element
                    .appendTo($detail)     // appends a new HTML element to the <body> element
                $('<div class="fl setInput" style="margin-left: 10px;width:15%;" data-bind="dxTextBox: {}"></div>')
                    .appendTo($detail)
                    .dxTextBox();
                if (i % 3 == 2) {
                    $('<br>').appendTo($detail)
                    $('<br>').appendTo($detail)
                }
            }
            var setTexts = document.querySelectorAll('.setText');
            var setInputs = document.querySelectorAll('.setInput');
            for (var i = 0; i < result.length; i++) {
                setTexts[i].id = "text" + result[i].PriceCode;
                setTexts[i].innerHTML = result[i].BemsPriceCode.PriceCodeDesc;
                setInputs[i].id = result[i].PriceCode;
                $('#' + result[i].PriceCode).dxTextBox("instance").option('value', result[i].PriceValue);
                $('#' + result[i].PriceCode).dxTextBox("instance").option('readOnly', true);
                //$('#switch' + i).dxSwitch("instance").option('offText', 'Off');
            }
        })
        .fail(function (error) {
            alert(error);
        });
    }

    function checkHistoryData(SiteId,FuelTypeId,PayDate) {
        var dataSource = new DevExpress.data.DataSource({
            store: new DevExpress.data.ODataStore({
                url: 'http://localhost:3403/BemsDataService.svc/BemsSitePriceHistory'
            }),
            requireTotalCount: true,
            pageSize: 100
        });
        dataSource.filter([
                ["SiteId", "=", SiteId],
                "and",
                ["FuelTypeId", "=", FuelTypeId],
                "and",
                ["PayDate", "=", PayDate]
        ]);
        dataSource.load()
        .done(function (result) {
            if (result.length == 0) {
                $("#modifyBtn").dxButton("instance").option("text", "입력");
                setPriceCodeData(BWA.UserInfo.SiteId(), FuelTypeId);
            } else {
                $("#modifyBtn").dxButton("instance").option("text", "수정");
                getHistoryData(BWA.UserInfo.SiteId(), FuelTypeId, PayDate);
            }
        })
        .fail(function (error) {
            alert(error);
        });
    }

    function insertSitePriceHistory(SiteId,FuelTypeId,PayDate) {
        var store = new DevExpress.data.ODataStore({
            url: "http://localhost:3403/BemsDataService.svc/BemsSitePriceHistory",
            key: ["SiteId", "FuelTypeId", "PriceTypeId","PriceCode","PayDate"],
            keyType: {SiteId:"Int32", FuelTypeId:"Int32", PriceTypeId:"Int32", PriceCode:"String", PayDate:"String"}
        });
        var failCnt = 0;
        var startDate = $("#startDate").dxDateBox("instance").option('value');
        var endDate = $("#endDate").dxDateBox("instance").option('value');
        for (var i = 0; i < priceCodes.length; i++) {
            var priceValue = $("#" + priceCodes[i]).dxTextBox("instance").option('value');
            store.insert({
                SiteId: SiteId, FuelTypeId: FuelTypeId, PriceTypeId: priceType[0], PriceCode: priceCodes[i], PriceValue: priceValue, PayDate: PayDate, StartDate: startDate, EndDate: endDate, PayCharge: "0"
            })
            .done(function (key, result) {
                //alert(key + "/" + result);
            })
            .fail(function (error) {
                failCnt++;
            });
        }
        if (failCnt > 0) {
            alert("저장이 실패했습니다.");
        } else {
            alert("저장이 완료 되었습니다.");
        }
    }

    function updateSitePriceHistory(SiteId, FuelTypeId, PayDate) {
        var failCnt = 0;
        var store = new DevExpress.data.ODataStore({
            url: "http://localhost:3403/BemsDataService.svc/BemsSitePriceHistory",
            key: ["SiteId", "FuelTypeId", "PriceTypeId", "PriceCode", "PayDate"],
            keyType: {SiteId:"Int32", FuelTypeId:"Int32", PriceTypeId:"Int32", PriceCode:"String", PayDate:"String"}
        });
        var startDate = $("#startDate").dxDateBox("instance").option('value');
        var endDate = $("#endDate").dxDateBox("instance").option('value');
        for (var i = 0; i < priceCodes.length; i++) {
            var priceValue = $("#" + priceCodes[i]).dxTextBox("instance").option('value');
            store.update({ SiteId: SiteId, FuelTypeId: FuelTypeId, PriceTypeId: priceType[0], PriceCode: priceCodes[i], PayDate: PayDate }, { PriceValue: priceValue, StartDate : startDate, EndDate:endDate })
            .done(function (key, result) {
                //alert(key + "/" + result);
            })
            .fail(function (error) {
                failCnt++;
            });
        }
        if (failCnt > 0) {
            alert("업데이트가 실패했습니다.");
        } else {
            alert("저장 되었습니다.");
        }
    }

    function disableReadOnly() {
        for (var i = 0; i < priceCodes.length; i++) {
            $("#" + priceCodes[i]).dxTextBox("instance").option('readOnly', false);
        }
        $("#startDate").dxDateBox("instance").option('readOnly', false);
        $("#endDate").dxDateBox("instance").option('readOnly', false);
    }

    function handleViewShown() {
        var tmpDate = $("#startDatePicker").dxDateBox("instance").option('value');
        var month = tmpDate.getMonth() + 1;
        if (month < 10) {
            month = "0" + month.toString();
        }
        var endDay = 32 - new Date(tmpDate.getFullYear(), tmpDate.getMonth(), 32).getDate();
        checkHistoryData(BWA.UserInfo.SiteId(),1,tmpDate.getFullYear().toString() + month);
    }

    var searchViewOptions = {
        //templete function
    };

    function handleSearchInSearchView() {
        //templete function
    }

    var viewModel = $.extend(BWA.CommonView.create(params, viewInfo, searchViewOptions, ko.observable(null), handleViewShown, null, handleSearchInSearchView),
        {
            startDatePicker: {
                pickerType: "calendar",
                value: now,
                formatString: "yyyy년 MM월",
                maxZoomLevel: "year",
                width: "9%",
                onValueChanged: function () {
                    var tmpDate = $("#startDatePicker").dxDateBox("instance").option('value');
                    var month = tmpDate.getMonth() + 1;
                    if (month < 10) {
                        month = "0" + month.toString();
                    }
                    var endDay = 32 - new Date(tmpDate.getFullYear(), tmpDate.getMonth(), 32).getDate();
                    var FuelTypeId = 0;
                    if (selectEnergy == "전력") {
                        FuelTypeId = 1;
                    } else if (selectEnergy == "가스") {
                        FuelTypeId = 2;
                    } else if (selectEnergy == "수도") {
                        FuelTypeId = 3;
                    } else {
                        alert("선택된 에너지원이 없습니다.");
                    }
                    checkHistoryData(BWA.UserInfo.SiteId(), FuelTypeId, tmpDate.getFullYear().toString() + month);
                }
            },
            startDate: {
                pickerType: "calendar",
                value: now,
                formatString: "yyyy년 MM월 dd일",
                maxZoomLevel: "month",
                width: "12%"
            },
            endDate: {
                pickerType: "calendar",
                value: now,
                formatString: "yyyy년 MM월 dd일",
                maxZoomLevel: "month",
                width: "12%"
            },
            powerButtonClicked: function () {
                $("#powerBtn").css("background-image", "linear-gradient(180deg,#9babc3 0%,#41618c 100%)");
                $("#gasBtn").css("background-image", "linear-gradient(rgb(56,88,130) 0%, rgb(44,68,101)100%)");
                $("#waterBtn").css("background-image", "linear-gradient(rgb(56,88,130) 0%, rgb(44,68,101)100%)");
                selectEnergy = "전력";
                var tmpDate = $("#startDatePicker").dxDateBox("instance").option('value');
                var month = tmpDate.getMonth() + 1;
                if (month < 10) {
                    month = "0" + month.toString();
                }
                var endDay = 32 - new Date(tmpDate.getFullYear(), tmpDate.getMonth(), 32).getDate();
                checkHistoryData(BWA.UserInfo.SiteId(), 1, tmpDate.getFullYear().toString() + month);
            },
            gasButtonClicked: function () {
                $("#gasBtn").css("background-image", "linear-gradient(180deg,#9babc3 0%,#41618c 100%)");
                $("#powerBtn").css("background-image", "linear-gradient(rgb(56,88,130) 0%, rgb(44,68,101)100%)");
                $("#waterBtn").css("background-image", "linear-gradient(rgb(56,88,130) 0%, rgb(44,68,101)100%)");
                selectEnergy = "가스";
                var tmpDate = $("#startDatePicker").dxDateBox("instance").option('value');
                var month = tmpDate.getMonth() + 1;
                if (month < 10) {
                    month = "0" + month.toString();
                }
                var endDay = 32 - new Date(tmpDate.getFullYear(), tmpDate.getMonth(), 32).getDate();
                checkHistoryData(BWA.UserInfo.SiteId(), 2, tmpDate.getFullYear().toString() + month);
            },
            waterButtonClicked: function () {
                $("#waterBtn").css("background-image", "linear-gradient(180deg,#9babc3 0%,#41618c 100%)");
                $("#gasBtn").css("background-image", "linear-gradient(rgb(56,88,130) 0%, rgb(44,68,101)100%)");
                $("#powerBtn").css("background-image", "linear-gradient(rgb(56,88,130) 0%, rgb(44,68,101)100%)");
                selectEnergy = "수도";
                var tmpDate = $("#startDatePicker").dxDateBox("instance").option('value');
                var month = tmpDate.getMonth() + 1;
                if (month < 10) {
                    month = "0" + month.toString();
                }
                var endDay = 32 - new Date(tmpDate.getFullYear(), tmpDate.getMonth(), 32).getDate();
                checkHistoryData(BWA.UserInfo.SiteId(), 3, tmpDate.getFullYear().toString() + month);
            },
            modifyButtonClicked: function () {
                var FuelTypeId = 0;
                if (selectEnergy == "전력") {
                    FuelTypeId = 1;
                } else if (selectEnergy == "가스") {
                    FuelTypeId = 2;
                } else if (selectEnergy == "수도") {
                    FuelTypeId = 3;
                } else {
                    alert("선택된 에너지원이 없습니다.");
                }
                var tmpDate = $("#startDatePicker").dxDateBox("instance").option('value');
                var month = tmpDate.getMonth() + 1;
                if (month < 10) {
                    month = "0" + month.toString();
                }
                var payDate = tmpDate.getFullYear().toString() + month;
                if ($("#modifyBtn").dxButton("instance").option("text") == "입력") {
                    insertSitePriceHistory(BWA.UserInfo.SiteId(), FuelTypeId, payDate);
                }else if ($("#modifyBtn").dxButton("instance").option("text") == "수정") {
                    $("#modifyBtn").dxButton("instance").option("text", "확인");
                    disableReadOnly();
                } else if ($("#modifyBtn").dxButton("instance").option("text") == "확인") {
                    $("#modifyBtn").dxButton("instance").option("text", "수정");
                    updateSitePriceHistory(BWA.UserInfo.SiteId(), FuelTypeId, payDate);
                } else {
                    alert("선택된 버튼이 없습니다.");
                }
            }
    });

    return viewModel;
};