<div class="preview-account-voucher" id="mainPreviewDiv">
<!-- 操作按钮 -->
<div class="menu">
    <div class="display-mode">
        <span>{{'Display'|translate}}:</span>
        <div class="mode" id="displayInVoucher" ng-class="!queryParams.isEntryShow?'selected':''" ng-click="voucherShow()" ng-hide="{{isFromReMapping}}">
            <span translate="AccountVoucher_Display_InVoucher"></span>
        </div>
        <div class="mode" id="displayInEntry" ng-class="(queryParams.isEntryShow)?'selected':''" ng-click="entryShow()">
            <span translate="AccountVoucher_Display_InEntry"></span>
        </div>
    </div>
    <div class="filter-menu">
        <div>
            <span class="fa fa-filter"></span>
            <span>{{'AccountVoucher_FilterMode'|translate}}:</span>
        </div>
        <div ng-click="showFilterDialog($event,'#filterMode-normal')" ng-show="filterMode.normal">
            <span translate="AccountVoucher_FilterMode_Normal"></span>
            <span class="fa fa-angle-down"></span>
        </div>
        <div ng-click="showFilterDialog($event,'#filterMode-advanced')" ng-show="filterMode.advanced">
            <span translate="AccountVoucher_FilterMode_Advanced"></span>
            <span class="fa fa-angle-down"></span>

        </div>
        <div ng-click="showFilterDialog($event,'#filterMode-custom')" ng-show="filterMode.custom">
            <span translate="AccountVoucher_FilterMode_Custom"></span>
            <span class="fa fa-angle-down"></span>
        </div>
        <div ng-click="showFilterDialog($event,'#filterMode-debitCrebitAccountCode')" ng-show="filterMode.debitCrebitAccountCode">
            <span translate="AccountVoucher_FilterMode_DebitCrebitAccountCode"></span>
            <span class="fa fa-angle-down"></span>
        </div>


    </div>
    <!--<div>
        <span class="fa fa-edit"></span>
        <span translate="AccountVoucher_Menu_RecordDoubtfulPoint"></span>
    </div>-->
    <!--<div ng-click="exportToExcel()" ng-hide="{{isFromReMapping}}">
        <span class="fa fa-external-link"></span>
        <span translate="ExportBtn"></span>
        <span class="fa fa-angle-down"></span>
    </div>-->

    <div uib-dropdown >
        <span uib-dropdown-toggle>
            <span class="fa fa-external-link"></span>
            <span translate="ExportBtn"></span>
            <span class="fa fa-angle-down"></span>
        </span>
        <ul class="dropdown-menu" uib-dropdown-menu role="menu">
            <li role="menuitem" ng-click="exportToExcel()">导出当前页</li>
            <li role="menuitem" ng-click="exportAllToExcel()">导出全部</li>           
        </ul>
    </div>
    <!--<div>
        <span class="fa fa-info-circle"></span>
        <span translate="Help"></span>
    </div>-->
</div>
<!-- 查询条件显示 -->
<div class="filter-info">
    <span translate="AccountVoucher_AccountVoucher">

        </span>
    <span ng-model="queryString">
            {{queryString}}
        </span>
</div>
<!-- 数据汇总 -->
<div class="data-summary">
    <div>
        <span translate="AccountVoucher_Fields_ItemIDCount"></span>
        <div class="red">
            <span ng-model="itemIDCount">
                    {{itemIDCount}}
                </span>
        </div>
    </div>
    <div>
        <span translate="AccountVoucher_Fields_VIDCount"></span>
        <div class="red">
            <span ng-model="vIDCount">
                    {{vIDCount}}
                </span>
        </div>
    </div>
    <div>
        <span translate="AccountVoucher_Fields_DebitSum"></span>
        <div class="darkred" ng-model="debitSum">
            <span>
                    {{debitSum}}
                </span>
        </div>
    </div>
    <div>
        <span translate="AccountVoucher_Fields_CreditSum"></span>
        <div class="darkred" ng-model="creditSum">
            <span>
                    {{creditSum}}
                </span>
        </div>
    </div>
</div>

<!-- 选择科目代码的树形控件的模板 -->
<script type="text/ng-template" id="account-code.html">

        <div class="filter-ivh-treeview" ng-click="$event.stopPropagation();">
            <div class="modal-header">
                <h3 class="modal-title" id="modal-title" translate="AccountVoucher_Fields_ChoiceAccountCode"></h3>
            </div>
            <div class="modal-body" id="modal-body">
                <div class="account-code flex-end-center">
                    <span translate="AccountCode"></span>
                    <span class="accountName" translate="AccountName"></span>
                    <span class="debitOrCredit" translate="AccountVoucher_Fields_DebitCredit"></span>
                </div>
                <div ivh-treeview="$accountCodeCtrl.treeSrcData" ivh-treeview-options="$accountCodeCtrl.treeViewOps"></div>
            </div>
            <div class="modal-footer">
                <button class="btn btn-primary" ng-click="$accountCodeCtrl.ok()" translate="Confirm"></button>
                <button class="btn btn-default" ng-click="$accountCodeCtrl.cancel()" translate="ButtonCancel"></button>
            </div>
        </div>

    </script>

<!-- 筛选 -> 普通查询 模板 -->
<div class="filter-dialog" style="display: none;" id="filterMode-normal">
    <form class="form-horizontal ng-pristine ng-invalid ng-invalid-required ng-valid">
        <div class="header">
            <span>{{'AccountVoucher_Fields_AndOr'|translate}}:</span>
            <div>
                <div>
                    <input type="radio" value="AND" ng-model="queryParams.andOr" class="ng-pristine ng-untouched ng-valid-required ng-empty ng-invalid ng-invalid-required ng-valid" ng-checked="true">
                    <span class="ng-binding" translate="AccountVoucher_Fields_AND"></span>
                </div>
                <div>
                    <input type="radio" value="OR" ng-model="queryParams.andOr" class="ng-pristine ng-untouched ng-valid ng-empty">
                    <span class="ng-binding" translate="AccountVoucher_Fields_OR"></span>
                </div>
            </div>
            <div>
                <input type="checkbox" ng-model="queryParams.allJe">
                <span translate="AccountVoucher_Fields_AllJe"></span>
            </div>
        </div>

        <div class="body">
            <div class="field">
                <span class="field-name">{{'AccountVoucher_AccountCode'|translate}}:</span>
                <div class="field-input">
                    <div class="ui-select-has-border">
                        <ui-select ng-model="queryParams.selectors.accountCode.selected" search-enabled="false" class="selector" on-select="UpdateDisableStatusManual('accountCode', $item)">
                            <ui-select-match>{{$select.selected.name}}</ui-select-match>
                            <ui-select-choices repeat="item in queryParams.selectors.accountCode.itemArray">
                                <div title="{{item.name}}" ng-bind-html="item.name"></div>
                            </ui-select-choices>
                        </ui-select>
                    </div>
                    <span class="spliter"></span>
                    <div dx-autocomplete="dxControlsOptions.queryAccountCode" dx-item-alias="itemObj">
                        <div class="vat-preview-account-voucher autocomplete-template" data-options="dxTemplate: { name: 'autocompleteAcctCodeItemTemplate' }">
                            <span>
                                    <strong> {{itemObj.acctCode }}</strong>
                                    <strong style="float: right;"> {{(itemObj.direction == 1 ? 'AccountVoucher_Direction_Debit':'AccountVoucher_Direction_Credit')|translate}}</strong>
                                </span>
                            <span style="margin: 5px 0;">
                                    <span> {{itemObj.name }}</span>
                                </span>
                        </div>
                    </div>
                </div>
            </div>

            <div class="field">
                <span class="field-name">{{'AccountVoucher_AccountName'|translate}}:</span>
                <div class="field-input">
                    <div class="ui-select-has-border">
                        <ui-select ng-model="queryParams.selectors.accountName.selected" search-enabled="false" class="selector" on-select="UpdateDisableStatusManual('accountName', $item)">
                            <ui-select-match>{{$select.selected.name}}</ui-select-match>
                            <ui-select-choices repeat="item in queryParams.selectors.accountName.itemArray">
                                <div title="{{item.name}}" ng-bind-html="item.name"></div>
                            </ui-select-choices>
                        </ui-select>
                    </div>
                    <span class="spliter"></span>
                    <div dx-autocomplete="dxControlsOptions.queryAccountName" dx-item-alias="itemObj">
                        <div class="vat-preview-account-voucher autocomplete-template" data-options="dxTemplate: { name: 'autocompleteAccountNameItemTemplate' }">
                            <span>
                                    <strong>{{itemObj.name }} </strong>
                                </span>
                            <span style="margin: 5px 0;">
                                    <span> {{itemObj.acctCode }}</span>
                                    <strong style="float: right;"> {{(itemObj.direction == 1 ? 'AccountVoucher_Direction_Debit':'AccountVoucher_Direction_Credit')|translate}}</strong>
                                </span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="field">
                <span class="field-name">{{'AccountVoucher_Group'|translate}}:</span>
                <div class="field-input">
                    <div class="ui-select-has-border">
                        <ui-select ng-model="queryParams.selectors.group.selected" search-enabled="false" class="selector">
                            <ui-select-match>{{$select.selected.name}}</ui-select-match>
                            <ui-select-choices repeat="item in queryParams.selectors.group.itemArray">
                                <div title="{{item.name}}" ng-bind-html="item.name"></div>
                            </ui-select-choices>
                        </ui-select>
                    </div>
                    <span class="spliter"></span>
                    <input class="form-control inputer" type="text" placeholder="{{'AccountVoucher_Placeholder_Text'|translate}}" ng-model="queryParams.inputs.group" ng-disabled="!queryParams.selectors.group.selected.id">
                </div>
            </div>
            <div class="field">
                <span class="field-name">{{'AccountVoucher_GroupNum'|translate}}:</span>
                <div class="field-input">
                    <div class="ui-select-has-border">
                        <ui-select ng-model="queryParams.selectors.groupNum.selected" search-enabled="false" class="selector">
                            <ui-select-match>{{$select.selected.name}}</ui-select-match>
                            <ui-select-choices repeat="item in queryParams.selectors.groupNum.itemArray">
                                <div title="{{item.name}}" ng-bind-html="item.name"></div>
                            </ui-select-choices>
                        </ui-select>
                    </div>
                    <span class="spliter"></span>
                    <input class="form-control inputer" type="text" ng-model="queryParams.inputs.groupNum" placeholder="{{'AccountVoucher_Placeholder_Text'|translate}}" ng-disabled="!queryParams.selectors.groupNum.selected.id">
                </div>
            </div>
            <div class="field">
                <span class="field-name">{{'AccountVoucher_Summary'|translate}}:</span>
                <div class="field-input">
                    <div class="ui-select-has-border">
                        <ui-select ng-model="queryParams.selectors.summary.selected" search-enabled="false" class="selector">
                            <ui-select-match>{{$select.selected.name}}</ui-select-match>
                            <ui-select-choices repeat="item in queryParams.selectors.summary.itemArray">
                                <div title="{{item.name}}" ng-bind-html="item.name"></div>
                            </ui-select-choices>
                        </ui-select>
                    </div>
                    <span class="spliter"></span>
                    <input class="form-control inputer" type="text" ng-model="queryParams.inputs.summary" placeholder="{{'AccountVoucher_Placeholder_Text'|translate}}" ng-disabled="!queryParams.selectors.summary.selected.id">
                </div>
            </div>
            <div class="field">
                <span class="field-name">{{'AccountVoucher_Period'|translate}}:</span>
                <div class="field-input">
                    <div dx-date-box="dxControlsOptions.queryPeriodFrom.ControlOption"></div>
                    <span class="spliter">-</span>
                    <div dx-date-box="dxControlsOptions.queryPeriodTo.ControlOption"></div>
                    <!-- rangPicker 无法删除值,暂时使用 日期控件替换以达到可删除可输入最大值和最小值得需求 -->
                    <!--<input type="text" class="form-control inputer" id="period-picker" style="width: 100% !important;"/>-->
                </div>
            </div>
            <div class="field">
                <span class="field-name">{{'AccountVoucher_Date'|translate}}:</span>
                <div class="field-input">
                    <div dx-date-box="dxControlsOptions.queryDateFrom.ControlOption"></div>
                    <span class="spliter">-</span>
                    <div dx-date-box="dxControlsOptions.queryDateTo.ControlOption"></div>
                </div>
            </div>
            <div class="field">
                <span class="field-name">{{'AccountVoucher_Debit'|translate}}:</span>
                <div class="field-input">
                    <input class="form-control inputer" ng-model="queryParams.inputs.debit.from" maxlength="18" placeholder="{{'AccountVoucher_Placeholder_Amount'|translate}}">
                    <span class="spliter">-</span>
                    <input class="form-control inputer" ng-model="queryParams.inputs.debit.to" maxlength="18" placeholder="{{'AccountVoucher_Placeholder_Amount'|translate}}">
                </div>
            </div>
            <div class="field">
                <span class="field-name">{{'AccountVoucher_Credit'|translate}}:</span>
                <div class="field-input">
                    <input class="form-control inputer" ng-model="queryParams.inputs.credit.from" maxlength="18" placeholder="{{'AccountVoucher_Placeholder_Amount'|translate}}">
                    <span class="spliter">-</span>
                    <input class="form-control inputer" ng-model="queryParams.inputs.credit.to" maxlength="18" placeholder="{{'AccountVoucher_Placeholder_Amount'|translate}}">
                </div>
            </div>
        </div>

        <div class="footer">
            <button class="btn btn-primary" ng-click="selectVoucher()">
                <span class="fa fa-chevron-down" aria-hidden="true"> </span> <span translate="Confirm"></span>
            </button>
            <button class="btn btn-default" ng-click="resetSelectCondition()">
                <span class="fa fa-times" aria-hidden="true"> </span> <span translate="Reset"></span>
            </button>
        </div>
    </form>
</div>

<!-- 筛选 -> 高级查询 模板 -->
<div class="filter-dialog " style="display: none;" id="filterMode-advanced"></div>

<!-- 筛选 -> 自定义查询 模板 -->
<div class="filter-dialog " style="display: none;" id="filterMode-custom"> </div>

<!-- 筛选 -> 借/贷方关联科目查询 模板 -->
<div class="filter-dialog " style="display: none;" id="filterMode-debitCrebitAccountCode"> </div>

<!-- 查询结果数据展示列表 -->
<div id="mainAreaDiv" class="main-area">
    <div id="gridContainer"></div>
    <div class="pagination-container">
        <div id="totalVoucherPage" class="common-pagination" style="display: none;">
        </div>
    </div>
    <!--*******************************************************************************************-->
    <!--For Export ONLY-->
    <div style="display:none;">
        <table id="exportEntryTable">
            <tr>
                <td><span translate="AccountVoucher_DataGrid_ColPeriod"></span></td>
                <td><span translate="AccountVoucher_DataGrid_ColDate"></span></td>

                <td><span translate="AccountVoucher_DataGrid_ColGroup"></span></td>
                <td><span translate="AccountVoucher_DataGrid_ColVID"></span></td>

                <td><span translate="AccountVoucher_DataGrid_ColSummary"></span></td>
                <td><span translate="AccountVoucher_DataGrid_ColAcctCodeAndNameShow"></span></td>

                <td><span translate="AccountVoucher_DataGrid_ColStdCodeAndNameShow"></span></td>
                <td><span translate="AccountVoucher_DataGrid_ColDebit"></span></td>
                <td><span translate="AccountVoucher_DataGrid_ColCredit"></span></td>
            </tr>
            <tr ng-repeat="exportData in exportEntryDataList" on-finish-render="ngEntryRepeatFinished">
                <td>{{exportData.period}}</td>
                <td>{{exportData.date}}</td>
                <td>{{exportData.group}}</td>
                <td>{{exportData.vid}}</td>
                <td>{{exportData.summary}}</td>
                <td>{{exportData.acctCodeAndNameShow}}</td>
                <td>{{exportData.stdCodeAndNameShow}}</td>
                <td>{{exportData.debit}}</td>
                <td>{{exportData.credit}}</td>

            </tr>
        </table>
    </div>

    <div style="display:none;">
        <table id="exportVoucherTable">
            <tr>
                <td><span translate="AccountVoucher_DataGrid_ColPeriod"></span></td>
                <td><span translate="AccountVoucher_DataGrid_ColDate"></span></td>

                <td><span translate="AccountVoucher_DataGrid_ColGroup"></span></td>
                <td><span translate="AccountVoucher_DataGrid_ColVID"></span></td>

                <td><span translate="AccountVoucher_DataGrid_ColDebitSum"></span></td>
                <td><span translate="AccountVoucher_DataGrid_ColCreditSum"></span></td>
               
            </tr>
            <tr ng-repeat="exportData in exportVoucherDataList" on-finish-render="ngVoucherRepeatFinished">
                <td>{{exportData.period}}</td>
                <td>{{exportData.date}}</td>
                <td>{{exportData.group}}</td>
                <td>{{exportData.vid}}</td>
                <td>{{exportData.debitSum}}</td>
                <td>{{exportData.creditSum}}</td>               
            </tr>
        </table>
    </div>
    <!--For Export ONLY-->
    <!--*******************************************************************************************-->
</div>
<vat-parent-code-modal u-backend-data="getCIT" is-show="isShowParentCodePop" on-confirm-selection="confirmCodes(confirmedRecords)" on-cancel-selection="cancelCodes()"></vat-parent-code-modal>
</div>