import { Component, Input, OnInit } from '@angular/core';
import { NzMessageService } from 'ng-zorro-antd/message';
import { NzModalService } from 'ng-zorro-antd/modal';
import { DailySetContentComponent } from './daily-set-content.component';
import { DailyService } from './daily.service';
import { firstValueFrom } from 'rxjs';

@Component({
  selector: 'app-daily-cell',
  template: `

  <div>
    <div class="text-start">
      {{date | dateFormat : 'M/d'}}
    </div>
    <div class="box">
      <img class="img" *ngIf="data" [src]="data?.artInfo.thumb" loading="lazy" />
      <button *ngIf="!data" class="box-add btn btn-sm" (click)="onSetDaily($event)"><i class="fal fa-plus"></i> <ng-container i18n>添加</ng-container></button>
      <button *ngIf="data" class="box-replace btn btn-sm" (click)="onSetDaily($event)"><i class="fal fa-exchange"></i> <ng-container i18n>替换</ng-container></button>
      <!-- <span *ngIf="!data" class="mb-5"><i class="fal fa-plus me-1" ></i><ng-container i18n>添加</ng-container></span> -->
      <!-- <i *ngIf="data" class="box-delete fal fa-trash-alt"
        nz-popconfirm i18n-nzPopconfirmTitle nzPopconfirmTitle="确定移除该项吗?" (nzOnConfirm)="onTrash()"></i> -->

    </div>
  </div>
  `,
  styles: [`

  :host{
    display:block;
    overflow-y:hidden;
  }

  .box {
    box-sizing:border-box;
    padding:1px;
    width:100%;
    aspect-ratio: 1 / 1;
    text-align:center;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
  }

  .box-add {
    position: absolute;
    text-align: center;
    left: 50%;
    top:50%;
    transform: translate(-50%, -50%);
  }

  .box-replace {
    position: absolute;
    text-align: center;
    left: 50%;
    top:90%;
    transform: translate(-50%, -50%);
  }

  .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;
  }


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

  `
  ]
})
export class DailyCellComponent implements OnInit {

  @Input() productId: string;
  @Input() data: any;
  @Input() date: Date;
  
  constructor(
    private dailayService: DailyService,
    public message: NzMessageService,
    public modal: NzModalService,
  ) { }

  ngOnInit(): void {

  }

  onSetDaily(event: Event) {
    event.stopPropagation();
    if (!this.productId) {
      this.message.error($localize`请选择产品`);
      return;
    }
    this.modal.create({
      nzTitle: $localize`请选择当日daily图`,
      nzCentered: true,
      nzWidth: '90vw',
      nzContent: DailySetContentComponent,
      nzComponentParams: {
        productId: this.productId,
      },
      nzOnOk: (component) => {
        if (component.selectContent) {
          let formData = {
            dailyId: this.data?._id,
            artId: component.selectContent._id,
            dailyDate: this.date,
          }
          firstValueFrom(this.dailayService.set(this.productId, formData)).then((resp) => {
            this.data = resp;
            this.message.success($localize`设置成功`);
          }).catch(err => this.message.error(err.error?.message || err.message));

        }
      }
    })
  }

  onTrash() {
    firstValueFrom(this.dailayService.remove(this.productId, this.data._id)).then((resp) => {
      this.data = null;
    }).catch(err => this.message.error(err.error?.message || err.message));
  }

}
