import { FilterPanelService } from '@farris/ui-filter-panel';
import { ServerSideToken } from '@farris/ui-lookup';
import { Component, OnInit, ViewChild, TemplateRef } from '@angular/core';
import { listdata, list } from './mockList';
import{LookupHttpBeQueryService} from './Lookup-http.service';

@Component({
  selector: 'app-filter-demo',
  templateUrl: './filter-demo.component.html',
  styleUrls: ['./filter-demo.component.scss'],
  providers: [{ provide: ServerSideToken, useClass: LookupHttpBeQueryService }]
})
export class FilterDemoComponent implements OnInit {

  codePath = {
    baseDemo: 'assets/codes/filter/basedemo',
    showReminderDemo: 'assets/codes/filter/showReminder',
    floatFilterDemo: 'assets/codes/filter/floatFilter'
  };
  list: any[] = listdata;
  listTemp: any[] = listdata;
  list3 = list;

  defaultValues = [
    {
      labelCode: 'search',
      value: '张三'
    },
    {
      labelCode: 'text',
      value: '默认值'
    },
    {
      labelCode: 'dropdown',
      value: 'yx'
    },
    {
      labelCode: 'radio',
      value: 'cc'
    },
    {
      labelCode: 'singledate',
      value: '2020-07-02'
    },
    {
      labelCode: 'date',
      value: {
        startTime: '2020-08-13',
        endTime: '2020-08-17'
      }
    },
    {
      labelCode: 'datetime',
      value: {
        startTime: '2020-07-01 15:00:00',
        endTime: '2020-08-17 15:00:00'
      }
    },
    {
      labelCode: 'singledate-mYear',
      value: '2020-08'
    },
    {
      labelCode: 'date-year',
      value: {
        startTime: '2020',
        endTime: '2029'
      }
    },
    {
      labelCode: 'date-myear',
      value: {
        startTime: '2020-09',
        endTime: '2029-09'
      }
    },
    {
      labelCode: 'singledate-year',
      value: '2037'
    },
    {
      labelCode: 'number',
      value: {
        startValue: 20,
        endValue: 30
      }
    },
    {
      labelCode: 'checkboxGroup',
      value: ['aa', 'cc']
    },
    {
      labelCode: 'singlenumber',
      value: 20
    },
    {
      labelCode: 'flexibleNumber',
      value: {
        value: 200,
        startValue: 100,
        endValue: 3000
      }
    },
    {
      labelCode: 'flexibleDate',
      value: {
        value: '2021-08-19',
        startValue: '2020-08-13',
        endValue: '2020-08-17'
      }
    },
    {
      labelCode: 'boolcheckbox',
      value: [true]
    }
  ];

  list2 = [
    {
      "id": "text",
      "labelCode": "text",
      "code": "text",
      "name": "用户编号",
      "control": {
        "controltype": "text",
        "placeholder": "请输入用户编号",
        // "required": true
      }
    },
    {
      "id": "text1",
      "labelCode": "text1",
      "code": "text1",
      "name": "用户姓名",
      "control": {
        "controltype": "text",
        "placeholder": "请输入用户姓名",
        // "required": true
      }
    }
  ];
  tabList=[]

  @ViewChild('farrisFilter') farrisFilter;
  @ViewChild('panelExtend') panelExtendRef: TemplateRef<any>;

  constructor(private filterPanelService: FilterPanelService) { 
    for(let k=0;k<list.length;k++){
      if(list[k].labelCode.indexOf('help')>-1){
        list[k]['control']['preEventCmd'] =this.preEventCmd;
        list[k]['control']['postEventCmd']=this.postEventCmd;
      }
      this.listTemp.push(list[k]);
    }
    this.tabList=[listdata[0],listdata[1],listdata[2]];
    console.log( this.tabList);
  }
  preEventCmd(){
    console.log('帮助前');
  }
  postEventCmd(){
    console.log('帮助后');
  }
  ngOnInit() {
    // setTimeout(() => {
    //   this.defaultValues = [
    //     {
    //       labelCode: 'search',
    //       value: '李四姓名'
    //     }
    //   ]
    // }, 3000);
  }

  onQuery(event) {
    console.log('筛选结果', event);
  }

  onQuery2(event) {
    console.log(event);
  }
  clearFilter(event){
    console.log('筛选项清除',event);
  }
  expandFilter(){
    console.log('展开')
  }
  packupFilter(){
    console.log('收起')
  }

  resetvalue() {
    this.farrisFilter.resetFilterValue('checkboxGroup');
  }
  filterResize(){
    console.log('检测变化');
  }

  showPanel(event) {
    event.stopPropagation();
    //let panelItem = listdata;
    let panelItem = {
      "id": "flexibleNumber",
      "labelCode": "flexibleNumber",
      "code": "flexibleNumber",
      "name": "可变数值",
      "control": {
        "controltype": "flexibleNumber",
        "single": false
        // "showType": 3,
        // "showTime": false
      },
    };
    // let panelItem = {
    //   "id": "8df4bbdf-b1e2-4a26-befe-feb837f13aa9",
    //   "labelCode": "boolcheckbox",
    //   "code": "boolcheckbox",
    //   "name": "复选框",
    //   "control": {
    //       "controltype": "bool-check"
    //   },
    //   "value":{
    //     "value": [false]
    //   }
    // };
      let filterPanelContainer = this.filterPanelService.showPanel({
        left: 100,
        top: 100,
        item: panelItem,
        panelExtendTemplate: this.panelExtendRef,
        showLable: true
      });
    filterPanelContainer.hidePanel.subscribe(e => {
      this.filterPanelService.hidePanel();
      filterPanelContainer = null;
    });
    filterPanelContainer.filterSubmit.subscribe(e => {
      console.log('提交', e);
    });
    filterPanelContainer.clearFilter.subscribe(e => {
      console.log('移除', e);
    });
  }

}