<nz-spin [nzSpinning]="isLoading">

  <div>
    <nz-page-header [nzGhost]="false">
      <nz-page-header-title i18n>作品详情</nz-page-header-title>
      <nz-page-header-subtitle>
        <ng-container *ngIf="!art?.drop">
          <art-status [data]="art"></art-status>
          <nz-tag *ngIf="art?.lock" nzColor="magenta"> <i class="fal fa-lock"></i> </nz-tag>
        </ng-container>

        <nz-tag nzColor="#dc3545" *ngIf="art?.drop" i18n>已删除</nz-tag>
      </nz-page-header-subtitle>
      <nz-page-header-extra *ngIf="art">
      </nz-page-header-extra>

      <nz-page-header-content *ngIf="!art && error">
        <nz-result nzStatus="404" nzTitle="{{error.status}}" nzSubTitle="{{error?.error?.message}}"> </nz-result>
      </nz-page-header-content>


      <nz-page-header-content *ngIf="art">
        <nz-descriptions nzSize="small" [nzColumn]="3">
          <nz-descriptions-item nzTitle="{{title('user')}}" [nzSpan]="1">
            <button nz-button nzType="link" (click)="onClickUser(art.user._id)">{{art.user?.name ||
              art.user?.username}}</button>
          </nz-descriptions-item>

          <nz-descriptions-item nzTitle="{{title('name')}}">{{art.name}} &nbsp;&nbsp;
            <button class="btn   border-0" (click)="openModal(meta, modalTitle('meta'))"> <i
                class="fal fa-edit m-0"></i> </button>
          </nz-descriptions-item>

          <nz-descriptions-item nzTitle="{{title('desc')}}">{{art.desc}} &nbsp;&nbsp;
            <button class="btn   border-0" (click)="openModal(meta, modalTitle('meta'))"> <i
                class="fal fa-edit m-0"></i> </button>
          </nz-descriptions-item>

          <nz-descriptions-item i18n-nzTitle nzTitle="类型" [nzSpan]="1">
            <nz-tag *ngIf="art.special" nzColor="purple" i18n>炫彩</nz-tag>
            <nz-tag *ngIf="!art.special" i18n>普通</nz-tag>
          </nz-descriptions-item>
          <!-- 
          <nz-descriptions-item i18n-nzTitle nzTitle="用途" [nzSpan]="1">
            <nz-select nzSize="small" [ngModel]="art.use" (ngModelChange)="onUseChange($event)">
              <nz-option nzValue="normal" i18n-nzLabel nzLabel="日常"></nz-option>
              <nz-option nzValue="daily" i18n-nzLabel nzLabel="每日"></nz-option>
              <nz-option nzValue="album" i18n-nzLabel nzLabel="专辑"></nz-option>
              <nz-option nzValue="collection" i18n-nzLabel nzLabel="合集"></nz-option>
            </nz-select>
          </nz-descriptions-item> -->

          <nz-descriptions-item i18n-nzTitle nzTitle="神秘图" [nzSpan]="1">
            <nz-switch nzSize="small" [nzDisabled]="true" [ngModel]="art.mystery"></nz-switch>
          </nz-descriptions-item>

          <!-- <nz-descriptions-item i18n-nzTitle nzTitle="AI Prompt" [nzSpan]="1" *ngIf="art.ai">
            <editable (save)="updateAiPrompt()" (cancel)="cancelAiPrompt()">
              <ng-template viewMode>
                {{ art.aiPrompt }}
                <button class="btn border-0"> <i class="fal fa-edit m-0"></i> </button>
              </ng-template>
              <ng-template editMode>
                <input nz-input editableFocusable editableOnEnter editableOnEscape [(ngModel)]="aiPrompt" />
              </ng-template>
            </editable>
          </nz-descriptions-item> -->

          <nz-descriptions-item nzTitle="{{title('date')}}" [nzSpan]="1">{{art.date | dateFormat : 'yyyy/M/d H:m:s' }}
          </nz-descriptions-item>
          <nz-descriptions-item nzTitle="{{title('lastMod')}}" [nzSpan]="1">
            {{art.lastMod | dateFormat : 'yyyy/M/d H:m:s' }}
          </nz-descriptions-item>

          <nz-descriptions-item nzTitle="{{title('publishTime')}}" [nzSpan]="1" *ngIf="art.publishTime">
            {{art.publishTime | dateFormat: 'yyyy/M/d H:m:s' }}
          </nz-descriptions-item>
          <nz-descriptions-item nzTitle="{{title('publishBy')}}" [nzSpan]="1" *ngIf="art.publishBy">
            {{art.publishBy.name || art.publishBy.username }}
          </nz-descriptions-item>



          <nz-descriptions-item i18n-nzTitle nzTitle="尺寸"
            [nzSpan]="1">{{art.width}}x{{art.height}}</nz-descriptions-item>
          <nz-descriptions-item nzTitle="{{title('areaCount')}}/{{title('coloredAreaCount')}}" [nzSpan]="1">
            {{art.areaCount}}/{{art.coloredAreaCount}}
            - {{(art.coloredAreaCount / art.areaCount ) | percent}}
          </nz-descriptions-item>

          <nz-descriptions-item nzTitle="{{title('colorCount')}}" [nzSpan]="1">{{art.colorCount}}</nz-descriptions-item>


          <nz-descriptions-item nzTitle="{{title('tags')}}" [nzSpan]="1">
            <nz-tag *ngFor="let tag of art.tags" class="clickable" (click)="onClickTag(tag)">{{tag}}</nz-tag>
            <button class="btn   border-0" (click)="openModal(meta, modalTitle('meta'))"> <i
                class="fal fa-edit m-0"></i> </button>
          </nz-descriptions-item>


          <nz-descriptions-item i18n-nzTitle nzTitle="综合评分">
            <a style="color: dodgerblue" (click)="onClickScoreInfo(art)" i18n>
              {{art.score}}
            </a>
          </nz-descriptions-item>

          <nz-descriptions-item i18n-nzTitle nzTitle="拒稿理由" *ngIf="art.status == 500">
            {{art.refuseReason}}
            <button nz-button nzSize="small" nzType="link" (click)="onMarkPreview()" *ngIf="art.markImg">查看</button>
          </nz-descriptions-item>

        </nz-descriptions>
      </nz-page-header-content>
    </nz-page-header>
  </div>


  <div *ngIf="art" nz-row [nzGutter]="[20, 20]" class="pt-4 pb-4 text-center">
    <div nz-col [nzSm]="8" [nzMd]="6" [nzLg]="6" [nzXl]="6">
      <p i18n>线稿</p>
      <div class="thumb-item">
        <img class="thumb" [src]="art.binHash.page" />
      </div>
    </div>

    <div *ngIf="art.binHash.work" nz-col [nzSm]="8" [nzMd]="6" [nzLg]="6" [nzXl]="6">
      <p i18n>上色效果</p>
      <div class="thumb-item">
        <img class="thumb" [src]="art.binHash.work" />
      </div>
    </div>

    <div *ngIf="art.binHash.special" nz-col [nzSm]="8" [nzMd]="6" [nzLg]="6" [nzXl]="6">
      <p i18n>炫彩稿</p>
      <div class="thumb-item">
        <img class="thumb" [src]="art.binHash.special" />
      </div>
    </div>

    <div *ngIf="art.ai && art.binHash.aiImage" nz-col [nzSm]="8" [nzMd]="6" [nzLg]="6" [nzXl]="6">
      <p i18n>AI参考图</p>
      <div class="thumb-item">
        <img class="thumb" [src]="art.binHash.aiImage" />
      </div>
    </div>

  </div>

</nz-spin>




<ng-template #meta let-ref="modalRef">
  <art-meta [art]="art" (onSuccess)="loadData();ref.close()" (onCancel)="ref.close();"
    (onError)="message.error($event)"></art-meta>
</ng-template>