<nz-drawer [(nzVisible)]="collapse" [nzPlacement]="dir === 'rtl' ? 'left' : 'right'" [nzWidth]="300"
  (nzOnClose)="toggle()">
  <div *nzDrawerContent class="setting-drawer__content">
    <div class="setting-drawer__body">
      <h3 class="setting-drawer__title">整体风格设置</h3>
      <div class="setting-drawer__blockChecbox">
        <div *ngFor="let t of themes" class="setting-drawer__blockChecbox-item" (click)="setLayout('theme', t.key)"
          [nz-tooltip]="t.title">
          <img src="{{ t.img }}" alt="{{ t.key }}" />
          <div *ngIf="layout.theme === t.key" class="setting-drawer__blockChecbox-selectIcon">
            <i nz-icon nzType="check"></i>
          </div>
        </div>
      </div>
    </div>
    <div class="setting-drawer__body setting-drawer__theme">
      <h3 class="setting-drawer__title">主题色</h3>
      <span *ngFor="let c of colors" (click)="changeColor(c.color)" nz-tooltip="c.key" class="setting-drawer__theme-tag"
        [ngStyle]="{ 'background-color': c.color }">
        <i *ngIf="color === c.color" nz-icon nzType="check"></i>
      </span>
    </div>
    <nz-divider></nz-divider>
    <div class="setting-drawer__body">
      <h3 class="setting-drawer__title">导航模式</h3>
      <div class="setting-drawer__blockChecbox">
        <div *ngFor="let t of menuModes" class="setting-drawer__blockChecbox-item" (click)="setLayout('menu', t.key)"
          nz-tooltip="{{ t.title }}">
          <img src="{{ t.img }}" alt="{{ t.key }}" />
          <div *ngIf="layout.menu === t.key" class="setting-drawer__blockChecbox-selectIcon">
            <i nz-icon nzType="check"></i>
          </div>
        </div>
      </div>
      <div class="setting-drawer__body-item">
        内容区域宽度
        <nz-select [(ngModel)]="layout.contentWidth" (ngModelChange)="setLayout('contentWidth', layout.contentWidth)"
          nzSize="small">
          <nz-option *ngFor="let i of contentWidths" [nzLabel]="i.title" [nzValue]="i.key" [nzDisabled]="i.disabled">
          </nz-option>
        </nz-select>
      </div>
      <div class="setting-drawer__body-item">
        固定 Header
        <nz-switch nzSize="small" [(ngModel)]="layout.fixedHeader"
          (ngModelChange)="setLayout('fixedHeader', layout.fixedHeader)"></nz-switch>
      </div>
      <div class="setting-drawer__body-item" nz-tooltip="{{ !brand.fixedHeader ? '固定 Header 时可配置' : '' }}"
        nzTooltipPlacement="left">
        <span [style.opacity]="!brand.fixedHeader ? 0.5 : 1">下滑时隐藏 Header</span>
        <nz-switch [nzDisabled]="!brand.fixedHeader" nzSize="small" [(ngModel)]="layout.autoHideHeader"
          (ngModelChange)="setLayout('autoHideHeader', layout.autoHideHeader)"></nz-switch>
      </div>
      <div class="setting-drawer__body-item" nz-tooltip="{{ brand.menu === 'top' ? '侧边菜单布局时可配置' : '' }}"
        nzTooltipPlacement="left">
        <span [style.opacity]="brand.menu === 'top' ? 0.5 : 1">固定侧边菜单</span>
        <nz-switch [nzDisabled]="brand.menu === 'top'" nzSize="small" [(ngModel)]="layout.fixSiderbar"
          (ngModelChange)="setLayout('fixSiderbar', layout.fixSiderbar)"></nz-switch>
      </div>
      <div class="setting-drawer__body-item" nz-tooltip="{{ brand.menu === 'top' ? '' : '顶部菜单布局时可配置' }}"
        nzTooltipPlacement="left">
        <span [style.opacity]="brand.menu !== 'top' ? 0.5 : 1">只显示图标</span>
        <nz-switch [nzDisabled]="brand.menu !== 'top'" nzSize="small" [(ngModel)]="layout.onlyIcon"
          (ngModelChange)="setLayout('onlyIcon', layout.onlyIcon)"></nz-switch>
      </div>
    </div>
    <nz-divider></nz-divider>
    <div class="setting-drawer__body">
      <h3 class="setting-drawer__title">其他设置</h3>
      <div class="setting-drawer__body-item">
        色弱模式
        <nz-switch nzSize="small" [(ngModel)]="layout.colorWeak"
          (ngModelChange)="setLayout('colorWeak', layout.colorWeak)"></nz-switch>
      </div>
    </div>
    <nz-divider></nz-divider>
    <button (click)="copy()" type="button" nz-button nzBlock>拷贝设置</button>
    <nz-alert class="mt-md" nzType="warning" nzMessage="配置栏只在开发环境用于预览，生产环境不会展现，请拷贝后手动修改配置文件"></nz-alert>
  </div>
</nz-drawer>
<div class="setting-drawer__handle" [ngClass]="{ 'setting-drawer__handle-opened': collapse }" (click)="toggle()">
  <i nz-icon [nzType]="!collapse ? 'setting' : 'close'" class="setting-drawer__handle-icon"></i>
</div>