<div class="row">
  <div class="col-lg-12 col-md-12">
    <sa-card name="评论列表" baCardClass="with-scroll table-panel">
      <div class="contnet-top-tools">
        <div class="clearfix">
          <div class="pull-left">
            <div class="btn-group">
              <button class="btn btn-success" *ngIf="isGuestbook(post_id);else postListTitle">
                <strong>留言板评论（{{ currentListTotal }}）</strong>
              </button>
              <ng-template #postListTitle>
                <button class="btn btn-info">
                  <strong>
                    {{ post_id
                      ? ('文章 ' + post_id + ' 评论')
                      : '全部评论'
                    }}（{{ currentListTotal }}）
                </strong>
                </button>
              </ng-template>
              <button
                type="button"
                class="btn btn-default active"
                [ngClass]="{ 'active': isState(CommentState.All)}"
                [disabled]="isGettingList"
                (click)="switchState(CommentState.All)"
              >
                <span>全部</span>
              </button>
              <button
                type="button"
                class="btn btn-default btn-with-icon"
                [ngClass]="{ 'active': isState(CommentState.Published) }"
                [disabled]="isGettingList"
                (click)="switchState(CommentState.Published)"
              >
                <ion-icon class="icon" name="checkmark-done"></ion-icon>
                <span>已发布</span>
              </button>
              <button
                type="button"
                class="btn btn-default btn-with-icon"
                [ngClass]="{ 'active': isState(CommentState.Auditing) }"
                [disabled]="isGettingList"
                (click)="switchState(CommentState.Auditing)"
              >
                <ion-icon class="icon" name="create"></ion-icon>
                <span>待审核</span>
              </button>
              <button
                type="button"
                class="btn btn-default btn-with-icon"
                [ngClass]="{ 'active': isState(CommentState.Deleted) }"
                [disabled]="isGettingList"
                (click)="switchState(CommentState.Deleted)"
              >
                <ion-icon class="icon" name="trash"></ion-icon>
                <span>回收站</span>
              </button>
              <button
                type="button"
                class="btn btn-default btn-with-icon"
                [ngClass]="{ 'active': isState(CommentState.Spam) }"
                [disabled]="isGettingList"
                (click)="switchState(CommentState.Spam)"
              >
                <ion-icon class="icon" name="nuclear"></ion-icon>
                <span>垃圾评论</span>
              </button>
            </div>
            <select
              class="form-control sort-select"
              [(ngModel)]="getParams.sort"
              (ngModelChange)="getComments()"
            >
              <option [ngValue]="SortType.Desc" default>最新</option>
              <option [ngValue]="SortType.Asc">最早</option>
              <option [ngValue]="SortType.Hot">最热门</option>
            </select>
            <form
              class="form-inline comment-search-form"
              [formGroup]="searchForm"
              (ngSubmit)="searchComments()"
            >
              <div class="input-group">
                <input
                  type="text"
                  [formControl]="keyword"
                  class="form-control with-default-addon"
                  placeholder="评论内容、作者信息"
                />
                <span class="input-group-append">
                  <button class="btn btn-default btn-icon" type="submit" [disabled]="!searchForm.valid">
                    <ion-icon class="icon" name="search"></ion-icon>
                  </button>
                </span>
              </div>
            </form>
          </div>
          <div class="pull-right">
            <div class="btn-group">
              <button
                type="button"
                class="btn btn-default btn-with-icon"
                [disabled]="isGettingList"
                (click)="refreshComments()"
              >
                <ion-icon class="icon" name="refresh"></ion-icon>
                <span>刷新</span>
              </button>
              <button
                type="button"
                class="btn btn-default btn-with-icon"
                (click)="resetGetParams()"
              >
                <ion-icon class="icon" name="remove-circle-outline"></ion-icon>
                <span>重置参数</span>
              </button>
              <div class="btn-group" dropdown [isDisabled]="!selectedComments.length || isGettingList">
                <button
                  type="button"
                  class="btn btn-default btn-with-icon dropdown-toggle"
                  dropdownToggle
                >
                  <ion-icon class="icon" name="list"></ion-icon>
                  <span>批量操作</span>
                </button>
                <ul class="dropdown-menu" *dropdownMenu>
                  <li class="dropdown-item">
                    <a [href]="" (click)="updateCommentsState(CommentState.Published)">
                      <ion-icon class="icon" name="checkmark"></ion-icon>
                      <span>审核通过</span>
                    </a>
                  </li>
                  <li class="dropdown-item">
                    <a [href]="" (click)="updateCommentsState(CommentState.Auditing)">
                      <ion-icon class="icon" name="enter"></ion-icon>
                      <span>移至待审核</span>
                    </a>
                  </li>
                  <li class="dropdown-item">
                    <a [href]="" (click)="updateCommentsState(CommentState.Deleted)">
                      <ion-icon class="icon" name="pint"></ion-icon>
                      <span>移至回收站</span>
                    </a>
                  </li>
                  <li class="dropdown-item">
                    <a [href]="" (click)="updateCommentsState(CommentState.Spam)">
                      <ion-icon class="icon" name="nuclear"></ion-icon>
                      <span>标为垃圾评论</span>
                    </a>
                  </li>
                  <li class="dropdown-item">
                    <a [href]="" (click)="delCommentModal()">
                      <ion-icon class="icon" name="trash"></ion-icon>
                      <span>彻底删除</span>
                    </a>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="table-responsive">
        <div class="comment-list">
          <sa-loading-spider [show]="isGettingList"></sa-loading-spider>
          <table class="table table-striped table-no-borders black-muted-bg">
            <thead>
              <tr>
                <th>
                  <sa-checkbox
                    [(ngModel)]="commentsSelectAll"
                    (ngModelChange)="batchSelectChange($event)"
                  >
                    <span sa-checkbox-label>
                      <span>&nbsp;</span>
                      <strong>ID</strong>
                    </span>
                  </sa-checkbox>
                </th>
                <th>PID</th>
                <th>POST_ID</th>
                <th>评论内容</th>
                <th>个人信息</th>
                <th width="240px">终端</th>
                <th>状态</th>
                <th class="text-center" width="100px">操作</th>
              </tr>
            </thead>
            <tbody>
              <tr *ngIf="!comments.data.length;else dataList">
                <td colspan="11">
                  <p class="text-muted text-center comment-err-msg" *ngIf="!comments.data.length">
                    <span>{{ isGettingList ? '数据请求中...' : '暂无数据' }}</span>
                  <p>
                </td>
              </tr>
              <ng-template #dataList>
                <tr *ngFor="let comment of comments.data" class="comment-item">
                  <td class="no-wrap">
                    <sa-checkbox
                      ngDefaultControl
                      [(ngModel)]="comment.selected"
                      (ngModelChange)="itemSelectChange()"
                    >
                      <strong sa-checkbox-label>&nbsp;{{ comment.id }}</strong>
                    </sa-checkbox>
                  </td>
                  <td class="no-wrap">
                    <a *ngIf="comment.pid;else noLinkPid" [routerLink]="['/comment/detail/', comment.pid]">{{ comment.pid }}</a>
                    <ng-template #noLinkPid><span>{{ comment.pid }}</span></ng-template>
                  </td>
                  <td class="no-wrap">
                    <a [routerLink]="['/comment/post/', comment.post_id]">{{ comment.post_id }}</a>
                  </td>
                  <td>
                    <div class="comment-content">
                      <span *ngIf="comment.content;else emptyComment">{{ comment.content | truncate : 160 }}</span>
                      <ng-template #emptyComment><span class="text-muted">暂无内容</span></ng-template>
                    </div>
                  </td>
                  <td class="no-wrap">
                    <div class="comment-user">
                      <div class="avatar">
                        <strong>头像：</strong>
                        <img
                          class="image"
                          [src]="getGravatar(comment.author.email)"
                          [alt]="comment.author.name"
                        />
                      </div>
                      <div class="name"><strong>名字：</strong>{{ comment.author.name }}</div>
                      <div class="email">
                        <strong>邮箱：</strong>
                        <a [href]="'mailto:' + comment.author.email" target="_blank">{{ comment.author.email }}</a>
                      </div>
                      <div class="site">
                        <strong>网址：</strong>
                        <a [href]="comment.author.site" target="_blank">{{ comment.author.site || '无' }}</a>
                      </div>
                    </div>
                  </td>
                  <td class="no-wrap">
                    <div class="comment-tag">
                      <div>
                        <strong>IP：</strong>
                        <span *ngIf="comment.ip;else unknowip">{{ comment.ip }}</span>
                        <ng-template #unknowip><span class="text-muted">未知</span></ng-template>
                      </div>
                      <div>
                        <strong>地理位置：</strong>
                        <span *ngIf="comment.ip_location;else unknowIpLocation">
                          {{ comment.ip_location.country || '-' }} -
                          {{ comment.ip_location.city || '-' }}
                        </span>
                        <ng-template #unknowIpLocation><span class="text-muted">未知</span></ng-template>
                      </div>
                      <div>
                        <strong>浏览器：</strong>
                        <span>{{ comment.agent ? browserParser(comment.agent) : '-' }}</span>
                      </div>
                      <div>
                        <strong>系统：</strong>
                        <span>{{ osParser(comment.agent) }}</span>
                      </div>
                      <div>
                        <strong>发布日期：</strong>
                        <span>{{ comment.create_at | dataToLocale }}</span>
                      </div>
                    </div>
                  </td>
                  <td class="no-wrap">
                    <p class="like-count">
                      <ion-icon class="icon" name="heart"></ion-icon>
                      <span>&nbsp;</span>
                      <strong>{{ comment.likes }}</strong>&nbsp;个赞
                    </p>
                    <hr>
                    <ion-icon class="icon text-success" name="cloud-done" *ngIf="comment.state === CommentState.Published"></ion-icon>
                    <ion-icon class="icon text-warning" name="create" *ngIf="comment.state === CommentState.Auditing"></ion-icon>
                    <ion-icon class="icon text-danger" name="trash" *ngIf="comment.state === CommentState.Deleted"></ion-icon>
                    <ion-icon class="icon text-danger" name="nuclear" *ngIf="comment.state === CommentState.Spam"></ion-icon>
                    <span>&nbsp;</span>
                    <span [ngSwitch]="comment.state">
                      <span *ngSwitchCase="CommentState.Auditing">待审核</span>
                      <span *ngSwitchCase="CommentState.Published">已发布</span>
                      <span *ngSwitchCase="CommentState.Deleted">已删除</span>
                      <span *ngSwitchCase="CommentState.Spam">垃圾评论</span>
                    </span>
                  </td>
                  <td class="no-wrap">
                    <div class="action-btn-list">
                      <div class="button-wrapper">
                        <a
                          class="btn btn-primary btn-sm btn-with-icon"
                          [routerLink]="['/comment/detail/', comment.id]"
                        >
                          <ion-icon class="icon" name="create"></ion-icon>
                          <span>评论详情</span>
                        </a>
                      </div>
                      <div class="button-wrapper" *ngIf="comment.state === CommentState.Auditing">
                        <button
                          class="btn btn-success btn-sm btn-with-icon"
                          (click)="updateCommentsState(CommentState.Published, comment)"
                        >
                          <ion-icon class="icon" name="checkmark"></ion-icon>
                          <span>审核通过</span>
                        </button>
                      </div>
                      <div class="button-wrapper" *ngIf="comment.state === CommentState.Deleted || comment.state === CommentState.Spam">
                        <button
                          class="btn btn-warning btn-sm btn-with-icon"
                          (click)="updateCommentsState(CommentState.Auditing, comment)"
                        >
                          <ion-icon class="icon" name="checkmark"></ion-icon>
                          <span>恢复评论</span>
                        </button>
                      </div>
                      <div class="button-wrapper" *ngIf="comment.state === CommentState.Published">
                        <button
                          class="btn btn-danger btn-sm btn-with-icon"
                          (click)="updateCommentsState(CommentState.Spam, comment)"
                        >
                          <ion-icon class="icon" name="nuclear"></ion-icon>
                          <span>标为垃圾</span>
                        </button>
                      </div>
                      <div class="button-wrapper" *ngIf="comment.state !== CommentState.Deleted">
                        <button
                          class="btn btn-danger btn-sm btn-with-icon"
                          (click)="updateCommentsState(CommentState.Deleted, comment)"
                        >
                          <ion-icon class="icon" name="pint"></ion-icon>
                          <span>移回收站</span>
                        </button>
                      </div>
                      <div class="button-wrapper" *ngIf="comment.state === CommentState.Deleted">
                        <button class="btn btn-danger btn-sm btn-with-icon" (click)="delCommentModal(comment._id)">
                          <ion-icon class="icon" name="trash"></ion-icon>
                          <span>彻底删除</span>
                        </button>
                      </div>
                      <div class="button-wrapper">
                        <a
                          class="btn btn-info btn-sm btn-with-icon"
                          target="_blank"
                          [href]="isGuestbook(comment.post_id) ? getGuestbookPath() : getArticlePath(comment.post_id)"
                        >
                          <ion-icon class="icon" name="arrow-redo"></ion-icon>
                          <span>宿主页面</span>
                        </a>
                      </div>
                    </div>
                  </td>
                </tr>
              </ng-template>
            </tbody>
          </table>
          <br>
          <br>
          <div class="text-center" *ngIf="comments.pagination">
            <pagination
              class="pagination-xs"
              firstText="首页"
              lastText="末页"
              nextText="下一页"
              previousText="上一页"
              pageBtnClass="btn-primary"
              [totalItems]="comments.pagination.total"
              [itemsPerPage]="comments.pagination.per_page"
              [(ngModel)]="comments.pagination.current_page"
              [maxSize]="7"
              [boundaryLinks]="true"
              [rotate]="false"
              (pageChanged)="pageChanged($event)"
            ></pagination>
          </div>
        </div>
      </div>
    </sa-card>
    <!-- 删除确认弹窗 -->
    <div bsModal #delModal="bs-modal" class="modal fade" tabindex="-1" role="dialog">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button class="close" aria-label="Close" (click)="cancelCommentModal()">
              <span aria-hidden="true">&times;</span>
            </button>
            <h4 class="modal-title">确认操作</h4>
          </div>
          <div class="modal-body">
            <div class="message">
              <span class="icon text-danger">
                <ion-icon class="icon" name="information-circle-outline"></ion-icon>
              </span>
              <span>确定要删除{{ todoDelCommentId ? '这篇' : '选中' }}评论吗？本操作不可逆</span>
            </div>
          </div>
          <div class="modal-footer">
            <button class="btn btn-danger confirm-btn" (click)="delComments()">确认删除</button>
            <span>&nbsp;</span>
            <button class="btn btn-default confirm-btn" (click)="cancelCommentModal()">取消</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
