import { Component, Input, OnInit } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { FilterItem, FilterType } from 'src/app/lib/pager/pager-filter.component';
import { SysService } from '../sys/sys.service';

@Component({
  selector: 'app-score',
  template: `
    
    <nz-page-header *ngIf="!embedMode" [nzGhost]="false">
      <nz-page-header-title i18n>{{data?.title || '评分列表'}}</nz-page-header-title>
    </nz-page-header>


  <cg-pager 
    [remoteUrl]="remoteUrl"
    remoteHeaderUrl="/napi/coloring/web/score/headers"
    [defaultOrder]="'desc'"
    [defaultOrderBy]="'lastMod'"
    [listTemplate]="listTemplate"
    [pageSizeOptions]="[30, 60, 90, 120, 150, 180, 480]"
    [topPagination]="true"
    [bottomPagination]="true"
    [showOrder]="true"
    [showSearch]="true"
    [debug]="false"
    [refresh]="refreshTrigger"
    [filterConfig]="filterConfig"
    [inputFilters]="inputFilters"
    [orderColumns]="['time','lastMod' ]"
  ></cg-pager>

  <ng-template #listTemplate  let-list="list" >
    <div nz-row [nzGutter]="[20, 20]" class="pt-4 pb-4" 
      cdkDropList 
      id="list-1" 
      cdkDropListConnectedTo="list-2"
      [cdkDropListDisabled]="!embedMode" 
      [cdkDropListSortingDisabled]="true"
      [cdkDropListData]="list?.data"
       >
      <score-card   *ngFor="let item of list?.data" 
        nz-col  [nzSm]="8" [nzMd]="6" [nzLg]="6" [nzXl]="4" [nzXXl]="3"	
        [data]="item"  
        [hideAuthor]="hideAuthor"
        (itemClick)="onItemClick($event)"
        (userClick)="filter('user', [$event])"
        cdkDrag
         >
      </score-card>
    </div>
  </ng-template>

  `,
  styles: [
    `
    :host {
      padding-bottom:100px;
      display:block;
    }

    .cdk-drag-preview {
      box-sizing: border-box;
      border-radius: 4px;
      box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
                  0 8px 10px 1px rgba(0, 0, 0, 0.14),
                  0 3px 14px 2px rgba(0, 0, 0, 0.12);
    }

    .cdk-drag-placeholder {
      opacity: 0;
    }

    .cdk-drag-animating {
      transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
    }

    nz-select {
      width: 150px;
    }
    
    `
  ]
})
export class ScoreComponent implements OnInit {
  @Input() remoteUrl = '/napi/coloring/web/score/my';
  @Input() hideAuthor: boolean = false;
  @Input() hideUpload: boolean = false;
  @Input() embedMode: boolean = false;
  @Input() refreshTrigger: any;

  @Input()
  filterConfig: FilterItem[] = [
    {
      data: 'time',
      title: $localize`评分时间`,
      filterType: FilterType.dateRange,
      span: 2,
    },
    {
      data: 'user',
      title: $localize`评分人`,
      filterType: FilterType.select,
      mode: 'multiple',
      span: 2,
      fullWidth: true,
      optionsUrl: '/napi/web/user/select/options',
    },
  ];


  inputFilters: any;

  constructor(
    private router: Router,
    private activatedRoute: ActivatedRoute,
  ) {
    this.data = this.activatedRoute.snapshot.data;
    let { remoteUrl, hideAuthor, hideUpload } = this.activatedRoute.snapshot.data;
    this.remoteUrl = remoteUrl || this.remoteUrl;
    this.hideAuthor = hideAuthor;
    this.hideUpload = hideUpload;
    if (this.hideAuthor) {
      this.filterConfig = this.filterConfig.filter(c => c.data != 'user');
    }
  }

  filter(data, value) {
    console.log('filter', data, value);
    let filter = {};
    filter[data] = value;
    this.inputFilters = filter;
  }

  data: any;

  onItemClick(data: any) {
    this.router.navigate(['/pages/detail', data.art._id]);
  }

  ngAfterViewInit() { }

  ngOnInit() {
  }

}
