<div class="output-invoice-edit-wrapper" atms-permission permission-control-type="prohibit" permission-code="{{$root.vatPermission.outputInvoice.bdInvoice.queryCode}}">
    <div class="header-title">
        <div style="margin: 10px 0;">
            <a href="#/outputInvoiceManage/imported" translate="VehicleCaseIssuing"></a>
            <span>/</span>
            <span translate="EditFapiaoDetails"></span>
        </div>
        <div style="display:inline-block"><span class="title-name" translate="EditFapiaoDetails"></span> </div>
    </div>
    <div class="edit-content-container">
        <div class="header">
            <div class="search-panel" style="min-width: 1100px;overflow-x: auto;">
                <table class="table borderless table-bottom">
                    <tr>
                        <td><span class="lbl-name" translate="VIN"></span>:</td>
                        <td>
                            <div dx-text-box="searchEntityOptions.txtVINOptions"></div>
                        </td>
                        <td><span class="lbl-name" translate="InvoiceCaseNumber"></span></td>
                        <td>
                            <div dx-text-box="searchEntityOptions.txtInvoiceCaseNumberOptions"></div>
                        </td>
                        <td>
                            <span class="lbl-name" translate="CommissionableStore"></span> <span class="lbl-name">:</span>

                        </td>
                        <td><div dx-text-box="searchEntityOptions.txtCommissionableStoreOptions"></div></td>
                        <td>
                            <button type="button" class="btn btn-tesla-primary search-btn" style="height: 28px;" ng-click="searchList()" translate="Search"></button>
                        </td>
                    </tr>
                </table>
            </div>
        </div>
        <div class="body">
            <div class="buttom-row" style="position: relative;z-index: 9;width: 70%;padding-bottom: 4px;">
                <div class="left-side">
                    <button type="button" atms-permission permission-code="{{$root.vatPermission.outputInvoice.mappingConfig.queryCode}}" class="btn btn-secondary" style="height: 28px;margin-right: 1em;" ng-click="eventService.showMapping()" translate="MappingConfiguration"></button>
                    <!-- <button type="button" class="btn btn-tesla-primary" ng-click="preview()" translate="Preview"></button> -->

                    <button type="button" atms-permission permission-code="{{$root.vatPermission.outputInvoice.bdInvoice.autoPrintBDInvoiceCode}}" class="btn btn-secondary print" style="height: 28px;margin-right: 1em;" translate="Print" ng-click="openSelectSalesInfoAndTaxControlDisk()" atms-permission></button>

                    <button type="button" atms-permission permission-code="{{$root.vatPermission.outputInvoice.bdInvoice.cancelInvoiceCode}}" class="btn btn-tesla-defaut" translate="CancelIssuing" style="height: 28px;margin-right: 1em;" ng-click="cancelPrintBDInvoice()" atms-permission></button>
                </div>
                <div class="right-side">
                </div>
            </div>
            <div class="edit-grid-container">
                <div id="invoiceEditGridContainer" dx-data-grid="invoiceEditGridOptions" dx-item-alias="invoice">
                    <div data-options="dxTemplate: {name: 'paymentDetail'}">
                        <div class="internal-grid-container">
                            <div class="bold-row">{{'caseNumberColon'|translate}}&nbsp; {{invoice.data.caseNumber}}</div>
                            <div class="internal-grid" dx-data-grid="invoiceEditGridOptions.paymentDetailOptions(invoice.data.paymentDetails)"></div>
                        </div>
                    </div>
                </div>
            </div>


        </div>
    </div>
    <script type="text/ng-template" id="printInvoiceListModal.html">
        <!-- 弹框进度条 -->
        <div class="modal-header">
            <span class="close" ng-click="cancel()" aria-hidden="true">×</span>
            <div class="modal-title" style="font-weight: bold;">{{'PrintInvoiceProgress' | translate }}</div>
        </div>
        <div class="print-invoice-list-modal modal-body">
            <perfect-scrollbar class="scroller" wheel-propagation="true" wheel-speed="1" min-scrollbar-length="20">
                <div ng-repeat="task in editModel.tasks" class="task">
                    <span class="text-view" title="{{task.name}}">{{task.name}}</span>
                    <span ng-if="task.status == 'Unstarted'" class="text-view" title="{{task.text}}">{{task.text}}</span>
                    <span ng-if="task.status == 'Unstarted'" style="align-content:center;"><i class="fa fa-hourglass-o" aria-hidden="true" style="font-size:18px;"></i></span>
                    <span ng-if="task.status == 'Completed'" class="text-view" title="{{task.text}}">{{task.text}}</span>
                    <span ng-if="task.status == 'Completed'" style="align-content:center;"><i class="fa fa-check" aria-hidden="true" style="color:#73BF00;font-size:28px;"></i></span>
                    <span ng-if="task.status == 'Processing'" class="text-view" title="{{task.text}}">{{task.text}}</span>
                    <!--<span ng-if="task.status == 'processing'" class='loader--audioWave' />-->
                    <span ng-if="task.status == 'Processing'" class='load' style="align-content:center;">
                        <span class="rect1"></span>
                        <span class="rect2"></span>
                        <span class="rect3"></span>
                        <span class="rect4"></span>
                        <span class="rect5"></span>
                        <!--<img src="/app-resources/images/loading.gif" alt="loading...">-->
                    </span>
                    <span ng-if="task.status == 'Error'" class="text-view" style="color:red;" title="{{task.text}}">{{task.text}}</span>
                    <span ng-if="task.status == 'Error'" class="text-view" style="color:red;align-content:center;"><i class="fa fa-times" aria-hidden="true" style="color:red;font-size:28px;"></i></span>
                </div>
            </perfect-scrollbar>
        </div>
        <!--   <div class="modal-footer" style="padding-left: 37px;">
              <button type="button" class="btn btn-primary" ng-click="save()">{{'Confirm' | translate }}</button>
              <button type="button" class="btn btn-default" ng-click="cancel()">{{'Cancel' | translate }}</button>
          </div> -->
    </script>


    <script type="text/ng-template" id="fapiaoIssuingConfirmModal.html">
        <!-- 选择 sales 信息和 tax control disk -->
        <div class="modal-header" style="background-color: #eee;border-bottom: 1px solid #e5e5e5;">
            <span class="close" ng-click="cancel()" aria-hidden="true">×</span>
            <div class="modal-title" style="font-weight: bold;">{{'FapiaoIssuingConfirm' | translate }}</div>
        </div>
        <div class="modal-body fapiao-Issuing-Confirm">

            <form id="IssuingFapiaoConfirmForm" dx-validation-group="{}">

                <div>{{'PleaseConfirmIssuingEntity' | translate}}</div>
                <div class="select-width" dx-select-box="mainDxOptions.selectSalesOptions" dx-validator="mainDxValidateOptions.selectTaxControlDiskOptions"></div>
                <div>{{'PleaseConfirmIssuingDisc' | translate}}</div>
                <div class="select-width" dx-select-box="mainDxOptions.selectTaxControlDiskOptions" dx-validator="mainDxValidateOptions.selectSalesOptions"></div>
                <div ng-if="inventoryType===3"><span>{{'FapiaoInventory' | translate}}</span><span>{{preIssueEntity.inventory}}</span>&nbsp;<span>{{'Pieces' | translate}}</span>
                    <br/>
                    <span translate="NextInvoiceNoColon"></span>
                    <span>{{preIssueEntity.nextInvoiceNo}}</span>
                    <span translate="NextInvoiceCodeColon"></span>
                    <span>{{preIssueEntity.nextInvoiceCode}}</span></div>

                <div ng-if="inventoryType===2">
                    <span>{{'FapiaoInventory' | translate}}</span><span style="color: red;font-weight: bold;">{{preIssueEntity.inventory}}</span>&nbsp;<span>{{'Pieces' | translate}}</span>
                    <br/>
                    <span translate="NextInvoiceNoColon"></span><span>{{preIssueEntity.nextInvoiceNo}}</span><span translate="NextInvoiceCodeColon"></span><span>{{preIssueEntity.nextInvoiceCode}}</span>
                    <br /><span style="color: red;font-weight: bold;" translate="PaperInvoiceRunningOut"></span>
                </div>

                <div ng-if="inventoryType===1">
                    <span>{{'FapiaoInventory' | translate}}</span><span style="color: red;font-weight: bold;">{{preIssueEntity.inventory}}</span>&nbsp;<span>{{'Pieces' | translate}}</span>

                    <br /><span style="color: red;font-weight: bold;" translate="PaperInvoiceUsedUp"></span>
                </div>

            </form>
        </div>
        <div class="modal-footer" style="padding-left: 37px;">
            <button type="button" class="btn btn-tesla-confirm" ng-disabled="inventoryType<2" ng-click="saveIssuing()">{{'Confirm' | translate }}</button>
            <button type="button" class="btn btn-tesla-cancel" ng-click="cancel()">{{'Cancel' | translate }}</button>
        </div>
    </script>
    <!-- 编辑发票框 -->
    <edit-invoice-modal operate-type="invoiceOperateType" on-closed="closeInvoiceModal(param)" invoice-model="invoiceModel" on-changed="changeInvoiceModal(param)"></edit-invoice-modal>
    <model-mapping-configuration is-open="isOpenMapping"></model-mapping-configuration>
</div>