import { Component, OnInit, ViewChild } from '@angular/core';

@Component({
  selector: 'app-list-view-demo',
  templateUrl: './list-view-demo.component.html',
  styleUrls: ['./list-view-demo.component.scss']
})
export class ListViewDemoComponent implements OnInit {

  @ViewChild('listView') listView;

  listViewData = [
    {
      "id":"1111",//id作为唯一标识
      "imgSrc":"./img/1.png",
      "imgShow":true,
      "title":"PO20198989009",
      "subTitle":"华东地区项目的物资采购订购，分批付款",
      "owner":"张三",
      "startTime":"2015-07-04 15:30",
      "progressRate":"40",
      "progressError":false
    },
    {
      "id":"2222",
      "imgSrc":"./img/1.png",
      "imgShow":true,
      "title":"PO20198989009",
      "subTitle":"华北地区项目的物资采购订购，分批付款",
      "owner":"李四",
      "startTime":"2019-07-04 15:30",
      "progressRate":"80",
      "progressError":false
    },
    {
      "id":"3333",
      "imgSrc":"./img/1.png",
      "imgShow":true,
      "title":"PO20198989009",
      "subTitle":"华北地区项目的物资采购订购，分批付款",
      "owner":"曲丽丽",
      "startTime":"2011-07-04 15:30",
      "progressRate":"20",
      "progressError":false,
      "selectDisable":true,
      "checked":true
    },
    {
      "id":"4444",
      "imgSrc":"./img/1.png",
      "imgShow":true,
      "title":"PO20198989009",
      "subTitle":"华东地区项目的物资采购订购，分批付款",
      "owner":"曲丽",
      "startTime":"2019-07-04 15:30",
      "progressRate":"",
      "progressError":true,
    }
  ]

  //当前展示的数据，搜索后便是搜索后的数据列表
  currentListView;

  listViewData2;
  //当前选中的数据列表
  selectData = [];
  //搜索字段
  sortKey = [
    {
      "name":"id排序",
      "keyword":"id"
    },{
      "name":"进度优先",
      "keyword":"progressRate"
    }
  ]

  searchField = '';
  showSearch:boolean = false;
  searchResult;
  searchLength:number = 0;

  constructor() { }

  ngOnInit() {
    this.currentListView = this.listViewData;

  }

  /**进程取消事件 */
  progressStop(event,listData){
    event.stopPropagation();
    //console.log(listData);
  }


  /**点击list某行监听事件
   * data.data 当前点击行 对象数组
   * data.index 当前操作行的索引
   */
  listClick(data){
    if(data) this.selectData = data.data;
    //console.log(data);
  }

  /**某list checkbox状态变化 监听事件 
   * data.listdata 当前变化的list对象
   * data.index 当前变化对象的索引
  */
  checkChange(data){
    // console.log(data.listdata);
    //console.log(data.index);
  }


  /**监听页数变化
   * pageInfo：{ pageIndex, pageSize }
   */
  pagerChanged(data){
    //console.log(data);
  }

  /**
   * 搜索 参数：搜索字段
   */
  searchList(){
    this.searchResult = this.listView.searchList(this.searchField);
    this.showSearch = true;
    this.searchLength = this.searchResult.length;
    console.log(this.searchResult);
    // this.currentListView = searchResult.searchResult.listdata;
  }

  /**排序 参数 排序字段，排序方式 升序 降序 */
  sort(key){
    this.sortKey.forEach(item =>{
        if(item['keyword'] !== key['keyword']){
          delete item['ascending'];
        }
    })
    this.listView.sort(key['keyword'],key['ascending']?'asc':'desc');
    key['ascending'] = !key['ascending'];

    //console.log(this.listView.sort(key,key['ascending']?'asc':'desc'));
    
  }

}