<div class="vat-preview-invoice-data" id="mainPreviewDiv">
    <div class="top-area-wrapper" style="margin-top: 10px">
        <!--<button class="filter-button"
                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-invoice-record/vat-preview-invoice-record-search.html">
            <i class="fa fa-filter" aria-hidden="true"></i>
        </button>-->
        <span translate="InvoiceDataTitle" class="text-bold"></span> &nbsp;&nbsp;|&nbsp;&nbsp;<span class="text-bold" translate="InvoiceQJ"></span>:
        <input type="text" class="form-control input-width-middle periodInput" style="position: relative; top: -30px; left: 180px;" id="input-invoice-period-picker" />
        <span ng-click="downloadID()" style="position: relative; top: -61px; left: 95%;"><i class="fa fa-file-excel-o" aria-hidden="true"></i>{{'ExportBtn' | translate}}</span>
    </div>

    <!--<div style="margin-bottom: 8px;margin-left: 30px">
        {{'EnterpriseAccountSetName' | translate}}<span class="numAmount">{{ledgerName}}</span>&nbsp;&nbsp;&nbsp;
        {{'EnterpriseAccountSetCurrency' | translate}}<span class="numAmount">{{currencyCode}}</span>&nbsp;&nbsp;&nbsp;
        {{'IsCloseAccount' | translate}}<span class="numAmount">{{status}}</span>
        {{'ImportTime' | translate}}<span class="numAmount">{{importDate| date:'yyyy-MM-dd hh:mm:ss'}}</span>
    </div>-->

    <div id="filterCriteriaDiv" style="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 criteriaListFirstRow">
            <span title="{{criteria.fullName}}">
                {{criteria.name}}
            </span>
            <a><i class="remove glyphicon glyphicon-remove-sign glyphicon-white" ng-click="doDataFilter(criteria.propertyName)"></i></a>
        </span>
        <span ng-if="criteriaList.length>6"><br /></span>
        <span ng-if="criteriaList.length>6" style="margin-left: 81px; margin-top: 19px; display: inline-block;"></span>
        <span ng-if="criteriaList.length>6" class="tag label label-default" ng-repeat="criteria in criteriaListSecondRow">
            <span title="{{criteria.fullName}}">
                {{criteria.name}}
            </span>
            <a><i class="remove glyphicon glyphicon-remove-sign glyphicon-white" ng-click="doDataFilter(criteria.propertyName)"></i></a>
        </span>
    </div>

    <div id="mainAreaDiv" class="main-area">
        <div class="inputInvoiceGrid" ui-grid-expandable ui-grid="gridOptions">
            <div class="watermark" ng-show="!gridOptions.data.length"><span translate="NoDataAvailable"></span></div>
        </div>
        <div class="pagination-container">
            <span>本页{{curPageItemCount}}条记录,共{{queryInvoiceDataResult.pageInfo.total}}条记录</span>
            <div id="totalInvoicePage" class="common-pagination" style="display:none;">
            </div>
        </div>
    </div>

</div>