<div class="extract-invoice-data">
    <!--标题-->
    <div class="nav-wrapper">
        <div class="nav-header" translate="ExtractInvoiceDataTitle"></div>
        <div class="alert alert-warning" style="width:400px;margin-bottom:5px;" ng-show="ImportErrorTab" ng-click="toggleErrorTab()">
            <i class="fa fa-exclamation-circle" aria-hidden="true"></i>{{errorMsg}}
        </div>
    </div>
    <!--导航栏-->
    <div id="tab_total">
        <form class="form-inline" id="navigationForm" name="navigationForm">
            <div class="form-group" ng-style="setButtonWrapStyle()">
                <div class="import-wrapper">
                    <span class="text-bold" translate="SelectedOrganization"></span>:
                    <div class="dropdown" style="margin-left:10px">
                        <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1"
                                data-toggle="dropdown" aria-haspopup="true" aria-expanded="true" style="width: 220px;">
                            {{checkedCompanyTypeList ? ((checkedCompanyTypeList)|limitString:maxTitleLength):('PleaseSelect' | translate)}}
                            <span class="caret" style="float: right "></span>
                        </button>
                        <ul class="dropdown-menu" style="width: 220px;" aria-labelledby="dropdownMenu1">
                            <li><input type="checkbox" ng-model="selectedAll" ng-change="selectAll()"
                                       style="float: left;margin-left: 10px; margin-top: 7px; width: 15px" checked>
                                <span style="margin-left:5px;float: left;">全选</span></li>
                            <li role="separator" class="divider" style="height: 2px;margin: 9px 0;
                                                overflow: hidden;background-color: #e5e5e5;"></li>
                            <li ng-repeat="i in companyList">
                                <div class="checkbox-custom checkbox-default">
                                    <input type="checkbox" ng-model="i.checked" ng-change="selectOne()"
                                           ng-checked="selectedOne"
                                           style="float: left;margin-left: 10px; margin-top: 7px; width: 15px">
                                    <span style="margin-left:5px;">{{i.name}}</span>
                                </div>
                            </li>
                        </ul>
                    </div>
                    <span class="text-bold" translate="InvoiceQJ"></span>:
                    <div class="period-picker" style="margin-left:10px">
                        <input type="text" id="periodDatepicker" class="datepicker imp-subheader" style="width:80px;"
                               readonly="readonly" ng-model="UploadPeriodTime"/>
                        <i class="fa fa-calendar imp-subheader red-color" style="width:20px;"></i>
                    </div>
                    <span class="text-bold" translate="SelectedDataType"></span>:
                    <div class="dropdown" style="margin-left:10px">
                        <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu2"
                                data-toggle="dropdown" aria-haspopup="true" aria-expanded="true" style="width: 180px;">
                            {{checkedFileTypeList ? ((checkedFileTypeList)|limitString:maxTitleLength):('PleaseSelect' | translate)}}
                            <span class="caret" style="float: right "></span>
                        </button>
                        <ul class="dropdown-menu" style="width: 180px;" aria-labelledby="dropdownMenu2">
                            <li><input type="checkbox" ng-model="selectedAllFileType" ng-change="selectAllFile()"
                                       style="float: left;margin-left: 10px; margin-top: 7px; width: 15px" checked>
                                <span style="margin-left:5px;float: left;">全选</span></li>
                            <li role="separator" class="divider" style="height: 1px;margin: 9px 0;
                                                overflow: hidden;background-color: #e5e5e5;"></li>
                            <li ng-repeat="i in fileTypeList">
                                <div class="checkbox-custom checkbox-default">
                                    <input type="checkbox" ng-model="i.checked" ng-change="selectOneFileType()"
                                           ng-checked="selectedOneFile"
                                           style="float: left;margin-left: 10px; margin-top: 7px; width: 15px">
                                    <span style="margin-left:5px;">{{i.type}}</span>
                                </div>
                            </li>
                        </ul>
                    </div>

                    <button type="button" atms-permission permission-control-type="ngIf" permission-code="{{$root.vatPermission.dataImport.balanceSheet.importCode}}"
                            class="btn btn-vat-primary" style="float:right; margin-right: 10px;margin-left: 30px;margin-top: 8px;"
                            translate="ImportBtn"
                            ng-click="callInvoiceApi()"></button>
                </div>
            </div>
        </form>

        <div class="dt-init-wrapper">
            <div class="dx-viewport grid-container">
                <div id="importATStatusGridContainer" dx-data-grid="importATStatusGridOptions"
                     style="margin-top: 30px;">
                </div>
            </div>
            <div class="page-footer">
                <ack-pagination page-options="pagingOptions"
                                refresh-table="refreshConfigGrid()"></ack-pagination>
            </div>
        </div>
    </div>
    <!-- 期间选择弹出框 -->
    <script type="text/ng-template" id="tb-model-period-dropdown.html" class="tb-model-period-dropdow-popup">
        <div class="modal-header">
            <div class="modal-title" style="margin-bottom:10px">
                {{remarksTitle}}<i class="fa fa-times" aria-hidden="true" style="float: right; font-size: 11px; color: #CF2D1B" ng-click="closePeriodSelectModal()"></i>
            </div>
        </div>
        <div class="modal-body">
            <div class="form-group">
                <div>
                    <div id="tbPeriodSelectBox" dx-select-box="selectBox.simple"></div>
                </div>
            </div>
        </div>

        <div class="modal-footer">
            <button type="button" class="btn btn-primary" ng-click="deleteTbData()">{{'Confirm' | translate}}</button>
        </div>

    </script>

    <vat-operate-log period="period" module-type="moduleid" is-show="isShowLog"></vat-operate-log>
</div>