<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="pull-left">
          <div class="input-group">
            <div class="input-group-prepend">
              <button class="btn btn-default">
                <strong>{{ currentListTotal }} 篇</strong>
              </button>
            </div>
            <select
              class="form-control"
              [(ngModel)]="getParams.state"
              (ngModelChange)="getArticles()"
            >
              <option [ngValue]="PublishState.All" default>全部文章</option>
              <option [ngValue]="PublishState.Published">已发布</option>
              <option [ngValue]="PublishState.Draft">草稿</option>
              <option [ngValue]="PublishState.Recycle">回收站</option>
            </select>
            <select
              class="form-control"
              [disabled]="isLoading(Loading.GetCategoryList)"
              [(ngModel)]="getParams.category"
              (ngModelChange)="getArticles()"
            >
              <option default value="all">所有分类</option>
              <ng-template [ngIf]="categories && categories.data.length">
                <option *ngFor="let category of categories.data" [ngValue]="category._id">
                  <span *ngIf="category.level">└</span>
                  <strong>{{ ''.padEnd(category.level, '─') }}</strong>
                  <span>{{ category.name }}</span>
                </option>
              </ng-template>
            </select>
            <select
              class="form-control"
              [disabled]="isLoading(Loading.GetTagList)"
              [(ngModel)]="getParams.tag"
              (ngModelChange)="getArticles()"
            >
              <option default value="all">所有标签</option>
              <ng-template [ngIf]="tags && tags.data.length">
                <option *ngFor="let tag of tags.data" [ngValue]="tag._id">
                  <span>{{ tag.name }}</span>
                </option>
              </ng-template>
            </select>
            <select class="form-control" [(ngModel)]="getParams.sort" (ngModelChange)="getArticles()">
              <option [ngValue]="SortType.Desc" default>最新发布</option>
              <option [ngValue]="SortType.Asc">最早发布</option>
              <option [ngValue]="SortType.Hot">文章热度</option>
            </select>
            <select class="form-control" [(ngModel)]="getParams.public" (ngModelChange)="getArticles()">
              <option [ngValue]="PublicState.All" default>所有类型</option>
              <option [ngValue]="PublicState.Public">公开</option>
              <option [ngValue]="PublicState.Password">密码</option>
              <option [ngValue]="PublicState.Secret">私密</option>
            </select>
            <select
              class="form-control"
              [(ngModel)]="getParams.origin"
              (ngModelChange)="getArticles()"
            >
              <option [ngValue]="OriginState.All" default>所有来源</option>
              <option [ngValue]="OriginState.Original">原创</option>
              <option [ngValue]="OriginState.Reprint">转载</option>
              <option [ngValue]="OriginState.Hybrid">混合</option>
            </select>
            <form
              class="form-inline article-search-form"
              [formGroup]="searchForm"
              (ngSubmit)="searchArticles()"
            >
              <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>
        <div class="pull-right">
          <div class="btn-group">
            <button
              type="button"
              class="btn btn-default btn-with-icon"
              [disabled]="isLoadingArticleList"
              (click)="refreshArticles()"
            >
              <ion-icon class="icon" name="refresh"></ion-icon>
              <span>刷新</span>
            </button>
            <button
              type="button"
              class="btn btn-default btn-with-icon"
              [disabled]="isLoadingArticleList"
              (click)="resetGetParams()"
            >
              <ion-icon class="icon" name="remove-circle-outline"></ion-icon>
              <span>重置</span>
            </button>
            <div class="btn-group" dropdown [isDisabled]="!selectedArticles.length || isLoadingArticleList">
              <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)="moveToPublished()">
                    <ion-icon class="icon" name="checkmark-done"></ion-icon>
                    <span>快速发布</span>
                  </a>
                </li>
                <li class="dropdown-item">
                  <a [href]="" (click)="moveToDraft()">
                    <ion-icon class="icon" name="enter"></ion-icon>
                    <span>移至草稿</span>
                  </a>
                </li>
                <li class="dropdown-item">
                  <a [href]="" (click)="moveToRecycle()">
                    <ion-icon class="icon" name="pint"></ion-icon>
                    <span>移至回收站</span>
                  </a>
                </li>
                <li class="dropdown-item">
                  <a [href]="" (click)="delArticleModal()">
                    <ion-icon class="icon" name="trash"></ion-icon>
                    <span>彻底删除</span>
                  </a>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
      <div class="table-responsive">
        <div class="article-list">
          <sa-loading-spider [show]="isLoadingArticleList"></sa-loading-spider>
          <table class="table table-striped table-no-borders black-muted-bg">
            <thead>
              <tr>
                <th width="88px">
                  <sa-checkbox [(ngModel)]="articlesSelectAll" (ngModelChange)="batchSelectChange($event)">
                    <span sa-checkbox-label>
                      <span>&nbsp;</span>
                      <strong>ID</strong>
                    </span>
                  </sa-checkbox>
                </th>
                <th>文章</th>
                <th>分类/标签</th>
                <th>评论/喜欢</th>
                <th width="220px">日期</th>
                <th class="text-center">状态</th>
                <th class="text-center">操作</th>
              </tr>
            </thead>
            <tbody>
              <tr *ngIf="!articles.data.length;else dataList">
                <td colspan="10">
                  <p class="text-muted text-center category-err-msg">
                    {{ isLoadingArticleList ? '数据请求中...' : '暂无数据' }}
                  <p>
                </td>
              </tr>
              <ng-template #dataList>
                <tr *ngFor="let article of articles.data" class="article-item">
                  <td class="no-wrap">
                    <sa-checkbox [(ngModel)]="article.selected" (ngModelChange)="itemSelectChange()">
                      <span sa-checkbox-label>
                        <span>&nbsp;</span>
                        <strong>{{ article.id }}</strong>
                      </span>
                    </sa-checkbox>
                  </td>
                  <td>
                    <div class="article-content">
                      <div
                        class="content-bg"
                        [ngStyle]="{
                          'background-image': 'url(' + (article.thumb || '/assets/images/profile/article-thumb.jpg') +')'
                        }"
                      >
                      </div>
                      <h4 class="title">
                        <a [href]="getArticlePath(article.id)" target="_blank">
                          <strong>{{ article.title }}</strong>
                        </a>
                        <span>&nbsp;&nbsp;</span>
                        <ion-icon
                          class="icon text-success"
                          name="checkmark-done"
                          *ngIf="article.state === PublishState.Published"
                        ></ion-icon>
                        <span>&nbsp;</span>
                        <ion-icon
                          class="icon text-warning"
                          name="create"
                          *ngIf="article.state === PublishState.Draft"
                        ></ion-icon>
                        <span>&nbsp;</span>
                        <ion-icon
                          class="icon text-danger"
                          name="trash"
                          *ngIf="article.state === PublishState.Recycle"
                        ></ion-icon>
                        <span>&nbsp;</span>
                        <ion-icon
                          class="icon text-danger"
                          name="lock-closed"
                          *ngIf="article.public !== PublicState.Public"
                        ></ion-icon>
                      </h4>
                      <p class="description">
                        <span *ngIf="article.description">{{ article.description | truncate : 128 }}</span>
                        <span *ngIf="!article.description && article.content">{{ article.content | truncate : 128 }}</span>
                        <span *ngIf="!article.description && !article.content" class="text-muted">暂无内容</span>
                      </p>
                    </div>
                  </td>
                  <td class="no-wrap">
                    <div class="article-category">
                      <ul class="list-unstyled list">
                        <li *ngFor="let category of article.category">
                          <ion-icon class="icon" name="folder"></ion-icon>
                          <span>&nbsp;&nbsp;</span>
                          <span>{{ category.name }}</span>
                        </li>
                        <li *ngIf="!article.category.length" class="text-muted">
                          <ion-icon class="icon" name="folder"></ion-icon>
                          <span>&nbsp;&nbsp;</span>
                          <span>暂无分类</span>
                        </li>
                      </ul>
                      <hr>
                      <ul class="list-unstyled list">
                        <li *ngFor="let tag of article.tag">
                          <ion-icon class="icon" name="pricetags"></ion-icon>
                          <span>&nbsp;&nbsp;</span>
                          <span>{{ tag.name }}</span>
                        </li>
                        <li *ngIf="!article.tag.length" class="text-muted">
                          <ion-icon class="icon" name="pricetags"></ion-icon>
                          <span>&nbsp;&nbsp;</span>
                          <span>暂无标签</span>
                        </li>
                      </ul>
                    </div>
                  </td>
                  <td class="no-wrap">
                    <span>
                      <span *ngIf="article.meta.comments">
                        <a [routerLink]="['/comment/post/', article.id]">{{ article.meta.comments }} 条评论</a>
                      </span>
                      <span class="text-muted" *ngIf="!article.meta.comments">暂无评论</span>
                    </span>
                    <hr>
                    <span>
                      <span *ngIf="article.meta.likes">{{ article.meta.likes }} 人喜欢</span>
                      <span class="text-muted" *ngIf="!article.meta.likes">无人问津</span>
                    </span>
                  </td>
                  <td class="no-wrap">
                    <span>最早发布：{{ article.create_at | dataToLocale }}</span>
                    <hr>
                    <span>最后更新：{{ article.update_at | dataToLocale }}</span>
                  </td>
                  <td class="no-wrap">
                    <span [ngSwitch]="article.state">
                      <span *ngSwitchCase="PublishState.Published">
                        <ion-icon class="icon text-success" name="checkmark-done"></ion-icon>
                        <span> 已发布</span>
                      </span>
                      <span *ngSwitchCase="PublishState.Draft">
                        <ion-icon class="icon text-warning" name="create"></ion-icon>
                        <span> 草稿</span>
                      </span>
                      <span *ngSwitchCase="PublishState.Recycle">
                        <ion-icon class="icon text-danger" name="trash"></ion-icon>
                        <span> 回收站</span>
                      </span>
                    </span>
                    <hr>
                    <span [ngSwitch]="article.public">
                      <span *ngSwitchCase="PublicState.Public">
                        <ion-icon class="icon text-success" name="lock-open"></ion-icon>
                        <span> 公开</span>
                      </span>
                      <span *ngSwitchCase="PublicState.Password">
                        <ion-icon class="icon text-danger" name="lock-closed"></ion-icon>
                        <span> 密码</span>
                      </span>
                      <span *ngSwitchCase="PublicState.Secret">
                        <ion-icon class="icon text-danger" name="lock-closed"></ion-icon>
                        <span> 私密</span>
                      </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]="['/article/edit/', article._id]">
                          <ion-icon class="icon" name="create"></ion-icon>
                          <span>编辑文章</span>
                        </a>
                      </div>
                      <div class="button-wrapper" *ngIf="article.state === PublishState.Draft">
                        <button class="btn btn-success btn-sm btn-with-icon" (click)="moveToPublished([article._id])">
                          <ion-icon class="icon" name="checkmark-done"></ion-icon>
                          <span>快速发布</span>
                        </button>
                      </div>
                      <div class="button-wrapper" *ngIf="article.state === PublishState.Recycle">
                        <button class="btn btn-warning btn-sm btn-with-icon" (click)="moveToDraft([article._id])">
                          <ion-icon class="icon" name="exit"></ion-icon>
                          <span>恢复文章</span>
                        </button>
                      </div>
                      <div class="button-wrapper" *ngIf="article.state === PublishState.Published">
                        <button class="btn btn-warning btn-sm btn-with-icon" (click)="moveToDraft([article._id])">
                          <ion-icon class="icon" name="enter"></ion-icon>
                          <span>移至草稿</span>
                        </button>
                      </div>
                      <div class="button-wrapper" *ngIf="article.state !== PublishState.Recycle">
                        <button class="btn btn-danger btn-sm btn-with-icon" (click)="moveToRecycle([article._id])">
                          <ion-icon class="icon" name="pint"></ion-icon>
                          <span>移回收站</span>
                        </button>
                      </div>
                      <div class="button-wrapper" *ngIf="article.state === PublishState.Recycle">
                        <button class="btn btn-danger btn-sm btn-with-icon" (click)="delArticleModal(article._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"
                          [href]="getArticlePath(article.id)"
                          target="_blank"
                        >
                          <ion-icon class="icon" name="open"></ion-icon>
                          <span>新窗查看</span>
                        </a>
                      </div>
                    </div>
                  </td>
                </tr>
              </ng-template>
            </tbody>
          </table>
          <br>
          <br>
          <div class="text-center" *ngIf="articles.pagination">
            <pagination
              class="pagination-xs"
              firstText="首页"
              lastText="末页"
              nextText="下一页"
              previousText="上一页"
              pageBtnClass="btn-primary"
              [totalItems]="articles.pagination.total"
              [itemsPerPage]="articles.pagination.per_page"
              [(ngModel)]="articles.pagination.current_page"
              [maxSize]="7"
              [boundaryLinks]="true"
              [rotate]="false"
              (pageChanged)="handlePageChanged($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)="cancelArticleModal()">
              <span aria-hidden="true">&times;</span>
            </button>
            <h4 class="modal-title">确认操作</h4>
          </div>
          <div class="modal-body">
            <div class="message">
              <ion-icon class="icon text-danger" name="information-circle"></ion-icon>
              <span>确定要删除{{ todoDelArticleId ? '这篇' : '选中' }}文章吗？本操作不可逆</span>
            </div>
          </div>
          <div class="modal-footer">
            <button class="btn btn-danger confirm-btn" (click)="delArticles()">确认删除</button>
            <span>&nbsp;</span>
            <button class="btn btn-default confirm-btn" (click)="cancelArticleModal()">取消</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
