import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
import { FilterItem, FilterType } from 'src/app/lib/pager/pager-filter.component';

@Component({
  selector: 'select-art',
  template: `


<cg-pager
    [userRouter]="false"
    remoteUrl="/napi/web/art/pager/all"
    remoteHeaderUrl="/napi/web/art/pager/headers"
    [defaultOrder]="'desc'"
    [defaultOrderBy]="'date'"
    [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]="['areaCount', 'status', 'publishTime', 'date','lastMod' ]"
  ></cg-pager>

  <ng-template #listTemplate  let-list="list" >
    <div nz-row [nzGutter]="[20, 20]" class="pt-4 pb-4" >
      <art-card   *ngFor="let item of list?.data" [ngClass]="{'select': isSelect(item)}"
        nz-col  [nzSm]="8" [nzMd]="6" [nzLg]="6" [nzXl]="4" [nzXXl]="3"	
        [data]="item"  
        [hideAuthor]="false"
        (itemClick)="onItemClick($event)"
        (tagClick)="filter('tags', [$event])"
        (authorClick)="filter('user', [$event])"
         >
      </art-card>
    </div>
  </ng-template>

  
  `,
  styles: [
    `
    .select {
      background: #dcdcdc;
      border-style: dashed;
      border-width: 2px;
      border-color: green;
    }

    :host {
      padding-bottom:100px;
      display:block;
    }

    `
  ]
})

export class PortalContentSelectArtComponent implements OnInit {

  @Input() productId: string;

  @Output() itemClick = new EventEmitter<any>();
  
  @Input() refreshTrigger : any;

  @Input()
  filterConfig: FilterItem[] = [
    {
      data: 'date',
      title: $localize`上传`,
      filterType: FilterType.dateRange,
      span: 2,
    },
    {
      data: 'publishTime',
      title: $localize`发布`,
      filterType: FilterType.dateRange,
      span: 2,
    },
    {
      data: 'epgs',
      title: 'EPG',
      filterType: FilterType.select,
      mode : 'default',
      span: 2,
      fullWidth: true,
      optionsUrl : '/napi/web/epg/options',
    },
    {
      data: 'tags',
      title: $localize`标签`,
      filterType: FilterType.select,
      mode : 'tags',
      span: 2,
      fullWidth: true,
      optionsUrl : '/napi/web/art/agg/tags',
    },
    {
      data: 'user',
      title: $localize`作者`,
      filterType: FilterType.select,
      mode : 'multiple',
      span: 2,
      fullWidth: true,
      optionsUrl : '/napi/web/user/select/options',
    },
    {
      data: 'hasSpecial',
      title: $localize`彩绘`,
      filterType : FilterType.select,
      options: [
        { label: $localize`是`, value: true },
        { label: $localize`否`, value: false },
      ],
      span: 1,
    },
    {
      data: 'mystery',
      title: $localize`神秘图`,
      filterType : FilterType.select,
      options: [
        { label: $localize`是`, value: true },
        { label: $localize`否`, value: false },
      ],
      span: 1,
    },
    {
      data: 'ai',
      title: $localize`AI`,
      filterType : FilterType.select,
      options: [
        { label: $localize`是`, value: true },
        { label: $localize`否`, value: false },
      ],
      span: 1,
    },
    {
      data: 'width',
      title: $localize`尺寸`,
      filterType : FilterType.select,
      options: [
        { label: '2000', value: 2000 },
        { label: '1500', value: 1500 },
      ],
      span: 1,
    },
    {
      data: 'lock',
      title: $localize`加锁`,
      filterType : FilterType.select,
      options: [
        { label: $localize`是`, value: true },
        { label: $localize`否`, value: false },
      ],
      span: 1,
    },

  ];


  inputFilters: any = { status: 9000 };

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

  constructor(
  ) {
  }

  selectItem: any;

  onItemClick(item: any) {
    if (!this.selectItem || this.selectItem._id != item._id) {
      this.selectItem = item;
    } else {
      this.selectItem = null;
    }
    this.itemClick.emit(this.selectItem);
  }

  isSelect(item) {
    return this.selectItem?._id == item._id;
  }

  ngAfterViewInit() { 
  }

  ngOnInit() {

  }

}

