<div id="vat-container">

    <div id="vatHeader" class="vat-header animated" animation-end="headerAnimationEnd($event)"
         ng-class="[{ 'fadeOutUp': menuState === menuStates.collapsing }, { 'fadeInDown': menuState === menuStates.expanding }, { 'collapsed': menuState === menuStates.collapsed }]">
        <div>
            <span class="vat-title"  translate="VATTitle"></span>
            <a ui-sref="overview"><i class="fa fa-angle-left vat-subheader red-color" style="font-size:30px;margin-top:-5px;"></i></a>
            <span class="vat-subheader" style="margin:0px 20px 0px 0px;font-weight:bold" title="{{projectName}}">{{projectName | limitString:15}}</span>
            <!--<span class="vat-subheader" style="margin:0px 20px 0px 0px;font-weight:bold">{{projectName}}</span>-->
            <span class="project-statuts-title">
                <i id="imgProjectStatus" class="fa fa-lightbulb-o"
                    ng-class="{'project-statuts-title-i-inactive' : layoutVatSession.project.projectStatusList[period] === 10}"
                    aria-hidden="true" ng-click="showProjectStatus()">&nbsp;&nbsp;{{statusTitle}}</i>
            </span>
            <!--<i id="imgProjectStatus" class="fa fa-info" aria-hidden="true" ng-click="showProjectStatus()"></i>-->
            <i class="fa fa-calendar vat-subheader red-color" style="font-size:20px;"></i>
            <input type="text" id="vatDatepicker" class="datepicker vat-subheader" style="border-width:0;outline:none;" readonly="readonly" />
            <div id="vat-menu-buttons" style="display:inline-block;">
                <a ng-repeat="menu in menus" ui-sref-active="active" ng-click="setReportSession(menu.name);" ui-sref=".{{menu.state}}"
                   atms-permission permission-control-type="ngIf" permission-code="{{menu.permission}}">{{menu.name | translate}}</a>
            </div>
            <!--<button class="btn btn-vat-primary" translate="TriggerMessageSchedulerJob" ng-click="triggerSchedulerJob()"></button>-->


        </div>


        <!--<div id="vat-menu-buttons">
            <a ng-repeat="menu in menus" ui-sref-active="active" ui-sref=".{{menu.name}}"><span>{{menu.num}}</span>{{menu.name | translate}}</a>
        </div>-->
    </div>

    <div id="menuCollapseBtn" ng-class="[{ 'slideup': menuState === menuStates.collapsing }, { 'slidedown': menuState === menuStates.expanding }]">
        <a ng-show="menuState === menuStates.expanding || menuState === menuStates.expanded" id="a-up" href="" ng-click="collapseMenu(menuStates.collapsing)"><i class="fa fa-angle-up" aria-hidden="true"></i></a>
        <a ng-show="menuState === menuStates.collapsing || menuState === menuStates.collapsed" id="a-down" href="" ng-click="collapseMenu(menuStates.expanding)"><i class="fa fa-angle-down" aria-hidden="true"></i></a>
    </div>

    <div class="vat-content" animation-end="contentAnimationEnd($event)" ui-view
         ng-class="[{ 'slideup': menuState === menuStates.collapsing }, { 'slidedown': menuState === menuStates.expanding }, { 'expanded': menuState === menuStates.collapsing || menuState === menuStates.collapsed }]"></div>

    <!-- 项目状态 -->

    <script type="text/ng-template" id="model-project-status.html" class="model-project-status">
        <!--<div class="modal-header">
            <div class="modal-title">

            </div>
        </div>-->
        <div class="modal-body">
            <i class="fa fa-times" aria-hidden="true" style="float: right; font-size: 11px; color: #CF2D1B" ng-click="closeModal()"></i>
            <ul class="ul-status">
                <li>
                    <i class="fa fa-circle" aria-hidden="true" ng-class="{'i-inactive' : layoutVatSession.project.projectStatusList[period] === 10}">&nbsp;&nbsp;&nbsp;{{startStatusText}}</i>
                    <div class="verticalLine" ng-class="{'verticalLine-inactive' : layoutVatSession.project.projectStatusList[period] === 10}">&nbsp;</div>
                </li>
                <li ng-click="showSubStatus()">
                    <i class="fa fa-dot-circle-o" aria-hidden="true" ng-class="{'i-inactive' : layoutVatSession.project.projectStatusList[period] < 20}">&nbsp;&nbsp;&nbsp;{{'ProjectStatusImported' | translate }}</i>
                    <div class="verticalLine" ng-class="{'verticalLine-inactive' : layoutVatSession.project.projectStatusList[period] < 20, 'verticalLine-add-bottom-line' :  displaySubStatus}">&nbsp;</div>
                    <ul ng-show="displaySubStatus">
                        <li ng-repeat="item in subStatusList track by $index">
                            <i class="fa fa-check-circle" aria-hidden="true" ng-class="{'i-inactive' : !item.isImported}">&nbsp;&nbsp;{{item.name }}</i>
                            <div ng-show="$index < subStatusList.length - 1" class="vertical-bottom-line" ng-class="{'verticalLine-inactive' : !item.isImported}">&nbsp;</div>
                        </li>
                    </ul>
                </li>
                <li>
                    <i class="fa fa-circle" aria-hidden="true" ng-class="{'i-inactive' : layoutVatSession.project.projectStatusList[period] < 30}">&nbsp;&nbsp;&nbsp;{{'ProjectStatusAcccountMapSubmitted' | translate }}</i>
                    <div class="verticalLine" ng-class="{'verticalLine-inactive' : layoutVatSession.project.projectStatusList[period] < 30}">&nbsp;</div>
                </li>
                <li>
                    <i class="fa fa-circle" aria-hidden="true" ng-class="{'i-inactive' : layoutVatSession.project.projectStatusList[period] < 40}">&nbsp;&nbsp;&nbsp;{{'ProjectStatusGenerated' | translate }} </i>
                    <div class="verticalLine" ng-class="{'verticalLine-inactive' : layoutVatSession.project.projectStatusList[period] < 40}">&nbsp;</div>
                </li>
                <li>
                    <i class="fa fa-circle" aria-hidden="true" ng-class="{'i-inactive' : layoutVatSession.project.projectStatusList[period] < 50}">
                        &nbsp;&nbsp;{{'ProjectStatusReportSubmitted' | translate }}
                        &nbsp;&nbsp;<span ng-show="submitDetailDto.isDone" style="font-size:12px">{{submitDetailDto.finishedData}}</span>
                    </i>
                    <div class="verticalLine" ng-class="{'verticalLine-inactive' : layoutVatSession.project.projectStatusList[period] < 50}">&nbsp; </div>
                </li>
                <li ng-click="showApproveDetail()">
                    <i class="fa fa-dot-circle-o"  aria-hidden="true" ng-class="{'i-inactive' : layoutVatSession.project.projectStatusList[period] < 60}">&nbsp;&nbsp;&nbsp;{{approveTitle}}</i>
                    <div class="verticalLine" ng-class="{'verticalLine-inactive' : layoutVatSession.project.projectStatusList[period] < 60, 'verticalLine-add-bottom-line' :  displayApproveDetails}">&nbsp;</div>
                    <ul ng-show="displayApproveDetails">
                        <li ng-repeat="item in approveDetailList track by $index">
                            <i class="fa fa-circle" aria-hidden="true" ng-class="{'i-inactive' : item.ngClassInActive}">
                                &nbsp;&nbsp;{{item.name }} <span ng-class="{'i-inactive' : item.ngClassInActive}">&nbsp;&nbsp;&nbsp;&nbsp;{{item.finishedData}}</span>
                            </i>
                            <div ng-show="$index < approveDetailList.length - 1" class="vertical-bottom-line" ng-class="{'verticalLine-inactive' : !item.isDone}">&nbsp;</div>
                        </li>
                    </ul>
                </li>
                <li>
                    <i class="fa fa-circle" aria-hidden="true" ng-class="{'i-inactive' : layoutVatSession.project.projectStatusList[period] < 100}">&nbsp;&nbsp;&nbsp;{{'ProejctStatusCompleted' | translate }} </i>
                </li>

            </ul>
        </div>

        <!--<div class="modal-footer">
            <button type="button" ng-click="closeModal()">{{'CloseButton' | translate }}</button>
        </div>-->
    </script>


</div>