<!--
    Copyright (C) 2019 CMCC, Inc. and others. All rights reserved.

    Licensed under the Apache License, Version 2.0 (the "License");
    you may not use this file except in compliance with the License.
    You may obtain a copy of the License at

            http://www.apache.org/licenses/LICENSE-2.0

    Unless required by applicable law or agreed to in writing, software
    distributed under the License is distributed on an "AS IS" BASIS,
    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
    See the License for the specific language governing permissions and
    limitations under the License.
-->
<div class="action ant-tabs-bar">
    <span>
        <i class="icon">
            <img src="assets/images/customer.png" alt="">
        </i>
         {{"i18nTextDefine_Customer" | translate}} : 
    </span>
    <nz-dropdown [nzTrigger]="'click'" [nzPlacement]="'bottomLeft'">
        <button nz-button nz-dropdown><span>{{customerSelected.name}}</span> <i class="anticon anticon-down"></i>
        </button>
        <ul nz-menu>
            <li nz-menu-item (click)="choseCustomer(item)" *ngFor="let item of customerList"> 
                <a title="{{item.name}}">{{item.name}}</a>
            </li>
        </ul>
    </nz-dropdown>

    <span>
        <i class="icon">
            <img src="assets/images/service-type.png"alt="">
        </i> 
        {{"i18nTextDefine_ServiceType" | translate}} : 
    </span>
    <nz-dropdown [nzTrigger]="'click'" [nzPlacement]="'bottomLeft'">
        <button nz-button nz-dropdown><span>{{serviceTypeSelected.name}}</span> <i class="anticon anticon-down"></i>
        </button>
        <ul nz-menu>
            <li nz-menu-item (click)="choseServiceType(item)" *ngFor="let item of serviceTypeList">
                <a title="{{item.name}}">{{item.name}}</a>
            </li>
        </ul>
    </nz-dropdown>

    <button class="create" nz-button [nzType]="'primary'" (click)="createModal()">
        <i *ngIf="width>1200" class="anticon anticon-plus"></i>
        <span> {{"i18nTextDefine_Create" | translate}} </span>
    </button>
    <app-create-model *ngIf="isVisible" [isVisible]="isVisible" (cancel)="isVisible=$event" (createdModalShow)="createdModalShow($event)"
        [customerList]="customerList" [serviceTypeList]="serviceTypeList" [customerSelected]="customerSelected" [serviceTypeSelected]="serviceTypeSelected">
    </app-create-model>
    
</div>
<nz-layout>
    <div class="top-num">
        <app-top-card
            *ngFor="let item of serviceNunber"
            [serviceDomain]="item.serviceDomain"
            [successNum]="item.Success"
            [failedNum]="item.failed"
            [inProgressNum]="item.InProgress"
            [serviceDetailName]="item.detailName">
        </app-top-card>
    </div>
    <div class="list" id="services-list" [ngClass]="{'listdisplay':listDisplay === true}">
        <nz-table #nzTable [nzData]="tableData" nzShowSizeChanger [nzFrontPagination]="false"
            [nzShowQuickJumper]="true" [nzPageSizeOptions]="[5,10,15,20]" [nzTotal]='total' [(nzPageSize)]="pageSize"
            [(nzPageIndex)]='pageIndex' [nzLoading]="loading" [nzSize]="'middle'"
            (nzPageIndexChange)="searchData()" (nzPageSizeChange)="searchData(true)">
            <thead>
                <tr>
                    <th nzWidth="5%"> {{"i18nTextDefine_NO" | translate}}</th>
                    <th nzWidth="5%"></th>
                    <th nzWidth="20%"> {{"i18nTextDefine_Name" | translate}}</th>
                    <th nzWidth="20%"> {{"i18nTextDefine_InstanceID" | translate}}</th>
                    <th nzWidth="15%"> {{"i18nTextDefine_UseCase" | translate}}</th>
                    <th nzWidth="20%"> {{"i18nTextDefine_Status" | translate}}</th>
                    <th nzWidth="15%"> {{"i18nTextDefine_Action" | translate}}</th>
                </tr>
            </thead>
            <tbody>
                <ng-template ngFor let-data [ngForOf]="nzTable.data" let-i="index">
                    <tr>
                        <td>{{pageSize*(pageIndex-1) + i+1}}</td>
                        <td [nzShowExpand]="data.childServiceInstances?data.childServiceInstances[0]:null" [(nzExpand)]="data.expand"></td>
                        <td>{{data["service-instance-name"] || data.nsName}}</td>
                        <td>{{data["service-instance-id"] || data.nsInstanceId}}</td>
                        <td>
                            <p class="usecase">
                                {{data.serviceDomain}}
                            </p>
                        </td>
                        <td>
                            <span [ngClass]="{'active':data.statusClass==='2001','closed':data.statusClass==='Closed','onboarding':data.statusClass==='Onboarding',
                    'updating':data.statusClass==='Updating','deleting':data.statusClass==='1002','creating':data.statusClass==='1001',
                    'scaling':data.statusClass==='1003','healing':data.statusClass==='1004'}"
                                *ngIf="data.tips !== 'Available' && data.tips !== 'Unavailable'">{{data.tips}}</span>
                            <span *ngIf="data.tips === 'Available' " class="marginLeft10" title = "{{data.serviceStatusInfo}}">
                                <img src="assets/images/wancheng-icon.png" alt="Available">
                            </span>
                            <span *ngIf="data.tips === 'Unavailable' " class="marginLeft10" title = "{{data.serviceStatusInfo}}">
                                <img src="assets/images/shibai-icon.png" alt="Unavailable">
                            </span>
                            <nz-progress *ngIf="data.status === 'In Progress'" [nzPercent]="data.rate" title = "{{data.serviceStatusInfo}}"
                                [nzShowInfo]="false" nzStatus="active"></nz-progress>
                        </td>
                        <td>
                            <i [ngClass]="{'cannotclick':data.status === 'In Progress'||(data.status=='Failed' && data.operationType=='1001')||(data.status==='Failed' && data.operationType=='1002')}"
                                class="anticon anticon-bars" (click)="serviceDetail(data,1)"></i>
                            <i [ngClass]="{'cannotclick':data.status === 'In Progress'}" class="anticon anticon-delete"
                                (click)="deleteModel(data)"></i>
                            <i [ngClass]="{'cannotclick':data.status === 'In Progress'}" class="anticon anticon-ellipsis"
                                (click)="iconMoreShow(data,tableData)" style="transform: rotate(90deg);"></i>

                            <ul *ngIf="data.iconMore==true " class="icon-more">
                                <li (click)="scaleService(data)"
                                    [ngClass]="{'cannotclick':data.serviceDomain!='E2E Service' || data.status == 'In Progress'||(data.status=='Failed' && data.operationType=='1001')||(data.status=='Failed' && data.operationType=='1002')}">
                                    <i class="anticon anticon-scale"></i>
                                    <span> {{"i18nTextDefine_Scale" | translate}} </span>
                                </li>
                                <li (click)="serviceDetail(data,2)"
                                    [ngClass]="{'cannotclick':data.serviceDomain!='CCVPN' || data.status == 'In Progress'||(data.status=='Failed' && data.operationType=='1001')||(data.status=='Failed' && data.operationType=='1002')}">
                                    <i class="anticon anticon-update"></i>
                                    <span> {{"i18nTextDefine_Update" | translate}} </span>
                                </li>
                            </ul>
                        </td>
                    </tr>
                    <tr class="childtr" [nzExpand]="data.expand" *ngFor="let item of data.childServiceInstances?data.childServiceInstances:[]">
                        <td></td>
                        <td></td>
                        <td>{{item["service-instance-id"] || item.nsInstanceId || item.vnfInstanceId}}</td>
                        <td>{{item["service-instance-name"] || item.nsName || item.vnfInstanceName}}</td>
                        <td>
                            <p
                                [ngClass]="{'vnfColor':item.serviceDomain=='vnf','siteColor':item.serviceDomain=='SITE','SDWANColor':item.serviceDomain=='SDWAN'}">
                                {{item.serviceDomain}}
                            </p>
                        </td>
                        <td>
                            <span [ngClass]="{'healing':data.statusClass=='1004'}">{{item.tips}}</span>
                            <nz-progress *ngIf=" item.status == 'In Progress' " [nzPercent]="item.rate"></nz-progress>
                        </td>
                        <td>
                            <i [ngClass]="{'cannotclick':data.serviceDomain!='Network Service' || data.status == 'In Progress'||(data.status=='Failed' && data.operationType=='1001')||(data.status=='Failed' && data.operationType=='1002')}"
                                class="anticon anticon-reload" (click)="healService(item)"></i>
                        </td>
                    </tr>
                </ng-template>
            </tbody>
        </nz-table>

        <app-delete-model
                 *ngIf="deleteModalVisible"
                 [deleteModalVisible]="deleteModalVisible"
                 [thisService]="thisService"
                 [terminationType]="terminationType"
                 [loadingAnimateShow]="loadingAnimateShow"
                 [gracefulTerminationTimeout]="gracefulTerminationTimeout"
                 [templateDeleteSuccessFaild]="templateDeleteSuccessFaild"
                 (cancel)="deleteModalVisible=$event"
                 (deleteModalOK)="deleteModalOK($event,templateDeleteSuccessFaild)"
         >
         </app-delete-model>
        <app-scale-model
                *ngIf="scaleModelVisible"
                [scaleModelVisible]="scaleModelVisible"
                [thisService]="thisService"
                [e2e_nsData]="e2e_nsData"
                [customerSelected]="customerSelected"
                [serviceTypeSelected]="serviceTypeSelected"
                [templatescalestarting]="templatescalestarting"
                [templateScaleSuccessFaild]="templateScaleSuccessFaild"
                (cancel)="scaleModelVisible=$event"
                (scaleModalOK)="scaleModalOK($event,templatescalestarting,templateScaleSuccessFaild)"
        >
        </app-scale-model>
        <app-heal-model
                *ngIf="healModelVisible"
                [healModelVisible]="healModelVisible"
                [thisService]="thisService"
                [nsParams]="nsParams"
                [healActions]="healActions"
                [nsAdditional]="nsAdditional"
                [vnfParams]="vnfParams"
                [vmSelected]="vmSelected"
                [vnfVms]="vnfVms"
                [templatehealstarting]="templatehealstarting"
                [templatehealSuccessFaild]="templatehealSuccessFaild"
                (cancel)="healModelVisible=$event"
                (healModalOK)="healModalOK($event,templatehealstarting,templatehealSuccessFaild)"
        ></app-heal-model>

        <app-notification #notification [isServicesList]="true" [customerSelected]="customerSelected"></app-notification>
        <!-- add notification-->
        <ng-template #templateDeleteSuccessFaild>
            <div class="ant-notification-notice-content">
                <div class="ant-notification-notice-with-icon">
                    <span class="ant-notification-notice-icon">
                        <img src="assets/images/execute-success.png" alt="instance temination is starting"
                            *ngIf="thisService.status == 'Successful'">
                        <img src="assets/images/execute-faild.png" alt="instance temination is starting"
                            *ngIf="thisService.status == 'Failed'">
                    </span>
                    <div class="ant-notification-notice-message"
                        *ngIf="(thisService['serviceDomain'] == 'CCVPN' || thisService['serviceDomain'] == 'SOTN' || thisCreateService['serviceDomain'] == 'MDONS') && thisService.status == 'Successful'">
                        {{ thisService['serviceDomain'] }} &nbsp; {{"i18nTextDefine_InstanceTeminatedSuccessfully" |
                        translate}}
                    </div>
                    <div class="ant-notification-notice-message"
                        *ngIf="(thisService['serviceDomain'] == 'E2E Service') && thisService.status == 'Successful'">
                        E2E &nbsp; {{"i18nTextDefine_InstanceTeminatedSuccessfully" | translate}}
                    </div>
                    <div class="ant-notification-notice-message"
                        *ngIf="(thisService['serviceDomain'] == 'Network Service') && thisService.status == 'Successful'">
                        NS &nbsp; {{"i18nTextDefine_InstanceTeminatedSuccessfully" | translate}}
                    </div>
                    
                    <div class="ant-notification-notice-message"
                        *ngIf="(thisService['serviceDomain'] == 'CCVPN' || thisService['serviceDomain'] == 'SOTN' || thisCreateService['serviceDomain'] == 'MDONS') && thisService.status == 'Failed'">
                        {{ thisService['serviceDomain'] }} &nbsp; {{"i18nTextDefine_InstanceTeminationFailed" |
                        translate}}
                    </div>
                    <div class="ant-notification-notice-message"
                        *ngIf="(thisService['serviceDomain'] == 'E2E Service') && thisService.status == 'Failed'">E2E
                        &nbsp; {{"i18nTextDefine_InstanceTeminationFailed" | translate}}
                    </div>
                    <div class="ant-notification-notice-message"
                        *ngIf="(thisService['serviceDomain'] == 'Network Service') && thisService.status == 'Failed'">
                        NS &nbsp; {{"i18nTextDefine_InstanceTeminationFailed" | translate}}
                    </div>
                    <div class="ant-notification-notice-description">
                        <div class="notificationlist">
                            <p> {{"i18nTextDefine_InstanceName" | translate}} :</p>
                            <span>{{ thisService["service-instance-name"] ||
                                    thisService["nsInstanceName"] }}
                            </span>
                        </div>
                        <div class="notificationlist">
                            <p> {{"i18nTextDefine_Customer" | translate}} :</p>
                            <span>{{ customerSelected.name }}</span>
                        </div>
                        <div class="notificationlist">
                            <p> {{"i18nTextDefine_UseCase" | translate}} :</p>
                            <span>{{ thisService["serviceDomain"] }}</span>
                        </div>
                    </div>
                    <div class="close-icons">{{"i18nTextDefine_Close" | translate}}</div>
                </div>
            </div>
        </ng-template>
        <ng-template #templatescalestarting>
            <div class="ant-notification-notice-content">
                <div class="ant-notification-notice-with-icon">
                        <span class="ant-notification-notice-icon">
                            <img src="assets/images/execute-inproess.png" alt="instance temination is starting">
                        </span>
                    <div class="ant-notification-notice-message">E2E &nbsp;
                        {{"i18nTextDefine_InstanceTeminationStarting" | translate}}
                    </div>
                    <div class="ant-notification-notice-description">
                        <div class="notificationlist">
                            <p> {{"i18nTextDefine_InstanceName" | translate}} :</p>
                            <span>{{ thisService["service-instance-name"] ||
                                    thisService["nsInstanceName"] }}
                                </span>
                        </div>
                        <div class="notificationlist">
                            <p> {{"i18nTextDefine_Customer" | translate}} :</p>
                            <span>{{ customerSelected.name }}</span>
                        </div>
                        <div class="notificationlist">
                            <p> {{"i18nTextDefine_UseCase" | translate}} :</p>
                            <span>{{ thisService["serviceDomain"] }}</span>
                        </div>
                    </div>
                    <div class="close-icons">{{"i18nTextDefine_Close" | translate}}</div>
                </div>
            </div>
        </ng-template>
        <ng-template #templateScaleSuccessFaild>
            <div class="ant-notification-notice-content">
                <div class="ant-notification-notice-with-icon">
                    <span class="ant-notification-notice-icon">
                        <img src="assets/images/execute-success.png" alt="instance temination is starting"
                            *ngIf="thisService.status == 'Successful'">
                        <img src="assets/images/execute-faild.png" alt="instance temination is starting"
                            *ngIf="thisService.status == 'Failed'">
                    </span>
                    <div class="ant-notification-notice-message" *ngIf="thisService.status == 'Successful'">E2E &nbsp;
                        {{"i18nTextDefine_InstanceScaledSuccessfully" | translate}}
                    </div>
                    <div class="ant-notification-notice-message" *ngIf="thisService.status == 'Failed'">E2E &nbsp;
                        {{"i18nTextDefine_InstanceScaleFailed" | translate}}
                    </div>
                    <div class="ant-notification-notice-description">
                        <div class="notificationlist">
                            <p> {{"i18nTextDefine_InstanceName" | translate}} :</p>
                            <span>{{ thisService["service-instance-name"] ||
                                    thisService["nsInstanceName"] }}
                            </span>
                        </div>
                        <div class="notificationlist">
                            <p> {{"i18nTextDefine_Customer" | translate}} :</p>
                            <span>{{ customerSelected.name }}</span>
                        </div>
                        <div class="notificationlist">
                            <p> {{"i18nTextDefine_UseCase" | translate}} :</p>
                            <span>{{ thisService["serviceDomain"] }}</span>
                        </div>
                    </div>
                    <div class="close-icons">{{"i18nTextDefine_Close" | translate}}</div>
                </div>
            </div>
        </ng-template>
        <ng-template #templatehealstarting>
            <div class="ant-notification-notice-content">
                <div class="ant-notification-notice-with-icon">
                        <span class="ant-notification-notice-icon">
                            <img src="assets/images/execute-inproess.png" alt="instance temination is starting">
                        </span>
                    <div class="ant-notification-notice-message">NS &nbsp;
                        {{"i18nTextDefine_InstanceHealingStarting" | translate}}
                    </div>
                    <div class="ant-notification-notice-description">
                        <div class="notificationlist">
                            <p> {{"i18nTextDefine_InstanceName" | translate}} :</p>
                            <span>{{ thisService["service-instance-name"] ||
                                    thisService["nsInstanceName"] }}
                                </span>
                        </div>
                        <div class="notificationlist">
                            <p> {{"i18nTextDefine_Customer" | translate}} :</p>
                            <span>{{ customerSelected.name }}</span>
                        </div>
                        <div class="notificationlist">
                            <p> {{"i18nTextDefine_UseCase" | translate}} :</p>
                            <span>{{ thisService["serviceDomain"] }}</span>
                        </div>
                    </div>
                    <div class="close-icons">{{"i18nTextDefine_Close" | translate}}</div>
                </div>
            </div>
        </ng-template>
        <ng-template #templatehealSuccessFaild>
            <div class="ant-notification-notice-content">
                <div class="ant-notification-notice-with-icon">
                    <span class="ant-notification-notice-icon">
                        <img src="assets/images/execute-success.png" alt="instance temination is starting"
                            *ngIf="thisService.status == 'Successful'">
                        <img src="assets/images/execute-faild.png" alt="instance temination is starting"
                            *ngIf="thisService.status == 'Failed'">
                    </span>
                    <div class="ant-notification-notice-message" *ngIf="thisService.status == 'Successful'">NS &nbsp;
                        {{"i18nTextDefine_InstanceHealedSuccessfully" | translate}}
                    </div>
                    <div class="ant-notification-notice-message" *ngIf="thisService.status == 'Failed'">NS &nbsp;
                        {{"i18nTextDefine_InstanceHealingFailed" | translate}}
                    </div>
                    <div class="ant-notification-notice-description">
                        <div class="notificationlist">
                            <p> {{"i18nTextDefine_InstanceName" | translate}} :</p>
                            <span>{{ thisService["service-instance-name"] ||
                                    thisService["nsInstanceName"] }}
                            </span>
                        </div>
                        <div class="notificationlist">
                            <p> {{"i18nTextDefine_Customer" | translate}} :</p>
                            <span>{{ customerSelected.name }}</span>
                        </div>
                        <div class="notificationlist">
                            <p> {{"i18nTextDefine_UseCase" | translate}} :</p>
                            <span>{{ thisService["serviceDomain"] }}</span>
                        </div>
                    </div>
                    <div class="close-icons">{{"i18nTextDefine_Close" | translate}}</div>
                </div>
            </div>
        </ng-template>
        <ng-template #templateUpdateSuccessFaild>
            <div class="ant-notification-notice-content">
                <div class="ant-notification-notice-with-icon">
                    <span class="ant-notification-notice-icon">
                        <img src="assets/images/execute-success.png" alt="instance temination is starting"
                            *ngIf="thisService.status == 'Successful'">
                        <img src="assets/images/execute-faild.png" alt="instance temination is starting"
                            *ngIf="thisService.status == 'Failed'">
                    </span>
                    <div class="ant-notification-notice-message" *ngIf="thisService.status == 'Successful'">CCVPN &nbsp;
                        {{"i18nTextDefine_InstanceUpdatedSuccessfully" | translate}}
                    </div>
                    <div class="ant-notification-notice-message" *ngIf="thisService.status == 'Failed'">CCVPN &nbsp;
                        {{"i18nTextDefine_InstanceUpdateFailed" | translate}}
                    </div>
                    <div class="ant-notification-notice-description">
                        <div class="notificationlist">
                            <p> {{"i18nTextDefine_InstanceName" | translate}} :</p>
                            <span>{{ thisService["service-instance-name"] ||
                                    thisService["nsInstanceName"] }}
                            </span>
                        </div>
                        <div class="notificationlist">
                            <p> {{"i18nTextDefine_Customer" | translate}} :</p>
                            <span>{{ customerSelected.name }}</span>
                        </div>
                        <div class="notificationlist">
                            <p> {{"i18nTextDefine_UseCase" | translate}} :</p>
                            <span>{{ thisService["serviceDomain"] }}</span>
                        </div>
                    </div>
                    <div class="close-icons">{{"i18nTextDefine_Close" | translate}}</div>
                </div>
            </div>
        </ng-template>
    </div>
    <div class="detailComponent" *ngIf="detailCCVPNShow">
        <app-ccvpn-detail [detailParams]="detailData" [upDateShow]="upDateShow"
            (closeUpdate)="closeCCVPNUpdate($event,templateUpdateSuccessFaild)"
            (closeDetail)="detailCCVPNShow = false;listDisplay = false;"></app-ccvpn-detail>
    </div>
    <div class="detailComponent" *ngIf="detailNSShow">
        <app-e2e-detail [detailParams]="detailData" (closeDetail)="detailNSShow = false;listDisplay = false;">
        </app-e2e-detail> 
    </div>
    <div class="detailComponent" *ngIf="detailshowMDONS">
        <app-mdons-detail [detailParams]="detailData" (closeDetail)="detailshowMDONS = false;listDisplay = false;">
        </app-mdons-detail> 
    </div>
    <div class="createComponent" *ngIf="createshow">
        <app-ccvpn-creation [createParams]="createData" [ccvpn_temParametersContent]="ccvpn_temParametersContent"
            (closeCreate)="closeCreate($event)">
        </app-ccvpn-creation>
    </div>
    <div class="createComponent" *ngIf="createshow2">
        <app-e2e-creation [createParams]="createData" [e2e_ns_temParametersContent]="e2e_ns_temParametersContent"
            (nsCloseCreate)="nsCloseCreate($event)"
            (e2eCloseCreate)="e2eCloseCreate($event)">
        </app-e2e-creation>
    </div>
    <div class="createComponent" *ngIf="showCreateMDONS">
        <app-mdons-creation [createParams]="createData" [mdons_temParametersContent]="mdons_temParametersContent"
        (mdonsCloseCreate)="mdonsCloseCreate($event)">
        </app-mdons-creation>
    </div>
    <!--</div>-->
</nz-layout>
<div class="loading" *ngIf="loadingAnimateShow">
    <img src="assets/images/loading-animate2.gif" alt="loading">
    <p>Please wating……</p>
</div>