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

@Component({
  selector: 'score-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>
        <span i18n>综合评分</span>: <span style="color:orange ;font-weight: bold; font-size: 1.5em;">{{item.art.score}}</span>
      </div>

      <div *ngIf="hideAuthor">
        <span i18n>我的评分</span>: <span style="color:orange ;font-weight: bold; font-size: 1.5em;">{{myScore}}</span>
        <span class="ms-2"> {{item.lastMod  | dateFormat}} </span>
      </div>
      
      <div *ngIf="!hideAuthor" class="d-flex flex-row align-items-center">
        <nz-tag *ngIf="!hideAuthor" (click)="userClick.emit(item.user._id)" class="clickable" >{{item.user?.username}} </nz-tag><span i18n>评</span>: <span class="ms-1" style="color:orange ;font-weight: bold; font-size: 1.5em;">{{myScore}}</span>
        <span class="ms-2" style="font-size:0.9em">详情如下</span>:
      </div>
      
      <div><ng-container i18n>线稿评分</ng-container>:<nz-rate [ngModel]="item.pageScore" nzDisabled></nz-rate></div>
      <div><ng-container i18n>上色效果</ng-container>:<nz-rate [ngModel]="item.coloredScore" nzDisabled></nz-rate></div>
      <div><ng-container i18n>游戏体验</ng-container>:<nz-rate [ngModel]="item.playScore" nzDisabled></nz-rate></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 ScoreCardComponent 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,
}
