import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';

@Component({
  selector: 'art-card',
  template: `
  <div class="art-card border rounded d-flex flex-column text-secondary " >
    <div class="img d-flex  flex-column align-items-center position-relative" (click)="itemClick.emit(item)">
      <img [src]="item?.thumb" loading="lazy" />
    </div>

    <div class="p-1">

      <div class="d-flex flex-row flex-nowrap">
        <art-status [showText]="false" [data]="item"></art-status>
        <nz-tag  nzColor="default">{{item.width}}x{{item.height}}</nz-tag>
        <nz-tag *ngIf="item.use == 'normal'" nzColor="blue" class="clickable" (click)="useClick.emit(item.use)" i18n>日常</nz-tag>
        <nz-tag *ngIf="item.use == 'daily'" nzColor="purple" class="clickable" (click)="useClick.emit(item.use)" i18n>每日</nz-tag>
        <nz-tag *ngIf="item.use == 'album'" nzColor="volcano" class="clickable" (click)="useClick.emit(item.use)" i18n>专辑</nz-tag>
        <nz-tag *ngIf="item.use == 'collection'" nzColor="orange" class="clickable" (click)="useClick.emit(item.use)" i18n>合集</nz-tag>
        <nz-tag *ngIf="item.use != 'normal' && item.use != 'daily' && item.use != 'album' && item.use != 'collection'" nzColor="default" class="clickable" (click)="useClick.emit(item.use)">{{item.use}}</nz-tag>
      </div>

      <div>
        <ng-container i18n>色块</ng-container>: {{item.coloredAreaCount}}/<span style="font-weight: bold; font-size: 1.5em;">{{item.areaCount}}</span>
        <span class="ms-2" i18n>评分</span>: <span style="color:orange ;font-weight: bold; font-size: 1.5em;">{{item.score}}</span>
      </div>

      <div class="d-flex flex-row align-items-center">
          <nz-tag *ngIf="!hideAuthor" (click)="authorClick.emit(item.user._id)" class="clickable" >
          {{item.user?.username}} 
        </nz-tag>
        <span i18n>于:</span>
        <span>
          {{item.date  | dateFormat}}
        </span>
        
      </div>
      <div *ngIf="item.status == 9000">
        <ng-container i18n>上线时间</ng-container>: {{item.publishTime | dateFormat  }}
      </div>
      <div [innerHTML]="item.name"> </div>

      <!--
      <div *ngIf="item.colorUser">
        上色:
        <a class="badge badge-light" [routerLink]="['/pages/color-user/' + item.colorUser.username]"
          routerLinkActive="active">
          {{item.colorUser.username}}
        </a>
      </div>-->
      
      <div>
        <nz-tag *ngIf="item?.lock" nzColor="magenta"> <i class="fal fa-lock"></i> </nz-tag>
        <ng-container *ngIf="item.tags">
          <nz-tag *ngFor="let tag of item.tags" class="clickable" nzColor="default" (click)="tagClick.emit(tag)" [innerHTML]="tag"></nz-tag>
        </ng-container>
      </div>

    </div>


    <div class="p-2" *ngIf="item.drop">
      <p>
        <ng-container i18n>删除状态</ng-container>：{{item.drop}}
      </p>
      <p>
      <ng-container i18n>删除原因</ng-container>：{{item.dropReason}}
      </p>
    </div>

    <i *ngIf="showTrash" class="box-delete fal fa-trash-alt"
      nz-popconfirm i18n-nzPopconfirmTitle nzPopconfirmTitle="确定移除该项吗?" (nzOnConfirm)="onTrash()"></i>
   
  </div>

  `,
  styles: [

    `

:host {
  background-color:#fff;
  overflow-x:hidden;
}

.clickable {
  cursor:pointer;
}

.art-card{
  position:relative;
}
.art-card:hover{
  /*box-shadow: 0 .125rem .25rem rgba(0,0,0,.075)!important*/
  box-shadow:0  0 .7rem rgba(0,0,0,.15)!important
}
.status{
  position:absolute;
  left:-1px;
  top:-1px;
}
.size{
  position:absolute;
  top:-1px;
  right:-1px;
  margin:0;
}

div.img{
  width:100%;
  aspect-ratio: 1 / 1;
  overflow:hidden;
  background-color:#fefefe;
}

img{
  height:100%;
  cursor : pointer;
}

.box-delete {
  top:-8px;
  right:-8px;
  font-size: 8px !important;
  position: absolute;
  text-align: center;
  line-height: 16px;
  width:16px;
  height:16px;
  border-radius: 50%;
  background: #999;
  color:white;
  text-shadow: none;
  cursor: pointer;
}

.box-delete:hover {
  background: #ff0000;
}

    `
  ]
})
export class ArtCardComponent implements OnInit {

  @Input('data') item: any;
  @Input() hideAuthor: boolean = false;
  @Output() itemClick = new EventEmitter<any>();
  @Output() tagClick = new EventEmitter<string>();
  @Output() useClick = new EventEmitter<string>();
  @Output() authorClick = new EventEmitter<string>();

  @Input() showTrash: boolean = false;
  @Output('onTrash') _onTrash = new EventEmitter<any>();

  constructor() { }

  ngOnInit(): void {
  }

  onTrash() {
    this._onTrash.emit(this.item);
  }

}

export interface Art {
  thumb: string,
}
