import { Component, OnInit } from '@angular/core';
import { differenceInCalendarDays, startOfDay, endOfDay, startOfMonth, endOfMonth, startOfYear, endOfYear, setDate } from 'date-fns';
import { NzModalRef, NzModalService, NzMessageService, NzTreeHigherOrderServiceToken, isTemplateRef } from 'ng-zorro-antd';
import { DatePipe } from '@angular/common';
import { setHours, setMinutes, setSeconds } from 'date-fns';
import { IconService } from 'src/app/core/services/iconServices/icon-services.service';
import * as xlsx from "xlsx";
import { saveAs } from "file-saver";
import * as _ from 'lodash';
import { DisabledTimeFn, DisabledTimePartial } from 'ng-zorro-antd/date-picker/standard-types';
import { __values } from 'tslib';
import { setDay } from 'date-fns/esm';
import { setDayWithOptions } from 'date-fns/fp';
import { element } from 'protractor';
import { forEach, values } from 'lodash';

@Component({
  selector: 'app-data-sub-table',
  templateUrl: './data-sub-table.component.html',
  styleUrls: ['./data-sub-table.component.scss']
})
export class DataSubTableComponent implements OnInit {

  constructor(
    private datePipe: DatePipe,
    private modalService: NzModalService,
    private iconService: IconService,
    private message: NzMessageService
  ) { }

  ngOnInit() {

    this.queryTableData();
  }
  selectedTableCol: string[];

  today = new Date();

  mnList: { label: string, value: string }[] = [];
  mnNameList: { label: string, value: string }[] = []
  thData: Array<{ [key: string]: any }> = [];
  tableColumn: { checked: boolean, value: string, disabled: boolean, label: string, unit?: string, width: string, showSort: boolean, showFilter: boolean }[]
  tableData: { [key: string]: string }[];
  tableData_bak: { [key: string]: string }[];
  listOfSearch: { [key: string]: string[] } = {}
  tableLoading: boolean;

  tableFilters: { [key: string]: { text: string, value: string }[] | string[] } = {}
  queryTableData() {



    this.tableData = [
      { id: '1', mn: '10011', mnName: '北京站点1', time: '2020-12-09 09:00:00', ldn: '86.8', area: '丰台区', address: '丰台站点地址' },
      { id: '2', mn: '10012', mnName: '北京站点2', time: '2020-12-09 10:00:00', ldn: '86.8', area: '丰台区', address: '丰台站点地址2' },
      { id: '3', mn: '10013', mnName: '北京站点3', time: '2020-12-09 11:00:00', ldn: '87.8', area: '丰台区', address: '丰台站点地址3' },
      { id: '4', mn: '10014', mnName: '北京站点4', time: '2020-12-09 12:00:00', ldn: '89.8', area: '丰台区', address: '丰台站点地址4' },
      { id: '5', mn: '10015', mnName: '北京站点5', time: '2020-12-09 13:00:00', ldn: '67.8', area: '怀柔区', address: '怀柔站点地址1' },
      { id: '6', mn: '10016', mnName: '北京站点6', time: '2020-12-09 14:00:00', ldn: '62.8', area: '怀柔区', address: '怀柔站点地址2' },
    ]
    this.tableData_bak = [...this.tableData];

    for (const key in this.tableData[0]) {
      let filters = []
      if (Object.prototype.hasOwnProperty.call(this.tableData[0], key)) {
        this.tableData_bak.forEach(item => {
          filters.push(item[key])

          this.listOfSearch[key] = [];
        })
        let tempArr = []
        _.uniq(filters).forEach(item => tempArr.push({ value: item, text: item }))
        this.tableFilters[key] = tempArr;
      }
    }
    this.tableColumn = [
      { checked: true, disabled: false, value: 'id', label: '序号', width: '5rem', showSort: false, showFilter: false },
      { checked: true, disabled: false, value: 'mn', label: '站点编号', width: '8rem', showSort: false, showFilter: false },
      { checked: true, disabled: false, value: 'time', label: '时间', width: '15rem', showSort: true, showFilter: false },
      { checked: true, disabled: false, value: 'mnName', label: '站点名称', width: '12rem', showSort: false, showFilter: true },
      { checked: true, disabled: false, value: 'ldn', label: 'Ldn', unit: '(dB)', width: '10rem', showSort: true, showFilter: false },
      { checked: true, disabled: false, value: 'area', label: '行政区', width: '9rem', showSort: false, showFilter: true },
      { checked: true, disabled: false, value: 'address', label: '地址', width: '10rem', showSort: false, showFilter: false },
    ]

    this.mnList = [
      { label: "北京站点1", value: "10001" },
      { label: "北京站点2", value: "10002" },
      { label: "北京站点3", value: "10003" },
      { label: "北京站点4", value: "10004" },
      { label: "北京站点5", value: "10005" },
      { label: "北京站点6", value: "10006" },
    ]
    this.mnNameList = this.mnList.map(item => {
      return { label: item.label, value: item.label };
    })

    this.selectedTableCol = this.tableColumn.filter(item => item.checked).map(item=> item.value);

   
    let listOfArea = this.tableData_bak.map((item) => {
      return { value: item.area, text: item.area }
    })
    this.listOfArea = _.uniqBy(listOfArea, 'text');
    console.log(this.listOfArea)


  }

  isAllDisplayDataChecked = false;
  isIndeterminate = false;
  listOfDisplayData: any[] = [];
  mapOfCheckedId: { [key: string]: boolean } = {};
  currentPageDataChange($event): void {
    this.listOfDisplayData = $event;
    this.refreshStatus();
  }
  refreshStatus(): void {
    this.isAllDisplayDataChecked = this.listOfDisplayData.filter(item => !item.disabled).every(item => this.mapOfCheckedId[item.mn])
    this.isIndeterminate =
      this.listOfDisplayData.filter(item => !item.disabled).some(item => this.mapOfCheckedId[item.mn]) &&
      !this.isAllDisplayDataChecked;
  }
  checkAll(value: boolean): void {
    this.listOfDisplayData.filter(item => !item.disabled).forEach(item => (this.mapOfCheckedId[item.mn] = value));
    this.refreshStatus();
  }


  //日历搜索下拉菜单与查询
  nzDropdownMenuVisible: boolean;
  //singleQuery
  intervalQueryRadioValue = "1";
  singleQueryRadioValue = "1";
  singleQueryDate = new Date();
  singleQueryMonth;
  singleQueryYear;
  singleQueryDatePicker = false;
  singleQueryMonthPicker = true;
  singleQueryYearPicker = true;
  singleDisabledDate = (current: Date): boolean => {
    return differenceInCalendarDays(current, this.today) > 0;
  };
  intervalDisabledStartDate = (current: Date): boolean => {
    return differenceInCalendarDays(current, this.today) > 0 || differenceInCalendarDays(current, this.intervalQueryEndDate) > 0;
  }
  intervalDisabledEndDate = (current: Date): boolean => {
    return differenceInCalendarDays(current, this.today) > 0 || differenceInCalendarDays(current, this.intervalQueryStartDate) < 0;
  }
  intervalDisabledStartMonth = (current: Date): boolean => {
    return differenceInCalendarDays(current, this.today) > 0 || differenceInCalendarDays(current, this.intervalQueryEndMonth) > 0;
  }
  intervalDisabledEndMonth = (current: Date): boolean => {
    return differenceInCalendarDays(current, this.today) > 0 || differenceInCalendarDays(current, this.intervalQueryStartMonth) < 0;
  }
  intervalDisabledStartYear = (current: Date): boolean => {
    return differenceInCalendarDays(current, this.today) > 0 || differenceInCalendarDays(current, this.intervalQueryEndYear) > 0;
  }
  intervalDisabledEndYear = (current: Date): boolean => {
    return differenceInCalendarDays(current, this.today) > 0 || differenceInCalendarDays(current, this.intervalQueryStartYear) < 0;
  }
  //intervalQuery
  intervalQueryStartDate = new Date();
  intervalQueryEndDate = new Date();
  intervalQueryStartMonth;
  intervalQueryEndMonth;
  intervalQueryStartYear;
  intervalQueryEndYear;
  intervalQueryDatePicker = false;
  intervalQueryMonthPicker = true;
  intervalQueryYearPicker = true;
  //查询（区间，单项）
  intervalQuery() {
    let par = {
      startTime: this.datePipe.transform(startOfDay(this.intervalQueryStartDate), "yyyy-MM-dd HH:mm:ss"),
      endTime: this.datePipe.transform(endOfDay(this.intervalQueryEndDate), "yyyy-MM-dd HH:mm:ss")
    }
    if (this.intervalQueryRadioValue == "2") {
      par.startTime = this.datePipe.transform(startOfMonth(this.intervalQueryStartMonth), "yyyy-MM-dd HH:mm:ss");
      par.endTime = this.datePipe.transform(endOfMonth(this.intervalQueryEndMonth), "yyyy-MM-dd HH:mm:ss");
    } else if (this.intervalQueryRadioValue == "3") {
      par.startTime = this.datePipe.transform(startOfYear(this.intervalQueryStartYear), "yyyy-MM-dd HH:mm:ss");
      par.endTime = this.datePipe.transform(endOfYear(this.intervalQueryEndYear), "yyyy-MM-dd HH:mm:ss");
    }
    this.queryByTime(par);
    this.nzDropdownMenuVisible = false;
    this.modalService.closeAll();
  }
  singleQuery() {
    let par = {
      startTime: this.datePipe.transform(startOfDay(this.singleQueryDate), "yyyy-MM-dd HH:mm:ss"),
      endTime: this.datePipe.transform(endOfDay(this.singleQueryDate), "yyyy-MM-dd HH:mm:ss")
    }
    if (this.singleQueryRadioValue == "2") {
      par.startTime = this.datePipe.transform(startOfMonth(this.singleQueryMonth), "yyyy-MM-dd HH:mm:ss");
      par.endTime = this.datePipe.transform(endOfMonth(this.singleQueryMonth), "yyyy-MM-dd HH:mm:ss");
    } else if (this.singleQueryRadioValue == "3") {
      par.startTime = this.datePipe.transform(startOfYear(this.singleQueryYear), "yyyy-MM-dd HH:mm:ss");
      par.endTime = this.datePipe.transform(endOfYear(this.singleQueryYear), "yyyy-MM-dd HH:mm:ss");
    }
    this.queryByTime(par);
    this.nzDropdownMenuVisible = false;
    this.modalService.closeAll();
  }
  singleQueryRadioValueChange() {
    if (this.singleQueryRadioValue == "1") {
      if (this.singleQueryDate == null) {
        this.singleQueryDate = new Date();
      }
      this.singleQueryDatePicker = false;
      this.singleQueryMonthPicker = true;
      this.singleQueryYearPicker = true;
    } else if (this.singleQueryRadioValue == "2") {
      if (this.singleQueryMonth == null) {
        this.singleQueryMonth = new Date();
      }
      this.singleQueryDatePicker = true;
      this.singleQueryMonthPicker = false;
      this.singleQueryYearPicker = true;
    } else if (this.singleQueryRadioValue == "3") {
      if (this.singleQueryYear == null) {
        this.singleQueryYear = new Date();
      }
      this.singleQueryDatePicker = true;
      this.singleQueryMonthPicker = true;
      this.singleQueryYearPicker = false;
    }
  }
  intervalQueryRadioValueChange() {
    if (this.intervalQueryRadioValue == "1") {
      if (this.intervalQueryStartDate == null) {
        this.intervalQueryStartYear = new Date();
      }
      if (this.intervalQueryEndDate == null) {
        this.intervalQueryEndDate = new Date();
      }
      this.intervalQueryDatePicker = false;
      this.intervalQueryMonthPicker = true;
      this.intervalQueryYearPicker = true;
    } else if (this.intervalQueryRadioValue == "2") {
      if (this.intervalQueryStartMonth == null) {
        this.intervalQueryStartMonth = new Date();
      }
      if (this.intervalQueryEndMonth == null) {
        this.intervalQueryEndMonth = new Date();
      }
      this.intervalQueryDatePicker = true;
      this.intervalQueryMonthPicker = false;
      this.intervalQueryYearPicker = true;
    } else if (this.intervalQueryRadioValue == "3") {
      if (this.intervalQueryStartYear == null) {
        this.intervalQueryStartYear = new Date();
      }
      if (this.intervalQueryEndYear == null) {
        this.intervalQueryEndYear = new Date();
      }
      this.intervalQueryDatePicker = true;
      this.intervalQueryMonthPicker = true;
      this.intervalQueryYearPicker = false;
    }
  }
  queryByTime(par: { startTime: string, endTime: string }) {
    console.log(par);
  }
  searchValue: string = ""; //表格搜索框的值
  sortName: string; sortValue: string;
  sort = (sort: { key: string; value: string }): void => {
    this.sortName = sort.key;
    this.sortValue = sort.value;
    this.search();
  }
  filter = ($event: string[], item: any): void => {
    this.listOfSearch[item.value] = $event

    // this.listOfSearchArea = listOfSearchArea;
    console.log(this.listOfSearch[item.value]);
    this.search();  //colValue
  }
  // 获取filters
  getFilters = (item) => {

    let filters = []
    this.tableData_bak.forEach(element => {
      filters.push(element[item.value])
    })
    filters = _.uniq(filters)

  }
  search(): void {

    const filterAllFunc = (item) => {
      let resultArr = []
      for (const key in item) {
        if (Object.prototype.hasOwnProperty.call(item, key)) {
          const element = item[key];
          resultArr.push(element.indexOf(this.searchValue) !== -1)
        }
      }
      return (resultArr.some(item => item === true))
    };
    const filterFunc = (item) => {
      let resultArr = []

      this.selectedTableCol.forEach(element => {
        resultArr.push((this.listOfSearch[element].length ? this.listOfSearch[element].some(value => item[element].indexOf(value) !== -1) : true))
      })
      
      return resultArr.every((i) => i == true)
    }
    const data = this.tableData_bak.filter((item) => filterAllFunc(item) && filterFunc(item))
    if (this.sortName && this.sortValue) {
      this.tableData = data.sort((a, b) =>
        this.sortValue === 'ascend'
          ? a[this.sortName!] > b[this.sortName!]
            ? 1
            : -1
          : b[this.sortName!] > a[this.sortName!]
            ? 1
            : -1
      );

    } else {
      this.tableData = data;
    }


  }
  listOfArea: { text: string, value: string }[] = [];
  listOfSearchArea: string[] = [];
  filterChange(listOfSearchArea: string[]) {
    this.listOfSearchArea = listOfSearchArea;
    this.search();
  }

  findCol($event) {
    console.log($event)
    if (this.selectedTableCol.indexOf($event) > -1) return 1;
  }

  tableColumnChange($event: { checked: boolean, value: string, disabled: boolean, label: string }[]): void {
    // this.selectedTableCol = value;
    // console.log($event.filter(item=>item.checked == true))
    this.selectedTableCol = $event.filter((item) => item.checked == true).map(item => item.value);
    console.log(this.selectedTableCol);
  }

  exportExcel() {
    let exportData = [];
    this.tableData.forEach(element => {
      exportData.push({
        '站点编号': element.mn,
        '站点名称': element.mnName,
        '时间': element.time,
        'Ldn(dB)': element.ldn,
        '行政区': element.area,
        '地址': element.address
      })
    })

    const worksheet: xlsx.WorkSheet = xlsx.utils.json_to_sheet(exportData)
    const workbook: xlsx.WorkBook = {
      Sheets: { data: worksheet },
      SheetNames: ['data']
    }
    const excelBuffer: any = xlsx.write(workbook, {
      bookType: "xlsx",
      type: "array"
    })

    const blob = new Blob([excelBuffer], {
      type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8',
    })
    saveAs(blob, '站点信息表')
  }
  btnIcon = "down";
  tableColMenuVisibleChange($event) {
    console.log($event);
    if ($event) {
      this.btnIcon = "up"
    } else {
      this.btnIcon = "down"
    }
  }


  del(i?) {

    if (i) {
      this.tableData = this.tableData.filter(item =>
        item.mn !== i.mn)
      // this.modalService.confirm({
      //   nzTitle: '确定删除?',
      //   nzOkText: '确定',
      //   nzOkType: 'danger',
      //   nzOnOk: () => {
      //     this.tableData = this.tableData.filter((item) =>
      //       item.mn !== i.mn
      //     )
      //   },
      //   nzCancelText: '取消',
      //   nzOnCancel: () => console.log('Cancel')
      // });
    } else {
      // 判断是否未选数据
      let mn = [], obj = Object.entries(this.mapOfCheckedId);
      for (let o in obj) {
        if ([true].includes(obj[o][1])) {
          mn.push(obj[o][0])
        }
      }
      if (mn.length == 0) {
        this.message.info("请先选择要删除的数据");
        return;
      }

      let ids = mn.join(',');
      this.tableData = this.tableData.filter(item => mn.indexOf(item.mn))
      // this.modalService.confirm({
      //   nzTitle: '确定删除?',
      //   nzOkText: '确定',
      //   nzOkType: 'danger',
      //   nzOnOk: () => {
      //     let a = this.tableData.filter(item => mn.indexOf(item.mn) === -1)
      //     this.tableData = a;
      //   },
      //   nzCancelText: '取消',
      //   nzOnCancel: () => console.log('Cancel')
      // })
    }
  }
  addModalVisible: boolean = false;
  modalData: any[] = [];

  addRecordTableData: { mn: string, mnName: string, soundMonitorID: string, soundCalibrator: string, atmosphericPressure: string, previousLdn: string, currentLdn: string, timeRange: [Date, Date] | [], ldn: string }[] = []
  addRecord() {
    this.addModalVisible = true;

    this.addRecordTableData = [
      { mn: '', mnName: '', soundMonitorID: '', soundCalibrator: '', atmosphericPressure: '', previousLdn: '', currentLdn: '', timeRange: [startOfDay(this.today), endOfDay(this.today)], ldn: '' }
    ]
  }
  // 添加记录表的一行
  addRecordTableRow() {
    this.addRecordTableData.push({ mn: '', mnName: '', soundMonitorID: '', soundCalibrator: '', atmosphericPressure: '', previousLdn: '', currentLdn: '', timeRange: [startOfDay(this.today), endOfDay(this.today)], ldn: '' });
    this.addRecordTableData = [...this.addRecordTableData]
  }
  // 删除记录表的一行
  delRecordTableRow(index) {
    console.log(index)
    this.addRecordTableData.splice(index, 1);
    console.log(this.addRecordTableData)
    this.addRecordTableData = [...this.addRecordTableData]
  }
  saveRecordLoading: boolean = false;
  handleCancel() {
    this.addModalVisible = false
  }
  handleOk() {
    // this.addModalVisible = false;


    this.saveRecordLoading = true;

    window.setTimeout(() => {
      console.log(this.addRecordTableData);
      this.saveRecordLoading = false;
      this.addModalVisible = false;
    }, 1000)

  }
  disabledRangeDate = (current: Date): boolean => {
    console.log(current)
    return differenceInCalendarDays(current, this.today) > 0
  }

  disabledRangeTime: DisabledTimeFn = (__values) => {
    return {
      nzDisabledHours: () => [],
      nzDisabledMinutes: () => this.range(1, 60),
      nzDisabledSeconds: () => this.range(0, 59)
    }
  }
  range(start: number, end: number): number[] {
    const result: number[] = [];
    for (let i = start; i < end; i++) {
      result.push(i);
    }
    return result;
  }
  timeDefaultValue = startOfDay(this.today);

  onMnNameChange($event: string, index: string) {

    let mn = this.mnList.filter(item => {
      return item.label === $event
    });
    console.log(mn[0].value, index)

    this.addRecordTableData[index].mn = mn[0].value;

    this.addRecordTableData = [...this.addRecordTableData]
    console.log(this.addRecordTableData)
  }
}