<div id="wrapper">
    <div id="header">
        <div class="title">
            <span translate="TaxDocumentManage"></span>
        </div>

        <div class="summary-wrapper clearfix">
            <div class="issue">
                <!--<i class="fa fa-calendar-check-o" aria-hidden="true" ui-sref="taxTaskManage"></i>-->
                <span><i class="fa fa-calendar-check-o issueLink" aria-hidden="true" ui-sref="taxTaskManage"></i>  </span>
            </div>

            <div class="summary-detail-troggle clearfix">
                <div id="mainTab" class="header-troggle-item header-troggle-item-active" translate="OverView" ng-click="showSummary()"></div>
                <div id="detailTab" class="header-troggle-item header-troggle-item-inactive" translate="Detail" ng-click="showDetail()"></div>
            </div>

        </div>

        <!--<div class="calendar-wrapper">
            <input type="text" class="period-picker" id="period-picker" />
            <i class="fa fa-calendar-check-o issue" aria-hidden="true"></i>
        </div>-->


    </div>

    <!-- 概览 -->
    <div id="main">
        <div id="left">
            <div class="tab-wrapper clearfix">
                <div id="tabBtDoc" class="tab tab-active" ng-click="onClickTab($event)" translate="DocumentType"></div>
                <div id="tabBtCompany" class="tab tab-inactive" ng-click="onClickTab($event)" translate="OrganizationDesc"></div>
            </div>

            <div id="tabDoc" class="left-nav left-nav-show">
                <ul>
                    <li ng-repeat="c in taxCategoryNav track by $index" id="{{c.id}}" ng-click="onClickDocCategory($event,c)">{{c.name}}</li>
                </ul>
            </div>


            <div id="tabCompany" class="left-nav left-nav-hidden">
                <ul>
                    <li ng-repeat="o in org track by $index">{{o.name}}</li>
                </ul>
            </div>


        </div>
        <div id="right">
            <div class="title">
                <div class="period-picker">
                    <input type="text" id="period-picker" style="height: 28px; padding-left: 5px; border-radius:5%" />
                    <span id="summaryUpload" ng-click="showUpload(false)"><i class="fa fa-upload" aria-hidden="true"></i></span>
                </div>
            </div>

            <div class="grid-content">

                <table id="contentTb">
                    <tr>
                        <th ng-repeat="h in taxDocTypeGridViewDataSource.header track by $index">{{h.name}}</th>
                    </tr>
                    <tr ng-repeat="r in taxDocTypeGridViewDataSource.row track by $index">

                        <td ng-repeat="c in taxDocTypeGridViewDataSource.row[$index] track by $index" ng-click="onClickDocTypeCell($event,c)">{{c.name}}</td>
                    </tr>
                </table>

                <!-- 机构Table静态页面 -->
                <table id="orgTb">
                    <tr>
                        <td>{{'CIT' | translate}}</td>
                        <td>{{'NonTaxation'| translate}}</td>
                        <td>{{'AssetLoss' | translate}}</td>
                        <td>{{'DonationInfor' | translate}}</td>
                        <td>{{'InvestmentIncome' | translate}}</td>
                        <td>{{'ResearchCosts' | translate}}</td>
                        <td>{{'Reduction' | translate}}</td>
                        <td>{{'DutyPaid' | translate}}</td>
                    </tr>
                    <tr>
                        <td></td>
                        <td>1</td>
                        <td ng-click="showDocumentDetail('1100','5d17b9f2-d5d2-452c-ae67-8364b6e1e412')">2</td>
                        <td>1</td>
                        <td>1</td>
                        <td ng-click="showDocumentDetail('1250','5d17b9f2-d5d2-452c-ae67-8364b6e1e412')">3</td>
                        <td>1</td>
                        <td>1</td>
                    </tr>
                    <tr>
                        <td>{{'VAT' | translate}}</td>
                        <td>{{'DeductionList' | translate}}</td>
                        <td>{{'ExemptioinGoods' | translate}}</td>
                        <td>{{'ReturnExemption' | translate}}</td>
                        <td>{{'Anticounterfeiting' | translate}}</td>
                        <td>{{'FinancialStatement' | translate}}</td>
                        <td>{{'DutyPaid' | translate}}</td>
                        <td></td>
                    </tr>
                    <tr>
                        <td></td>
                        <td>2</td>
                        <td>3</td>
                        <td>1</td>
                        <td>2</td>
                        <td>3</td>
                        <td>4</td>
                        <td>1</td>
                    </tr>
                    <tr>
                        <td>{{'SpecialTasks' | translate}}</td>
                        <td>{{'TaxAuditTitle' | translate}}</td>
                        <td>{{'TaxInspection' | translate}}</td>
                        <td>{{'TaxTreatmentRecord' | translate}}</td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                    </tr>
                    <tr>
                        <td></td>
                        <td>4</td>
                        <td>1</td>
                        <td>1</td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                    </tr>
                </table>

            </div>


        </div>
    </div>

    <!-- 详细 -->
    <div id="detailMain" style="display:none">

        <div class="detail-header clearfix">
            <div class="detail-upload-group">
                <div><label>{{'DocumentCategory' | translate}}</label></div>
                <div id="ddlDetailDocCategory" dx-drop-down-box="detailDocCategoryOption" style="width:58%">
                    <div data-options="dxTemplate: { name: 'content' }">
                        <div dx-tree-view="detailDocCategoryOption.treeView"></div>
                    </div>
                </div>
            </div>

            <div class="detail-upload-group">
                <div><label>{{'OrganizationDesc' | translate}}</label></div>
                <div id="ddlDetailDocCategory" dx-drop-down-box="detailOrgOptions">
                    <div data-options="dxTemplate: { name: 'content' }">
                        <div dx-tree-view="detailOrgOptions.treeView"></div>
                    </div>
                </div>

            </div>

            <div class="detail-upload-group">
                <div><label>{{'DocumentPeriod' | translate}}</label></div>
                <div class="detail-upload-group-date-range clearfix">
                    <div id="detailDateExpiredFrom"></div>
                    <div id="detailDateExpiredTo"></div>
                    <span id="detailSearch" ng-click="onClickSearchDetail()"><i class="fa fa-search" aria-hidden="true"></i></span>
                </div>
            </div>

        </div>

        <div class="detail-content">
            <div ui-grid="gridDocumentQueryDetailOptions" style="width: 100%; height: 100%;" ui-grid-resize-columns></div>
        </div>

    </div>


    <!--文档上传弹出框-->
    <div class="modal fade" id="modalUploadFile" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" data-backdrop="static" data-keyboard="false">
        <div class="modal-dialog" style="width:800px;" role="document">
            <div class="modal-content" style="height:520px">

                <div id="upload-wrapper">
                    <div class="" id="upload-header">
                        <div>{{'UploadDocument' | translate}}</div>
                    </div>

                    <div id="upload-main" class="clearfix">
                        <div class="upload-left">
                            <div class="upload-group">
                                <div>
                                    <label for="ddlDocType">{{'DocTypeColon' | translate}}</label>
                                </div>
                                <!--<div id="ddlDocType"></div>-->

                                <div id="ddlMultiDocType" dx-drop-down-box="docTypeMultiOptions" class="year-filter">
                                    <div data-options="dxTemplate: { name: 'content' }">
                                        <div id="docTypeMultiDropDown" dx-tree-view="docTypeMultiOptions.treeView"></div>
                                    </div>
                                </div>

                                <div>
                                    <span id="docViewDocType">{{docViewDocTypeName}}</span>
                                </div>
                                                                                       
                            </div>

                            <div class="upload-group">
                                <div>
                                    <label for="ddlDocName">{{'DocNameColon' | translate}}</label>
                                </div>
                                <div id="ddlDocName"></div>

                            </div>

                            <div class="upload-group" ng-show="showProjectCode">
                                <div> <label for="projecCode">{{'ProjectCodeColon' | translate}}</label></div>
                                <div><input type="text" id="projecCode" name="projecCode"></div>
                            </div>

                            <div class="upload-group" ng-show="showAmount">
                                <div> <label for="amount">{{'AmountColon' | translate}}</label></div>
                                <div><input type="text" id="amount" name="amount"></div>

                            </div>


                            <div class="upload-group">
                                <div><label for="dllOrg">{{'OrganizationColon' | translate}}</label></div>
                                <!--<div><input type="text" id="dllOrg" name="dllOrg"></div>-->


                                <div id="dllOrg" dx-drop-down-box="orgFilterOptions" class="year-filter">
                                    <div data-options="dxTemplate: { name: 'content' }">
                                        <div dx-tree-view="orgFilterOptions.treeView"></div>
                                    </div>
                                </div>

                            </div>

                            <div class="upload-group">
                                <div><label>{{'EffectiveInColon' | translate}}</label></div>
                                <div id="uploadDateWrapper" class="clearfix">
                                    <div id="dateExpiredFrom"></div>
                                    <div>{{'Duration' | translate}}</div>
                                    <div id="dateExpiredTo"></div>
                                </div>

                            </div>

                            <div class="upload-group">
                                <div><label for="txtRemark">{{'RemarkColon' | translate}}</label></div>
                                <div><input type="text" id="txtRemark" name="txtRemark"></div>
                            </div>
                        </div>

                        <div class="upload-right">
                            <ul style="height: 350px">
                                <li class="card" ng-repeat="f in selectedUploadFiles track by $index">
                                    <img src="{{f.img}}">
                                    <div>{{f.header}}</div>
                                </li>
                            </ul>
                        </div>

                    </div>
                    <div id="upload-foot">
                        <button id="btUpload" class="upload-bt upload-bt-confirm" type="file" multiple="" ngf-select="uploadFiles($files, $invalidFiles)" accept="*" translate="ButtonBrowser"></button>
                        <input type="button" id="btUploadCance" class="upload-bt upload-bt-cancel float-right" value="{{'Cancel' | translate}}" data-dismiss="modal">
                        <input type="button" id="btUpload" class="upload-bt upload-bt-confirm float-right" value="{{'Confirm' | translate}}" ng-click="uploadFileToServer(fileUploadToServer)">
                    </div>
                </div>
            </div>
        </div>
    </div>


    <!-- 查看文档 -->
    <div class="modal fade" id="modalDocumentDetail" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" data-backdrop="static" data-keyboard="false">
        <div class="modal-dialog" style="width:1200px; height:800px;" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <div class="modal-title">
                        <span>{{'DocumentDetail' | translate}}</span>
                        <span id="viewDocumentUpload">
                            <span><i class="fa fa-download" aria-hidden="true"></i>{{'Export' | translate}}</span>&nbsp;&nbsp;
                            <span ng-click="showUpload(true)"><i class="fa fa-upload" aria-hidden="true"></i>{{'Upload' | translate}}</span>
                        </span>
                    </div>

                </div>

                <div class="modal-body">
                    <div ui-grid="gridDocumentDetailOptions" style="width: 100%; height: 100%;" ui-grid-resize-columns ui-grid-exporter></div>
                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-customer" translate="ButtonClose" data-dismiss="modal"></button>
                </div>

            </div>
        </div>
    </div>



</div>