<div class="preview-trial-balance" id="mainPreviewDiv">

    <div class="leftFilter">
        <div class="form-inline" style="height:35px;">
            <div class="pull-left" style="display:inline-block">
                <button id="filterButton" class="filter-button margin-left20"
                        atms-popover ng-mouseenter="prepareSummary()" ng-click="showPopover()"
                        popover-container="body" popover-auto-hide="true" data-overwrite="true"
                        use-optimized-placement-algorithm="true"
                        data-placement="bottom"
                        data-templateurl="/app/common/controls/preview-trial-balance/preview-trial-balance-search.html">
                    <i class="fa fa-filter" aria-hidden="true"></i>
                </button>

                <div class="marginBottom" style="display:inline-block">
                    <span class="text-bold margin-left20" translate="TrialBalanceTitle"></span> |
                    <span class="text-bold margin-left20" translate="JournalQJ"></span>:
                    <input type="text" class="form-control input-width-middle" id="input-invoice-period-picker"  ng-disabled="{{isReadOnly}}" />
                </div>
                <span class="text-bold margin-left20" translate="Display"></span>:
                <div class="ui-select-no-border">
                    <ui-select ng-model="currentCategory.selected" on-select="doCategoryChange()" search-enabled="false" style="width:120px;">
                        <ui-select-match>{{$select.selected.name}}</ui-select-match>
                        <ui-select-choices repeat="cat in categoryList | propsFilter: {name: $select.search}">
                            <div title="{{cat.name}}" ng-bind-html="cat.name"></div>
                        </ui-select-choices>
                    </ui-select>
                </div>
                <div class="ui-select-no-border margin-left20">
                    <input type="checkbox" id="ckbHideAllZeroRecords" ng-click="hideAllZeroRecords()">
                </div>
                <span class="text-bold" translate="HideAllZeroRecords"></span>
            </div>
            <!--导出-->
            <div class="pull-right margin-right30">
                <!--<button id="btnDataFilter" class="hidden" ng-click="doDataFilter('')">Open Filter</button>
                <button id="btnResetDataFilter" class="hidden" ng-click="doDataFilterReset()">Reset Filter</button>-->
                <span class="cursorPointer margin-right10" ng-click="doExport('GL','xlsx')"><i class="fa fa-file-excel-o" aria-hidden="true"></i> <span translate="ExportBtn"></span></span>
            </div>
        </div>

        <div class="uicustom-csv-link-location hidden">
            <label></label>
            <span class="ui-grid-exporter-csv-link">&nbsp</span>
        </div>
    </div>

    <!--过滤条件信息-->
    <div id="filterCriteriaDiv" style="display:inline-block;max-width:98%;margin-bottom:2px;" ng-show="criteriaList.length>0">
        <span class="text-bold margin-left20" translate="FilterCriteriaTags"></span>:
        <span class="tag label label-default" ng-repeat="criteria in criteriaList">
            <span title="{{criteria.name=== '科目代码'? criteria.valueFrom:''   }}">
                {{criteria.name}}: {{criteria.valueFrom | limitString:15}}
                <i class="fa fa-circle-o-notch" ng-show="((criteria.valueFrom===null || criteria.valueFrom.length<=0) && criteria.valueTo!==null && criteria.valueTo.length>0)" aria-hidden="true"></i>
                <i class="fa fa-arrow-right" ng-show="((criteria.valueFrom===null || criteria.valueFrom.length<=0) && criteria.valueTo!==null && criteria.valueTo.length>0)" aria-hidden="true"></i><span ng-show="(criteria.valueFrom.length>0 && criteria.valueTo!==null && criteria.valueTo.length>0)">-</span> {{criteria.valueTo}}
            </span>
            <i class="fa fa-arrow-right" ng-show="((criteria.valueTo===null || criteria.valueTo.length<=0) && criteria.valueFrom!==null && criteria.valueFrom.length>0)" aria-hidden="true"></i> <i class="fa fa-circle-o-notch" ng-show="((criteria.valueTo===null || criteria.valueTo.length<=0) && criteria.valueFrom!==null && criteria.valueFrom.length>0)" aria-hidden="true"></i>
            <a><i class="remove glyphicon glyphicon-remove-sign glyphicon-white" ng-click="doDataFilter(criteria.propertyName)"></i></a>
        </span>
    </div>

    <!--grid数据-->
    <div id="mainAreaDiv" class="mainArea">
        <!--ui-Grid-->
        <div id="tbDataPreviewGrid" style="width:100%">
            <div id="topHeaderTableDiv" style="width:1202px; border-top:solid thin; border-top-color:#D3D3D3;border-left:solid thin; border-left-color:#D3D3D3;border-right:solid thin; border-right-color:#D3D3D3;z-index:1; position:relative">
                <table id="topHeaderTable" class="topHeaderLayout" width="1200px">
                    <tr style="height:30px;">
                        <td id="UIHeaderCol001" class="topLevelHeader" style="border-right:solid thin; border-color:#D3D3D3"></td>
                        <td id="UIHeaderCol01" class="topLevelHeader" style="border-right:solid thin; border-color:#D3D3D3"></td>
                        <td id="UIHeaderCol1" class="topLevelHeader" style="border-right:solid thin; border-color:#D3D3D3"></td>

                        <td id="UIHeaderCol2" class="topLevelHeader" style="text-align:center;border-right:solid thin; border-right-color:#D3D3D3;border-bottom:solid thin; border-bottom-color:#D3D3D3"><span translate="BegBal"></span></td>
                        <td id="UIHeaderCol3" class="topLevelHeader" style="text-align:center;border-right:solid thin; border-right-color:#D3D3D3;border-bottom:solid thin; border-bottom-color:#D3D3D3"><span translate="AccumulatedAmount"></span></td>
                        <td id="UIHeaderCol4" class="topLevelHeader" style="text-align:center;border-bottom:solid thin; border-bottom-color:#D3D3D3"><span translate="EndBal"></span>&nbsp;&nbsp;&nbsp;</td>
                    </tr>
                </table>
            </div>
            <div class="balanceSheetGrid" ui-grid-tree-view ui-grid-selection ui-grid-exporter ui-grid="gridOptions">
                <div class="watermark" ng-show="!gridOptions.data.length"><span translate="NoDataAvailable"></span></div>
            </div>
        </div>

        <!--For Export ONLY-->
        <div style="display:none;">
            <table id="exportTable">
                <tr>
                    <td><span translate="AccountCode"></span></td>
                    <td><span translate="AccountName"></span></td>

                    <td><span translate="BegBal"></span><span translate="Debitor"></span></td>
                    <td><span translate="BegBal"></span><span translate="Creditor"></span></td>

                    <td><span translate="AccumulatedAmount"></span><span translate="Debitor"></span></td>
                    <td><span translate="AccumulatedAmount"></span><span translate="Creditor"></span></td>

                    <td><span translate="EndBal"></span><span translate="Debitor"></span></td>
                    <td><span translate="EndBal"></span><span translate="Creditor"></span></td>
                </tr>
                <tr ng-repeat="exportData in exportDataList" on-finish-render="ngRepeatFinished">
                    <td>{{exportData.accountCode}}</td>
                    <td>{{exportData.accountName}}</td>
                    <td>{{exportData.debitOpeningBalance}}</td>
                    <td>{{exportData.creditOpeningBalance}}</td>
                    <td>{{exportData.accumulatedDebitAmount}}</td>
                    <td>{{exportData.accumulatedCreditAmount}}</td>
                    <td>{{exportData.debitClosingBalance}}</td>
                    <td>{{exportData.creditClosingBalance}}</td>
                </tr>
            </table>
        </div>
        <!--For Export ONLY-->
    </div>

    <vat-parent-code-modal u-list="stupidData" is-show="isShowParentCodePop" is-unchecked-all="isToClearSelection" on-confirm-selection="confirmCodes(confirmedRecords)" on-cancel-selection="cancelCodes()"></vat-parent-code-modal>

</div>




<script type="text/javascript">
    $(document).ready(function () {
        ReAlignUI();
        MakePopOverMoreResposive();
        ToggleHeight()
    });


    function ToggleHeight() {
        $("#a-up").click(function () {
            setTimeout(function () {
                ReAlignUI();
            }, 1000);
        });

        $("#a-down").click(function () {
            setTimeout(function () {
                ReAlignUI();
            }, 1000);
        });

    }
    function ReAlignUI() {
        var leftMenuWidth = 100;
        var mainDivWidth = $("#mainPreviewDiv").width();
        var mainDivHeight = $("#mainPreviewDiv").height();

        $("#topHeaderTable").width(mainDivWidth - 50);
        $("#topHeaderTableDiv").width(mainDivWidth - 50);
        $('.balanceSheetGrid').width(mainDivWidth - 50);

        $('.balanceSheetGrid').height(mainDivHeight - 150);
    }

    function MakePopOverMoreResposive() {
        $('body').on('hidden.bs.popover', function (e) {
            $(e.target).data("bs.popover").inState = { click: false, hover: false, focus: false }
        });
    }

</script>