<div class="list-template">
    <div class="list-template__content">
      <div class="list-template__top" nz-row>
        <div nz-col nzXl="15" class="list-template__btns justify-content_flex-start">
          <h2 class="qName">问卷名称：{{queryParamsName}}</h2>
          <button class="btn default" nz-button (click)="goToWorkAssignment()">返回</button>
        </div>
        <div nz-col nzXl="9" class="list-template__btns">
          <button class="btn default" nzType="primary" nz-button (click)="addModal()">新增问题</button>
          <button [disabled]="!checkedDepIds.length||!listOfData.length" class="btn default ml8" nzType="primary"
            nz-button (click)="showDelModal($event,checkedDepIds,'是否确定批量删除选中的问题？','删除','del')">批量删除</button>
        </div>
      </div>
      <div class="list-template__top" nz-row>
        <div nz-col nzXl='15' class="list-template__searchBox">
          <!-- <div class="list-template__searchItem">
            <span class="label label--big">快捷组合名称：</span>
            <input nz-input class="formItem" placeholder="请输入关键字" [(ngModel)]="searchCriteria.name" />
          </div>
          <div class="list-template__searchItem">
            <span class="label">工作模式：</span>
            <nz-select [nzDropdownMatchSelectWidth]="false" class="formItem" nzShowSearch nzPlaceHolder="请选择工作模式"
              [(ngModel)]="searchCriteria.workModel">
              <nz-option nzLabel="{{data.name}}" nzValue="{{data.id}}" *ngFor="let data of allWorkModel"></nz-option>
            </nz-select>
          </div> -->
        </div>
        <div nz-col nzXl="9" class="list-template__btns">
          <!-- <button class="btn default" nzType="primary" nz-button (click)="reset()">重置</button> -->
          <button class="btn default ml8" nzType="primary" nz-button (click)="getList(1)">搜索</button>
          <!-- <a class="btn default ml8" style="text-align: center;" [routerLink]="'/preview?token='+ queryParamsToken" target="_blank">预览</a> -->
          <a class="btn default ml8" style="text-align: center;" [queryParams]="{'token': queryParamsToken}" [routerLink]="['/preview']" target="_blank">预览</a>
        </div>
      </div>
      <div class="list-template__bottom">
        <nz-table class="list-template__nzTable" [nzData]="listOfData" nzSize="middle" [nzShowPagination]="false"
          [nzLoading]="loading1">
          <thead>
            <tr class="thead">
              <th nzWidth="5%" nzShowCheckbox [(nzChecked)]="isAllDisplayDataChecked"
                (nzCheckedChange)="checkAll($event)"></th>
              <th nzWidth="5%">排序号</th>
              <th nzWidth="60%">问题描述</th>
              <th nzWidth="10%">答题方式</th>
              <th nzWidth="20%">操作</th>
            </tr>
          </thead>
          <tbody>
            <tr *ngFor="let data of listOfData;let i = index" (click)="selectedListData(data.id)">
              <td nzShowCheckbox [(nzChecked)]="mapOfCheckedId[data.id]" (nzCheckedChange)="refreshStatus()"></td>
              <td>{{data.orders || '无'}}</td>
              <td>{{data.describe || '无'}}</td>
              <td>{{data.answerMode?data.answerMode.name:'无'}}</td>
              <td>
                <div class="coop">
                  <!-- <span (click)="copy($event,data)">复制</span> -->
                  <span (click)="edit($event,data)">修改</span>
                  <span (click)="showDelModal($event,data.id,'是否确定删除该问题？','删除','del')">删除</span>
                </div>
              </td>
            </tr>
          </tbody>
        </nz-table>
        <div class="list-template__pagination">
          <nz-pagination nzShowSizeChanger [(nzPageIndex)]="pageIndex" [(nzTotal)]="listLength" [(nzPageSize)]="pageSize"
            (nzPageIndexChange)="getList(0)" (nzPageSizeChange)="getList(0)">
          </nz-pagination>
        </div>
      </div>
    </div>
  
    <!-- 新增/编辑模态框 -->
    <div class="save display_flex justify-content_flex-center align-items_center add" *ngIf="modal">
      <div class="modalBody">
        <div class="title">{{add?"新增":"编辑"}}问题<i class="icon_transport transport-guanbi" (click)="hideAddModal()"></i>
        </div>
        <div class="content">
          <form nz-form [formGroup]="validateForm" class="addForm">
            <nz-form-item>
              <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="describe">问题描述</nz-form-label>
              <nz-form-control nzErrorTip="请输入问题描述!">
                <textarea rows="2" class="mt8" formControlName="describe" nz-input placeholder="请输入问题描述"></textarea>
              </nz-form-control>
            </nz-form-item>
            <nz-form-item>
            <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="orders">排序号</nz-form-label>
              <nz-form-control nzErrorTip="请输入排序号!">
                <input #inputElement nz-input placeholder="输入一个整数" formControlName="orders" (ngModelChange)="onChange($event)" />
              </nz-form-control>
            </nz-form-item>
            <nz-form-item>
              <nz-form-label [nzSpan]="6" [nzXs]="24" nzRequired nzFor="answerMode">答题方式</nz-form-label>
              <nz-form-control nzErrorTip="请选择答题方式!">
                <nz-select [nzDropdownMatchSelectWidth]="false" formControlName="answerMode" nzShowSearch nzPlaceHolder="请选择答题方式">
                  <nz-option nzLabel="{{data.name}}" nzValue="{{data.id}}" *ngFor="let data of answerModes"></nz-option>
                </nz-select>
              </nz-form-control>
            </nz-form-item>
          </form>
          <ng-container *ngIf="validateForm.value.answerMode == answerModesRadioValue">
            <div *ngFor="let item of qItems;let i = index;">
              <input nz-input [placeholder]="'选项'+ (i + 1)" class="mb8" [(ngModel)]="item.value" />
            </div>
          </ng-container>
        </div>
        <div class=" display_flex justify-content_flex-center">
          <button nzType="primary" nz-button (click)="submitForm()" [nzLoading]="btnLoading">保存</button>
          <button class="btn cancel" nz-button nzType="default" (click)="hideAddModal()">取消</button>
        </div>
      </div>
    </div>
    <!-- 删除模态框 -->
    <app-dialog-delete [delModal]="delModal" (hideDelModalEvent)="hideDelModal()" [btnLoading]="btnLoading"
      (confirmDelEvent)="confirmDel()" [content]="tipsMsg1"></app-dialog-delete>
  </div>
  <!-- 提示模态框 -->
  <div class="save display_flex justify-content_flex-center align-items_center" *ngIf="tipModal">
    <div class="modalBody">
      <div class="title">提示<i class="icon_transport transport-guanbi" (click)="hideTipModal()"></i></div>
      <div class="content">
        <div class="icon"><i class="icon_transport transport-wenhao"></i></div>
        <div class="defeat" style="font-size: 16px;">是否确定离开该界面，如果未点击生效，数据可能会遗失？</div>
      </div>
      <div class="display_flex justify-content_flex-center">
        <button nz-button nzType="primary" (click)="confirmTip()">确认</button>
        <button class="btn cancel " nz-button nzType="default" (click)="hideTipModal()">关闭</button>
      </div>
    </div>
  </div>
  <!-- 操作成功/失败提示框 -->
  <app-prompt-modal *ngIf="promptModalShow" [content]="promptContent" [success]="ifSuccess" [show]="promptModalShow"
    [info]="promptInfo" [loading]="showLoading">
  </app-prompt-modal>
  <!-- 查看详情 -->
  <router-outlet></router-outlet>
  <!-- 遮罩 -->
  <app-mask *ngIf="maskFlag"></app-mask>
  