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

@Component({
  selector: 'app-album-add-content',
  template: `

<cg-pager 
    [remoteUrl]="remoteUrl"
    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]="['order', 'status', 'publishTime', 'date','lastMod']"
  ></cg-pager>

  <ng-template #listTemplate  let-list="list" >
    <div nz-row [nzGutter]="[20, 20]" class="pt-4 pb-4 scroll">
      <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;
    }

    .scroll {
      height: 60vh;
      overflow-y: auto;
    }
    
  `
  ]
})
export class AlbumAddContentComponent implements OnInit {

  @Input() id: string;

  constructor() { }

  ngOnInit(): void {
    this.remoteUrl = `/napi/coloring/web/album/contents/${this.id}`;
  }

  remoteUrl: string;

  refreshTrigger: number = 0;

  inputFilters: any = { status: 9000, use: 'album' };


  selectContents: any[] = [];
  onItemClick(item) {
    let index = this.selectContents.findIndex(e => e._id == item._id);
    if (index < 0) {
      this.selectContents.push(item);
    } else {
      this.selectContents.splice(index, 1);
    }
  }

  isSelect(item) {
    return this.selectContents.find(e => e._id == item._id) ? true : false;
  }

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


  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: 1,
      fullWidth: true,
      optionsUrl : '/napi/web/epg/options',
    },
    {
      data: 'use',
      title: $localize`用途`,
      filterType: FilterType.radio,
      options: [
        { label: $localize`日常`, value: 'normal' },
        { label: $localize`每日`, value: 'daily' },
        { label: $localize`专辑`, value: 'album' },
        { label: $localize`收集`, value: 'collection' },
      ],
      span: 3,
    },
    {
      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,
    },

  ];

}
