<div id="main">

    <div #divElement id="article-content"></div>
    <ng-template [ngIf]="article">
        <span id="over">over</span>

        <!-- 文章版权 -->
        <div id="copyright">
            <p>本文作者：{{article.author.displayName}} </p>
            <p>{{article.original ? "本文" : "原文"}}链接：{{article.original ? copyRightUrl : article.url}}</p>
            <p>版权声明：转载请注明出处</p>
        </div>

        <nz-divider></nz-divider>
        <div class="article-tag" id="tag">
            <!-- TODO -->
            <span *ngFor="let item of (article.tags||'')" class="tag">
                        <i nz-icon nzTheme="fill" nzType="tag"></i>
                        <a [routerLink]="['/tags/'+item.name]" class="tag">{{item.name}}</a>
            </span>
        </div>

        <div class="article-bAnda">
            <a (click)="toArticle(article.nextArticle.id)" [class.disabled]="!article.nextArticle">
                <i nz-icon nzTheme="outline" nzType="left"></i>
                {{(article.nextArticle && article.nextArticle.title) || '无'}}
            </a>
            <a (click)="toArticle(article.preArticle.id)" [class.disabled]="!article.preArticle"
               id="pre" style="float: right">
                {{(article.preArticle && article.preArticle.title) || '无'}}
                <i nz-icon nzTheme="outline" nzType="right"></i>
            </a>
        </div>

        <!--       TODO:::评论列表             -->
    </ng-template>

    <nz-comment id="f-comment">
        <nz-avatar [nzSrc]="avatarImgUrl" nz-comment-avatar nzIcon="user"></nz-avatar>
        <nz-comment-content>
            <nz-form-item>
                            <textarea [(ngModel)]="comment.content" [disabled]="!user" [nzAutosize]="{ minRows: 2, maxRows: user?6:2 }" nz-input
                                      rows="4"></textarea>
                <span *ngIf="!user">请先 <a [queryParams]="{url:'/article/'+articleId}"
                                          routerLink="/user/login">登录</a></span>
            </nz-form-item>
            <nz-form-item>
                <button (click)="submitComment(true)" [disabled]="!comment.content" [nzLoading]="!user&&submitting"
                        nz-button
                        nzType="primary">评论
                </button>
            </nz-form-item>
        </nz-comment-content>
    </nz-comment>

    <div class="tab">评论</div>
    <div class="tab-bottom"></div>
    <div *ngIf="commentPage&&!commentPage.list.length" class="no-comment-tip">暂无评论，赶快去抢个沙发吧</div>
    <ng-template [ngIf]="commentPage">

        <nz-list [nzLoading]="!commentPage">
            <nz-list-item *ngFor="let comment of commentPage.list">
                <nz-comment [nzAuthor]="comment.fromUser.displayName" [nzDatetime]="comment.date" style="width: 100%">
                    <nz-avatar *ngIf="comment.fromUser.avatarImgUrl" [nzSrc]="comment.fromUser.avatarImgUrl" nz-comment-avatar
                               nzIcon="user">
                    </nz-avatar>
                    <nz-avatar *ngIf="!comment.fromUser.avatarImgUrl" [nzText]="comment.fromUser.displayName" nz-comment-avatar
                               nzIcon="user">
                    </nz-avatar>
                    <nz-comment-content>
                        <p style="font-size: larger">{{ comment.content }}</p>
                    </nz-comment-content>
                    <nz-comment-action>
                        <i nz-icon nzTheme="outline" nzType="message"></i>
                        <button (click)="resp(comment.id,comment.fromUser.displayName)" nz-button nzType="link">回复
                        </button>
                    </nz-comment-action>

                    <nz-list-item *ngFor="let com of comment.respComment">
                        <nz-comment [nzAuthor]="com.fromUser.displayName" [nzDatetime]="com.date">
                            <nz-avatar *ngIf="com.fromUser.avatarImgUrl" [nzSrc]="com.fromUser.avatarImgUrl" nz-comment-avatar
                                       nzIcon="user">
                            </nz-avatar>
                            <nz-avatar *ngIf="!com.fromUser.avatarImgUrl" [nzText]="com.fromUser.displayName" nz-comment-avatar
                                       nzIcon="user">
                            </nz-avatar>
                            <nz-comment-content>
                                <p style="font-size: larger">{{ com.content }}</p>
                            </nz-comment-content>
                            <!--<nz-comment-action>
                                <i nz-icon nzType="message" nzTheme="outline"></i>
                                <button nz-button nzType="link" (click)="resp(comment.id,com.authorName)">回复</button>
                            </nz-comment-action>-->
                        </nz-comment>
                    </nz-list-item>

                    <nz-form-item *ngIf="pid==comment.id">
                        <nz-input-group [nzAddOnBefore]="respName">
                            <textarea [(ngModel)]="content" [disabled]="!user" [nzAutosize]="{ minRows: 2, maxRows: 6 }"
                                      nz-input placeholder="写出你的想法">
                            </textarea>
                            <ng-template #respName>
                                <span>@{{name}}</span>
                            </ng-template>
                        </nz-input-group>
                        <div *ngIf="!user">请先 <a [queryParams]="{url:'/article/'+articleId}"
                                                 routerLink="/user/login">登录</a></div>
                        <button (click)="pid=null" nz-button style="margin-top: 10px;">取消</button>
                        <button (click)="submitComment(false)" [nzLoading]="!user&&submitting" nz-button
                                nzType="primary" style="margin-left: 30px;margin-top: 10px;">回复
                        </button>

                    </nz-form-item>
                </nz-comment>

            </nz-list-item>
        </nz-list>
    </ng-template>


</div>

