<div class="vat-preview-customInvoice-sheet" 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/vat/preview/vat-preview-customInvoice-sheet/vat-preview-customInvoice-sheet-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="CustomsCertList"></span> |

                    <span class="text-bold margin-left20" translate="JournalQJ"></span>:

                    <input type="text" class="form-control input-width-middle" id="input-invoice-period-picker" />
                </div>


            </div>
            <div class="pull-right margin-right30">

                <span class="cursorPointer margin-right10" ng-click="downloadCustomInvoice()"><i class="fa fa-file-excel-o" aria-hidden="true"></i> <span translate="ExportBtn"></span></span>
                
                <!--<span class="cursorPointer"><i class="fa fa-file-text-o" aria-hidden="true"></i> <span translate="Help"></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>{{criteria.name}}: {{criteria.valueFrom}} 
                <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>
    <!--<i class="fa fa-angle-right" ng-show="((criteria.valueFrom===null || criteria.valueFrom.length<=0) && criteria.valueTo!==null && criteria.valueTo.length>0)" aria-hidden="true"></i>-->
    <!--<i class="fa fa-angle-right" ng-show="((criteria.valueTo===null || criteria.valueTo.length<=0) && criteria.valueFrom!==null && criteria.valueFrom.length>0)" aria-hidden="true"></i>-->
    <div id="mainAreaDiv" class="mainArea">

        <div id="tbDataPreviewGrid" style="max-height:70%;width:100%;">

            <div class="balanceSheetGrid" ui-grid-selection ui-grid-exporter ui-grid-edit ui-grid="gridOptions">
                <div class="watermark" ng-show="!gridOptions.data.length"><span translate="NoDataAvailable"></span></div>
            </div>
            <div class="pagination-container">
                <span>本页{{curPageItemCount}}条记录,共{{pagination.totalCount}}条记录</span>
                <div id="totalInvoicePage" class="common-pagination" style="display:none;">
                </div>
            </div>
        </div>
 
    </div>



</div>




<script type="text/javascript">
    var isExpanded = true;
    $(document).ready(function () {
        ReAlignUI();
        //LoadFilterPopup();
        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>