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

@Component({
  selector: 'task-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?.art.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.art.width}}x{{item.art.height}}</nz-tag>
        <nz-tag *ngIf="item.art.use == 'normal'" nzColor="blue" i18n>日常</nz-tag>
        <nz-tag *ngIf="item.art.use == 'daily'" nzColor="purple" i18n>每日</nz-tag>
        <nz-tag *ngIf="item.art.use == 'album'" nzColor="volcano" i18n>专辑</nz-tag>
        <nz-tag *ngIf="item.art.use == 'collection'" nzColor="orange" i18n>合集</nz-tag>
        <nz-tag *ngIf="item.art.use != 'normal' && item.art.use != 'daily' && item.art.use != 'album' && item.art.use != 'collection'" nzColor="default">{{item.art.use}}</nz-tag>
      </div>

      <div [innerHTML]="item.art.name"></div>

      <div>
        {{item.art.user?.username}}
        <span class="ms-2"> {{item.art.date  | dateFormat}} </span>
      </div>

      <div class="d-flex flex-row align-items-center">
        <span i18n>状态</span>:
        <nz-tag *ngIf="item.done" nzColor="green" class="clickable ms-1" i18n>已完成</nz-tag>
        <nz-tag *ngIf="!item.done" nzColor="pink" class="clickable ms-1" i18n>未完成</nz-tag>
        <span class="ms-2"> {{item.lastMod  | dateFormat}} </span>
      </div>
      
      <div *ngIf="!hideAuthor" class="d-flex flex-row align-items-center">
        <span> {{item.time | dateFormat}} </span>
        <span class="ms-1" i18n>分配给</span>: <nz-tag *ngIf="!hideAuthor" (click)="userClick.emit(item.user._id)" class="clickable" >{{item.user?.username}} </nz-tag>
      </div>

      <div *ngIf="item.done">
        <span i18n>完成时间</span>: <span> {{item.lastMod | dateFormat}} </span>
      </div>

    </div>

  </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 TaskCardComponent implements OnInit {

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

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

  constructor() { }

  ngOnInit(): void {
  }

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

  get myScore() {
    let score = (this.item.pageScore ?? 0) + (this.item.coloredScore ?? 0) + (this.item.playScore ?? 0);
    let num = (this.item.pageScore ? 1 : 0) + (this.item.coloredScore ? 1 : 0) + (this.item.playScore ? 1 : 0)
    if (num == 0) return null;
    return Math.round((score / num * 100)) / 100;
  }

}

export interface Art {
  thumb: string,
}
