<div class="groupManagement">
  <div class="groupInfo">
    <div class="title">数据字典</div>
    <div class="groups">
      <overlay-scrollbars #osComponentRef1 [ngStyle]="{ height:'100%' }">
        <div [ngClass]="{'item':true,'checked':data.id == checkedDictionary.id}" *ngFor="let data of dictionaryList"
          (click)="checkDictionary(data)" [title]="data.dictionaryName">{{data.dictionaryName}}</div>
      </overlay-scrollbars>
    </div>
  </div>
  <div class="userInfo">
    <div class="top display_flex justify-content_space-between align-items_center">
      <div class="searchItem">
        <ng-container *ngIf="checkedDictionary.type === 'dictionaryTree'">
          <span class="label">父级被服分类</span>：
          <nz-select class="formItem" [nzDropdownMatchSelectWidth]="false" [nzShowSearch]="false" nzAllowClear
            nzPlaceHolder="请选择父级被服分类" [(ngModel)]="searchDto.parent" (ngModelChange)="getAll()">
            <ng-container *ngFor="let data of parentList">
              <nz-option [nzLabel]="data.name" [nzValue]="data.id"></nz-option>
            </ng-container>
          </nz-select>
        </ng-container>
      </div>
      <div class="display_flex align-items_center">
        <span>已选择 {{selectedDictionary.length}} 个</span>
        <button class="btn default" *ngIf="coopBtns.add&&dictionaryList.length" nzType="primary" nz-button
          (click)="showModal($event,'add')">新增</button>
        <button class="btn default" *ngIf="coopBtns.del&&dictionaryList.length" nzType="primary" nz-button
          (click)="showDelDictionaryModal($event)" [disabled]="allDataList.length===0">批量删除</button>
      </div>
    </div>
    <div class="table" *ngIf="!dictionaryLoading">
      <nz-table class="groupManagementTable" #rowSelectionTable [nzPageSize]="9999" [nzData]="allDataList"
        [nzShowPagination]="false" [nzScroll]="{ y: tableHeight+'px' }" [nzLoading]="dictionaryLoading">
        <thead>
          <tr class="thead">
            <th nzWidth="5%" nzShowCheckbox [(nzChecked)]="isAllDisplayDataChecked"
              (nzCheckedChange)="checkAll($event)"></th>
            <th nzWidth="15%">名称</th>
            <th nzWidth="15%" *ngIf="checkedDictionary.type === 'dictionaryTree'">父级被服分类</th>
            <th nzWidth="10%">值</th>
            <th nzWidth="10%">排序号</th>
            <th nzWidth="10%" *ngIf="checkedDictionary.type === 'dictionaryTree'">单价</th>
            <th nzWidth="15%">附加说明</th>
            <th nzWidth="20%">操作</th>
          </tr>
        </thead>
        <tbody>
          <tr *ngFor="let data of rowSelectionTable.data" (click)="selectedUser(data)">
            <td nzShowCheckbox [(nzDisabled)]="!coopBtns.edit" [(nzChecked)]="mapOfCheckedId[data.id]"
              (nzCheckedChange)="refreshStatus()"></td>
            <td>{{ data.name }}</td>
            <td *ngIf="checkedDictionary.type === 'dictionaryTree'">{{ data.parentName }}</td>
            <td>{{ data.value }}</td>
            <td>{{ data.orders }}</td>
            <td *ngIf="checkedDictionary.type === 'dictionaryTree'">{{ data.extra3 }}</td>
            <td>{{ data.desc }}</td>
            <td>
              <button nz-button nzType="primary" *ngIf="coopBtns.edit" nzSize="small" (click)="showModal($event,'edit',data)">编辑</button>
              <button nz-button nzType="primary" *ngIf="coopBtns.del" nzSize="small" class="ml8"
                (click)="showDelDictionaryModal($event,data)">删除</button>
            </td>
          </tr>
        </tbody>
      </nz-table>
    </div>
  </div>

  <!-- 新增/编辑模态框 -->
  <div class="save display_flex justify-content_flex-center align-items_center add" *ngIf="dictionaryModal">
    <div class="modalBody">
      <div class="title">{{add?'新增':'编辑'}}<i class="icon_transport transport-guanbi" (click)="hideModal()"></i>
      </div>
      <div class="content">
        <form nz-form [formGroup]="validateForm" class="addForm" (ngSubmit)="submitForm()">
          <nz-form-item>
            <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="key">数据字典</nz-form-label>
            <nz-form-control nzErrorTip="请选择数据字典!">
              <nz-select formControlName="key" nzPlaceHolder="请选择数据字典" nzDisabled>
                <nz-option *ngFor="let option of dictionaryList" [nzLabel]="option.dictionaryName" [nzValue]="option.key">
                </nz-option>
              </nz-select>
            </nz-form-control>
          </nz-form-item>
          <nz-form-item *ngIf="checkedDictionary.type === 'dictionaryTree'">
            <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="parent">父级被服分类</nz-form-label>
            <nz-form-control nzErrorTip="请选择父级被服分类!">
              <nz-select formControlName="parent" nzPlaceHolder="请选择父级被服分类">
                <nz-option *ngFor="let option of parentList" [nzLabel]="option.name" nzValue="{{option.id}}">
                </nz-option>
              </nz-select>
            </nz-form-control>
          </nz-form-item>
          <nz-form-item>
            <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="name">名称</nz-form-label>
            <nz-form-control nzErrorTip="请输入名称!">
              <nz-input-group>
                <input nz-input formControlName="name" placeholder="请输入名称" (input)="changeValue($event)" />
              </nz-input-group>
            </nz-form-control>
          </nz-form-item>
          <nz-form-item>
            <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="value">值</nz-form-label>
            <nz-form-control [nzErrorTip]="checkedDictionary.type === 'dictionary' ? '' : '请输入值!'">
              <nz-input-group>
                <input nz-input formControlName="value" placeholder="请输入值" [disabled]="checkedDictionary.type === 'dictionary'" [readonly]="checkedDictionary.type === 'dictionary'" />
              </nz-input-group>
            </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="请输入排序号!">
              <nz-input-group>
                <nz-input-number formControlName="orders" placeholder="请输入排序号" [nzMin]="0" [nzStep]="1" [nzPrecision]="0"></nz-input-number>
              </nz-input-group>
            </nz-form-control>
          </nz-form-item>
          <nz-form-item *ngIf="checkedDictionary.type === 'dictionaryTree'">
            <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="extra3">单价</nz-form-label>
            <nz-form-control nzErrorTip="请输入单价!">
              <nz-input-group>
                <nz-input-number formControlName="extra3" placeholder="请输入单价" [nzMin]="0" [nzStep]="1" [nzPrecision]="2"></nz-input-number>
              </nz-input-group>
            </nz-form-control>
          </nz-form-item>
          <nz-form-item>
            <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="desc">附加说明</nz-form-label>
            <nz-form-control nzErrorTip="请输入附加说明!">
              <nz-input-group>
                <input nz-input formControlName="desc" placeholder="请输入附加说明" />
              </nz-input-group>
            </nz-form-control>
          </nz-form-item>
        </form>
      </div>
      <div class="display_flex justify-content_flex-center">
        <button nzType="primary" [nzLoading]="btnLoading" nz-button (click)="submitForm()">确认</button>
        <button class="btn cancel" nz-button nzType="default" (click)="hideModal()">取消</button>
      </div>
    </div>
  </div>
  <!-- 删除模态框 -->
  <app-dialog-delete [delModal]="delDictionaryModal" (hideDelModalEvent)="hideDelDictionaryModal()" [btnLoading]="btnLoading"
    (confirmDelEvent)="confirmDictionaryDel()" content="您确认要删除吗？"></app-dialog-delete>
</div>

<!-- 操作成功/失败提示框 -->
<app-prompt-modal *ngIf="promptModalShow" [content]="promptContent" [success]="ifSuccess" [show]="promptModalShow"
  [info]="promptInfo">
</app-prompt-modal>
