<!--面包屑-->
<nz-breadcrumb>
  <nz-breadcrumb-item>
    内容管理
  </nz-breadcrumb-item>
  <nz-breadcrumb-item>
    内容发布
  </nz-breadcrumb-item>
</nz-breadcrumb>

<div class="inner-content" nz-row>
  <!--条件搜索-->
  <div style="margin-bottom: 24px; margin-top: 24px;">
    <!--分类-->
        <nz-tree-select
          nzPlaceHolder="请选择分类"
          style="width: 250px"
          [nzNodes]="nodes"
          nzShowSearch
          nzPlaceHolder="请选择内容分类"
          [(ngModel)]="searchCategoryId"
        >
        </nz-tree-select>
    <input class="width_input_chlid" [(ngModel)]="searchTitle" name="searchTitle" nz-input placeholder="请输入内容标题" nzSize="default">
    <nz-select class="width_input_chlid" nzShowSearch nzAllowClear nzPlaceHolder="请选择状态" [(ngModel)]="searchStatus">
      <nz-option nzLabel="请选择状态" nzValue=""></nz-option>
      <nz-option nzLabel="编辑中" nzValue="1"></nz-option>
      <nz-option nzLabel="已发布" nzValue="2"></nz-option>
      <!--<nz-option nzLabel="已下线" nzValue="3"></nz-option>-->
    </nz-select>
    <button style="margin-left: 10px;" nz-button nzType="primary" (click)="getSearch()" [nzLoading]="isLoadingSearch">搜索</button>
    <button nz-button (click)="resetSearch()">重置</button>
  </div>
</div>

<div class="inner-content" nz-row>
  <nz-layout>
    <nz-sider style="background: #ffffff;"><div class="gaopin-data-toalt" style="width: 300px;">共搜索到 {{total}} 条数据</div></nz-sider>
    <nz-content style="text-align: right;background: #ffffff;">
      <button *ngIf="BTN_cmscontent_add == 1" class="funcBnt" nz-button nzType="primary" (click)="getAdd()">添加</button>
    </nz-content>
  </nz-layout>

  <!--数组表格 -->
  <nz-table
    style="margin-top: 30px;width: 100%;"
    #ajaxTable
    nzShowSizeChanger
    [nzFrontPagination]="false"
    [nzData]="requestData"
    [nzLoading]="loading"
    [nzTotal]="total"
    [(nzPageIndex)]="pageIndex"
    [(nzPageSize)]="pageSize"
    (nzPageIndexChange)="getRequest()"
    (nzPageSizeChange)="getRequest(true)"
    [nzScroll]="{ x: '1150px'}">
    <thead  nzSingleSort>
    <tr>
      <th nzWidth="80px">序号</th>
      <th nzWidth="240px">分类名称</th>
      <th nzWidth="240px">内容标题</th>
      <th nzWidth="300px">简要描述</th>
      <th nzWidth="120px">访问总量</th>
      <th nzWidth="120px">是否推荐</th>
      <th nzWidth="120px">状态</th>
      <th nzWidth="120px">创建时间</th>
      <th nzRight="0px" nzAlign="left" nzWidth="300px">操作</th>
    </tr>
    </thead>
    <tbody>
    <tr *ngFor="let data of ajaxTable.data; let i = index;">
      <td>{{i+ 1}}</td>
      <td>{{data.categoryName}}</td>
      <td>{{data.title}}</td>
      <td>{{data.description}}</td>
      <td>{{data.visitCount}}</td>
      <td>
        <span style="color: #1890ff;" *ngIf="data.recommend">是</span>
        <span style="color: darkgray;" *ngIf="!data.recommend">否</span>
      </td>
      <td>
        <span *ngIf="data.status == 1">编辑中</span>
        <span *ngIf="data.status == 2">已发布</span>
      </td>
      <td>{{data.createTime | date:'yyyy-MM-dd' }}</td>
      <td  nzRight="0px" style="font-size: 16px;">
        <a><span nz-tooltip nzTitle="详情" (click)='getContentView(data.id)'><i nz-icon nzType="unordered-list" nzTheme="outline"></i></span></a>
        <span *ngIf="BTN_cmscontent_edit">
          <nz-divider nzType="vertical"></nz-divider>
          <a *ngIf="data.status == 1"><span nz-tooltip nzTitle="编辑" (click)='getEdit(data.id)'><i nz-icon nzType="edit" nzTheme="outline"></i></span></a>
        </span>
        <span *ngIf="BTN_cmscontent_up_down == 1">
          <nz-divider *ngIf="data.status == 1" nzType="vertical"></nz-divider>
          <a *ngIf="data.status == 2"><span nz-tooltip nzTitle="下线" (click)='showDown(data.id)'><i nz-icon nzType="down-square" nzTheme="outline"></i></span></a>
          <a *ngIf="data.status == 1"><span nz-tooltip nzTitle="发布" (click)='addPush(data.id, data.categoryId)'><i nz-icon nzType="up-square" nzTheme="outline"></i></span></a>
        </span>
        <span *ngIf="BTN_cmscontent_delete == 1">
          <nz-divider *ngIf="data.status == 1" nzType="vertical"></nz-divider>
          <a *ngIf="data.status == 1"><span nz-tooltip nzTitle="删除" (click)='showDeleteConfirmDelete(data.id)'><i nz-icon nzType="delete" nzTheme="outline"></i></span></a>
        </span>
        <span *ngIf="BTN_cmscontent_patch == 1">
          <nz-divider *ngIf="data.status == 1" nzType="vertical"></nz-divider>
          <a *ngIf="data.status == 1"><span nz-tooltip nzTitle="附件" (click)='findPatchByContent(data.id)'><i nz-icon nzType="file" nzTheme="outline"></i></span></a>
        </span>
      </td>
    </tr>
    </tbody>
  </nz-table>
  <nz-layout *ngIf="showPatch == 1" style="margin-bottom: 10px;">
    <nz-content style="text-align: right;background: #ffffff;">
      <button class="funcBnt" nz-button nzType="primary" (click)="addPatch()">添加附件</button>
    </nz-content>
  </nz-layout>
  <nz-table style="width: 100%" [nzShowPagination]="false" #basicTable [nzData]="patchList" *ngIf="showPatch == 1">
    <thead>
    <tr>
      <th>附件名称</th>
      <th>附件类型</th>
      <th>附件描述</th>
      <th>排序</th>
      <th>添加时间</th>
      <th>操作</th>
    </tr>
    </thead>
    <tbody>
    <tr *ngFor="let data of patchList">
      <td>{{ data.patchName }}</td>
      <td *ngIf="data.patchType == 1">图片</td>
      <td *ngIf="data.patchType == 2">音频</td>
      <td *ngIf="data.patchType == 3">视频</td>
      <td *ngIf="data.patchType == 4">文档</td>
      <td *ngIf="data.patchType == 5">其他</td>
      <td>{{data.patchDesc}}</td>
      <td>{{data.sort}}</td>
      <td>{{data.addTime | date:'yyyy-MM-dd'}}</td>
      <td>
        <a><span nz-tooltip nzTitle="删除附件" (click)='showDeletePatch(data.id)'><i nz-icon nzType="delete" nzTheme="outline"></i></span></a>
      </td>
    </tr>
    </tbody>
  </nz-table>
</div>
<!--添加附件弹出层-->
<nz-modal [(nzVisible)]="isVisible" nzTitle="添加附件"  (nzOnCancel)="handleCancel()" (nzOnOk)="handlePatchOk(annexForm.value)" [nzOkLoading]="isOkLoading">
  <form nz-form [formGroup]="annexForm" style="margin-left: 5%;">
    <!--附件名称-->
    <nz-form-item>
      <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="patchName" nzRequired>
        <span>附件名称<i nz-icon nz-tooltip nzTitle="附件名称" type="question-circle" nzTheme="outline"></i></span>
      </nz-form-label>
      <nz-form-control [nzSm]="14" [nzXs]="24">
        <input nz-input  formControlName="patchName"  placeholder="请输入附件名称..."  />
        <!--<nz-form-explain *ngIf="annexForm.get('patchName')?.dirty && annexForm.get('patchName')?.errors">请输入附件名称!</nz-form-explain>-->
      </nz-form-control>
    </nz-form-item>
    <!--附件描述-->
    <nz-form-item>
      <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="patchDesc">
        <span>附件描述<i nz-icon nz-tooltip nzTitle="附件描述" type="question-circle" nzTheme="outline"></i></span>
      </nz-form-label>
      <nz-form-control [nzSm]="14" [nzXs]="24">
        <input nz-input  formControlName="patchDesc"  placeholder="请输入附件描述..."  />
        <!--<nz-form-explain *ngIf="annexForm.get('patchDesc')?.dirty && annexForm.get('patchDesc')?.errors">请输入附件描述!</nz-form-explain>-->
      </nz-form-control>
    </nz-form-item>
    <!--附件排序-->
    <nz-form-item>
      <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="sort" nzRequired>
        <span>附件排序<i nz-icon nz-tooltip nzTitle="附件排序" type="question-circle" nzTheme="outline"></i></span>
      </nz-form-label>
      <nz-form-control [nzSm]="14" [nzXs]="24">
        <input nz-input type="number" formControlName="sort"  placeholder="请输入附件排序,越小越靠前..." oninput="if(value.length>5) value=value.slice(0,5)"/>
        <!--<nz-form-explain *ngIf="annexForm.get('sort')?.dirty && annexForm.get('sort')?.errors">请输入附件排序!</nz-form-explain>-->
      </nz-form-control>
    </nz-form-item>
    <!--附件类型-->
    <nz-form-item >
      <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="patchType" nzRequired>
        <span>附件类型</span>
      </nz-form-label>
      <nz-form-control [nzSm]="14" [nzXs]="24">
        <nz-select style="width: 80%;" formControlName="patchType" (ngModelChange)="getChange($event)"  nzShowSearch nzAllowClear nzPlaceHolder="请选择附件类型">
          <nz-option  nzLabel="图片" nzValue="1" ></nz-option>
          <nz-option  nzLabel="音乐" nzValue="2" ></nz-option>
          <nz-option  nzLabel="视频" nzValue="3" ></nz-option>
          <nz-option  nzLabel="文档" nzValue="4" ></nz-option>
          <nz-option  nzLabel="其他" nzValue="5" ></nz-option>
        </nz-select>
      </nz-form-control>
    </nz-form-item>
    <!--附件上传-->
    <nz-form-item *ngIf="patchTypeCheck != '0' && patchTypeCheck != null && patchTypeCheck != ''">
      <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="patchPath" nzRequired>
        <span>附件上传<i nz-icon nz-tooltip nzTitle="附件上传" type="question-circle" nzTheme="outline"></i></span>
      </nz-form-label>
      <nz-form-control [nzSm]="14" [nzXs]="24">
        <nz-upload
          nzAction="{{WEB_SERVE_URL}}/fileUpload/fileUpload"
          [(nzFileList)]="fileList"
          [nzCustomRequest]="customReq"
          [nzShowButton]="fileList.length < 1"
        >
          <button nz-button ><i nz-icon nzType="upload"></i><span>点击上传</span></button>
        </nz-upload>
      </nz-form-control>
    </nz-form-item>
    <button nz-button id="reset" style="display: none;" (click)="emptyForm($event)">清空</button>
  </form>
</nz-modal>
<!--发布弹出层-->
<nz-modal [(nzVisible)]="isPublish" nzTitle="发布内容"  (nzOnCancel)="handleCancelPush()" (nzOnOk)="handlePushOk(pushForm.value)" [nzOkLoading]="isPushOkLoading">
  <form nz-form [formGroup]="pushForm" style="margin-left: 5%;">
    <!--附件名称-->
    <nz-form-item>
      <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="moduleId">
        <span>发布模板<i nz-icon nz-tooltip nzTitle="发布模板" type="question-circle" nzTheme="outline"></i></span>
      </nz-form-label>
      <nz-form-control [nzSm]="14" [nzXs]="24">
        <nz-select formControlName="moduleId"  nzShowSearch nzAllowClear nzPlaceHolder="选择发布模板,也可不选择" [(ngModel)]="moduleId">
          <nz-option *ngFor="let data of selectModule" nzLabel="{{data.moduleName}}" nzValue="{{data.id}}"></nz-option>
        </nz-select>
        <!--<input nz-input  formControlName="moduleId"  placeholder="请输入附件名称..."  />-->
      </nz-form-control>
    </nz-form-item>
    <button nz-button id="resetPush" style="display: none;" (click)="emptyPushForm($event)">清空</button>
  </form>
</nz-modal>