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

@Component({
  selector: 'album-card',
  template: `
  <div class="album-card border rounded d-flex flex-column text-secondary " >
    <div class="d-flex flex-row justify-content-between">
      <div class="p-1"><strong>{{item?.title ? item?.title['zh'] : ''}}</strong></div>
      <span class="p-1" [ngClass]="{'text-success': item.enabled, 'text-danger': !item?.enabled}"><i class="fas fa-circle"></i></span>
    </div>
    
    <div class="img d-flex  flex-column align-items-center position-relative" (click)="itemClick.emit(item)">
      <img [src]="item?.cover" loading="lazy" />
    </div>

    <div class="p-1">

      <div class="d-flex flex-row justify-content-between">
        <span i18n>内容数：{{item?.size}}</span>
        <span i18n>{{item?.timeCreate | dateFormat}}</span>
      </div>


    </div>

  </div>

  `,
  styles: [
    `
:host {
  background-color:#fff;
  overflow-x:hidden;
}

.clickable {
  cursor:pointer;
}

.album-card{
  position:relative;
}
.album-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: 2 / 1;
  overflow:hidden;
  background-color:#fefefe;
}

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

    `
  ]
})


export class AlbumCardComponent implements OnInit {

  @Input('data') item: any;
  @Output() itemClick = new EventEmitter<any>();
  
  constructor() { }

  ngOnInit(): void {
    console.log(this.item);
  }

}
