import { ChangeDetectorRef, Component } from '@angular/core';
import { Serve, MessageService } from 'pz-unit';
import { Router } from '@angular/router';
import { ServeUrl } from 'environments/environment';

@Component({
    selector: 'app-config',
    template: `
        <nz-modal [(nzVisible)]="isVisible" [nzTitle]="null" (nzOnCancel)="handleCancel()" (nzOnOk)="handleOk()" nzWidth="70vw">
            <h1 style="text-align: center">配置个服务器地址吧</h1>
            <div nz-row style="margin-bottom: 10px">
                <div nz-col [nzSpan]="24">
                    <input nz-input type="text" [(ngModel)]="add">
                </div>
            </div>
            <h4>历史记录</h4>
            <nz-table
                #smallTable
                [nzShowPagination]="false"
                nzSize="small"
                [nzData]="serveLog">
                <thead>
                <tr>
                    <th>服务器地址</th>
                    <th width="130" style="text-align: center">创建时间</th>
                    <th width="90" style="text-align: center">操作</th>
                </tr>
                </thead>
                <tbody>
                <tr *ngFor="let data of smallTable.data">
                    <td>{{data.serve}}</td>
                    <td>{{data.createTime | date: 'yyyy-MM-dd HH:mm'}}</td>
                    <td>
                        <a (click)="saveDeploy(data.serve)">应用</a>
                        <nz-divider nzType="vertical"></nz-divider>
                        <a nz-popconfirm nzTitle="确认操作吗？" (nzOnConfirm)="delDeploy(data.serve)">删除</a>
                    </td>
                </tr>
                </tbody>
            </nz-table>
        </nz-modal>
    `
})
export class ServerConfigComponent {
    public isVisible = false;
    public add: string;
    public serveLog: {serve: string, createTime: Date}[] = [];
    public nowSto = Serve(ServeUrl);

    public constructor(private router: Router, private msg: MessageService,
                       private readonly changeDetectorRef: ChangeDetectorRef) {
        this.serveLog = localStorage.servelog ? JSON.parse(localStorage.servelog) : [];
        this.add = this.nowSto;
        this.msg.configSubject.subscribe(
            (v: boolean) => {
                this.isVisible = v;
                this.changeDetectorRef.detectChanges();
            }
        );
    }

    public saveDeploy(serve?: string) {
        let log = serve ? serve : this.add;
        if (log.lastIndexOf('/') !== log.length - 1 ) {
            log = `${log}/`;
        }
        if ( Serve(ServeUrl) === log ) {
            this.add = log;
            return true;
        } else {
            localStorage.add = log;
            this.add = log;
            this.serveLog = this.serveLog.filter( x => x.serve !== log );
            this.serveLog.unshift({serve: log, createTime: new Date()});
            localStorage.servelog = JSON.stringify(this.serveLog);
            this.msg.success('修改成功，2秒后返回首页');
            setTimeout(() => {
                window.location.replace('/');
            }, 2000);
        }
    }

    public delDeploy(serve?: string) {
        this.serveLog = this.serveLog.filter( x => x.serve !== serve );
        localStorage.servelog = JSON.stringify(this.serveLog);
    }

    public handleOk(): void {
        this.isVisible = false;
        this.saveDeploy();
    }

    public handleCancel(): void {
        this.isVisible = false;
    }
}