<!--评论管理-->
<div class="admin-content" id="comment-manager">
    <div class="admin-content-body">

        <div><strong class="part-title">评论管理</strong>
            <select class="select" [(ngModel)]="commentType" (change)="doInquire()">
                <option class="option" selected value="1">评论</option>
                <option class="option" value="0">留言</option>
            </select>
        </div>


        <!-- 评论 -->
        <div *ngIf="commentType==1&&commentService.currentComment">
            <div class="scrollable-horizontal">
                <table class="table">
                    <thead>
                    <tr>
                        <th>ID</th>
                        <th>文章标题</th>
                        <th>评论内容</th>
                        <th>评论日期</th>
                        <th>管理</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr *ngFor="let comment of commentService.currentComment.list">
                        <td>{{comment.id}}</td>
                        <td class="text-truncate" [title]="comment.articleID+'.'+comment.articleTitle">
                            <a [routerLink]="[ '/article']"
                               [queryParams]="{'id':comment.articleID}">{{comment.articleTitle}}</a>
                        </td>
                        <td [title]="comment.content">
                            <span>{{comment.content.length > 40 ? (comment.content.substr(0, 40) + '...') : comment.content}}</span>
                            <nz-divider nzType="vertical"></nz-divider>
                            <a style="float: right;clear: both" (click)="prepareComment(comment)">查看</a>
                        </td>
                        <td>{{comment.date}}</td>
                        <td>
                            <a (click)="edit(0,comment.id,comment.content)">
                                <i nz-icon nzType="edit" nzTheme="twotone" nzTwotoneColor="#52c41a"></i> 编辑
                            </a>
                            <a nz-dropdown [nzDropdownMenu]="menu" nzPlacement="bottomLeft" nzTrigger="click">
                                更多 <i nz-icon nzType="down" nzTheme="outline"></i>
                            </a>
                            <nz-dropdown-menu #menu="nzDropdownMenu">
                                <ul nz-menu nzSelectable>
<!--                                    <li nz-menu-item>-->
<!--                                        <a disabled="true">回复</a>-->
<!--                                    </li>-->
                                    <li nz-menu-item>
                                        <a nz-popconfirm nzTitle="是否要删除这条评论?"
                                           (nzOnConfirm)="doDel(comment.id)">删除
                                        </a>
                                    </li>
                                </ul>
                            </nz-dropdown-menu>
                        </td>
                    </tr>
                    </tbody>
                </table>
                <nz-pagination align="center" [nzHideOnSinglePage]="true" [nzPageIndex]="pageNum"
                               [nzTotal]="commentService.currentComment.total"
                               [nzPageSize]="pageSize" (nzPageIndexChange)="toPage($event)">
                </nz-pagination>
            </div>
        </div>


        <!-- 留言 -->
        <div *ngIf="commentType==0&&commentService.currentLeaveMsg">
            <div class=" scrollable-horizontal">
                <table class="table ">
                    <thead>
                    <tr>
                        <th>ID</th>
                        <th>留言者</th>
                        <th>留言内容</th>
                        <th>留言日期</th>
                        <th>管理</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr *ngFor="let leaveMsg of commentService.currentLeaveMsg.list">
                        <td>{{leaveMsg.id}}</td>
                        <td>{{leaveMsg.authorName}}</td>
                        <td [title]="leaveMsg.content">
                            <span>{{leaveMsg.content.length > 40 ? (leaveMsg.content.substr(0, 40) + '...') : leaveMsg.content}}</span>
                            <a style="float: right;clear: both" (click)="prepareComment(leaveMsg)">查看</a>
                        </td>
                        <td>{{leaveMsg.date}}</td>
                        <td>
                            <a (click)="edit(1,leaveMsg.id,leaveMsg.content)">
                                <i nz-icon nzType="edit" nzTheme="twotone" nzTwotoneColor="#52c41a"></i> 编辑
                            </a>
                            <nz-divider nzType="vertical"></nz-divider>
                            <a nz-dropdown [nzDropdownMenu]="menu" nzPlacement="bottomLeft" nzTrigger="click">
                                更多 <i nz-icon nzType="down" nzTheme="outline"></i>
                            </a>
                            <nz-dropdown-menu #menu="nzDropdownMenu">
                                <ul nz-menu nzSelectable>
<!--                                    <li nz-menu-item>-->
<!--                                        <a disabled="true">回复</a>-->
<!--                                    </li>-->
                                    <li nz-menu-item>
                                        <a nz-popconfirm nzTitle="是否要删除这条留言?"
                                           (nzOnConfirm)="doDel(leaveMsg.id)">删除
                                        </a>
                                    </li>
                                </ul>
                            </nz-dropdown-menu>

                        </td>
                    </tr>

                    </tbody>
                </table>
                <nz-pagination align="center" [nzHideOnSinglePage]="true" [nzPageIndex]="pageNum"
                               [nzTotal]="commentService.currentLeaveMsg.total"
                               [nzPageSize]="pageSize" (nzPageIndexChange)="toPage($event)">
                </nz-pagination>
            </div>
        </div>

    </div>
</div>


<!-- 带输入框的弹出层 -->

<nz-modal [(nzVisible)]="showPupup" nzTitle="编辑" (nzOnCancel)="showPupup=!showPupup" (nzOnOk)="update()">

          <textarea nz-input [(ngModel)]="updateReqBody.content"
                    [nzAutosize]="{ minRows: 2, maxRows: 6 }"></textarea>

</nz-modal>

<nz-modal [(nzVisible)]="showCommentDetail" (nzOnCancel)="showCommentDetail=!showCommentDetail"
          (nzOnOk)="showCommentDetail=!showCommentDetail">
    <nz-comment [nzAuthor]="commentDetail.authorName"
                [nzDatetime]="commentDetail.date">
        <nz-avatar nz-comment-avatar nzIcon="user" [nzSrc]="commentDetail.authorAvatarImgUrl"></nz-avatar>
        <nz-comment-content class="comment">
            <p>{{commentDetail.content}}</p>
        </nz-comment-content>

        <ng-container *ngIf="commentDetail.child && commentDetail.child.length">
            <nz-comment *ngFor="let secLeaveMsg of commentDetail.child" [nzAuthor]="secLeaveMsg.authorName"
                        [nzDatetime]="secLeaveMsg.date">
                <nz-avatar nz-comment-avatar nzIcon="user" [nzSrc]="secLeaveMsg.authorAvatarImgUrl"></nz-avatar>
                <nz-comment-content class="comment">
                    <p>{{secLeaveMsg.content}}</p>
                </nz-comment-content>
            </nz-comment>
        </ng-container>

        <nz-comment>
            <nz-comment-content>
                <nz-form-item>
                        <textarea [(ngModel)]="responseComment.content" nz-input
                                  [nzAutosize]="{ minRows: 2, maxRows: 6 }"></textarea>
                </nz-form-item>
                <nz-form-item>
                    <button nz-button nzType="primary" [disabled]="!responseComment.content"
                            (click)="reply()"> 回复
                    </button>
                    <button nz-button nzType="default" style="margin-left: 15px;"
                            (click)="responseComment.pid=null"> 取消
                    </button>
                </nz-form-item>
            </nz-comment-content>
        </nz-comment>
    </nz-comment>
</nz-modal>
