$(function () {
    'use strict';
    BemsWebApplication.Popup.WorkApprovalMaterial = {

        create: function (viewInfo, viewModel) {

            var overlayVisible = ko.observable(false),
                position = ko.observable(),
                timer = null
            ;

            var materialGridView2 = ko.observable();
            var materials2 = ko.observableArray();
            var materialFactory2 = BWA.Factory.Material;
            var materialColumns2 = materialFactory2.getColumns([
               { dataField: 'MaterialCode', width: '30%' , visible:false},
               { dataField: 'Standard', width: '40%' },
               { dataField: 'Name', width: '40%' }
            ]);

            var materials2DataSource = BemsWebApplication.db.createDataSource('FmsWorkResultCheckItemMaterial', true, true, false);

            var modifiableMaterialDataGridOptions2 = null;

            overlayVisible.subscribe(function (value) {

                if (value) {
                    if (timer !== null) {
                        clearInterval(timer);
                    }
                    var top, left;

                    //var element = $('#popupWorkContentsDetail').offsetParent();
                    var element = $('#currentWorkpopupDetail').offsetParent();

                    position({ my: 'left top', at: 'right top', of: element });
                    timer = setInterval(function () {
                        var offset = element.offset();
                        if (top !== offset.top || left !== offset.left) {
                            top = offset.top;
                            left = offset.left;
                            position({ my: 'left top', at: 'right top', of: element });
                        }
                    }, 100);
                }
                else {
                    if (timer !== null) {
                        clearInterval(timer);
                        timer = null;
                    }
                }
            });

            position.subscribe(function (value) {

            });

            viewModel.popupVisible.subscribe(function (value) {
                if (value === false) {
                    overlayVisible(false);
                }
                //workProgressDataSource.load().done(function (result) {
                //    progresses(result);
                //});
            });

            viewModel.workResultContentsViewOptions = {
                width: '530px',
                height: '538px',
                dragEnabled: false,

                position: position,
                visible: overlayVisible,
                showingAction: function () {
                },
                closeOnOutsideClick: false,
                shading: false,
                animation: {
                    show: { type: "slide", duration: 150, from: { left: '-=10', opacity: 0 }, to: { opacity: 1 } },
                    hide: { type: "slide", duration: 150, from: { left: '-=10', opacity: 1 }, to: { opacity: 0 } }
                }
            };

            //var popup = e.component;

            viewModel.toolbarItemsInWorkResult = [
                { location: 'before', text: '자재사용내역' },
                {
                    location: 'after', widget: 'button', options: {
                        text: $G('materialInsertion'), icon: 'search',
                        clickAction: function () {
                            viewModel.isAddPopup(false);
                            viewModel.materialSearchPopup.show();
                        }
                    }
                },
                {
                    location: 'after', widget: 'button', options: {
                        text: $G('materialDeletion'), icon: 'remove', type: 'danger',
                        clickAction: function () { handleDeleteSelectedMaterials(); }
                    }
                },
                {
                    location: 'after', widget: 'button', options: {
                        text: $G('save'), icon: 'save',
                        clickAction: function () {
                            saveApprovalMaterials();
                        }
                    }
                }
            ];

            modifiableMaterialDataGridOptions2 = utils.datagrid.defaultOptions({

                width: 500,
                pager: {
                    showPageSizeSelector: false,
                    allowedPageSizes: []
                },

                // visible: viewModel.isEditModeInPopup,
                dataSource: materials2,
                selection: { mode: 'multiple', allowSelectAll: true },
                columns: materialColumns2.concat([{

                    dataField: 'MaterialCount', width: '20%', type: 'number',
                    caption: $G('materialCount'), alignment: 'center',

                    cellTemplate: utils.datagrid.getNumberBoxDataGridTemplateFunc({
                        min: 1,
                        max: 1000000,
                        dataField: 'MaterialCount',
                        convertValueWhenValueChanged: function (value) {
                            return Math.max(1, value);
                        }
                    })
                }]),

                cellClick: function (e) {

                    utils.datagrid.cellClickEventForDataGridTemplate(e, 'MaterialCount');
                },

                contentReadyAction: function (e) {

                    materialGridView2(e.component);
                },
            });

            function handleDeleteSelectedMaterials() {

                var rows = materialGridView2().getSelectedRowsData();
                if (_.isEmpty(rows)) {

                    utils.toast.show('선택된 자재가 없습니다.', 'error');
                    return;
                }

                _.each(rows, function (row) {

                    var array = materials2();
                    var length = array.length;
                    var id = row.MaterialId();
                    for (var i = 0 ; i < length ; i++) {

                        if (id === array[i].MaterialId()) {

                            materials2().splice(i, 1);
                            break;
                        }
                    }
                });

                materialGridView2().refresh();
            }

            function saveApprovalMaterials() {
                utils.toast.show('자재수정클릭');
            }

            return {
                visible: overlayVisible,
                materials2: materials2,
                materialGridView2: materialGridView2,
                materials2DataSource: materials2DataSource,
                modifiableMaterialDataGridOptions2: modifiableMaterialDataGridOptions2
            };
        }
    }
});