import { Component, OnInit } from "@angular/core";
import { IconService } from "src/app/core/services/iconServices/icon-services.service";
import { NzModalService, NzMessageService } from "ng-zorro-antd";
import { FormGroup, FormBuilder, FormControl } from "@angular/forms";
import * as XLSX from "xlsx";
import { saveAs } from "file-saver";

@Component({
  selector: "app-basic-table-sub",
  templateUrl: "./basic-table-sub.component.html",
  styleUrls: ["./basic-table-sub.component.scss"],
})
export class BasicTableSubComponent implements OnInit {
  constructor(
    private iconService: IconService,
    private nzModalService: NzModalService,
    private fb: FormBuilder,
    private nzMessageService: NzMessageService
  ) {}

  validateForm: FormGroup;
  validateFormAdd: FormGroup;
  ngOnInit() {
    this.validateForm = this.fb.group({});
    this.validateForm.addControl("rid", new FormControl());
    this.validateForm.addControl("mn", new FormControl());
    this.validateForm.addControl("mnName", new FormControl());
    this.validateForm.addControl("time", new FormControl());
    this.validateForm.addControl("ldn", new FormControl());
    this.validateForm.addControl("admin", new FormControl());
    this.validateForm.addControl("addr", new FormControl());
    this.validateFormAdd = this.fb.group({});
    this.validateFormAdd.addControl("rid", new FormControl());
    this.validateFormAdd.addControl("mn", new FormControl());
    this.validateFormAdd.addControl("mnName", new FormControl());
    this.validateFormAdd.addControl("time", new FormControl());
    this.validateFormAdd.addControl("ldn", new FormControl());
    this.validateFormAdd.addControl("admin", new FormControl());
    this.validateFormAdd.addControl("addr", new FormControl());

    this.tableData = [
      {
        rid: 1,
        mn: "341020",
        mnName: "南苑路",
        time: "2020-10-01 00:00:00",
        ldn: "58.4",
        addr: "大红门国际会展中心",
        admin: "丰台区",
        status: "已审核",
      },
      {
        rid: 2,
        mn: "341021",
        mnName: "亦庄工业区",
        time: "2020-10-01 00:00:00",
        ldn: "60.4",
        addr: "亦庄永昌北路8号乐天四通食品有限公司",
        admin: "大兴区",
        status: "未审核",
      },
      {
        rid: 3,
        mn: "341022",
        mnName: "中关村大街",
        time: "2020-10-01 00:00:00",
        ldn: "61.4",
        addr: "黄庄招待所，中关村大街24号，813号楼西侧院墙内",
        admin: "海淀区",
        status: "未审核",
      },
      {
        rid: 4,
        mn: "341023",
        mnName: "首钢污水处理厂",
        time: "2020-10-01 00:00:00",
        ldn: "62.4",
        addr: "首钢污水处理厂，大门东侧办公楼后墙",
        admin: "石景山区",
        status: "未审核",
      },
      {
        rid: 5,
        mn: "341024",
        mnName: "荣华中路",
        time: "2020-10-03 00:00:00",
        ldn: "63.4",
        addr: "亦庄环保局内",
        admin: "大兴区",
        status: "未审核",
      },
      {
        rid: 6,
        mn: "341025",
        mnName: "阜石路",
        time: "2020-10-01 00:00:00",
        ldn: "70.4",
        addr: "阜石路-王致和集团  院内西侧南墙",
        admin: "石景山区",
        status: "未审核",
      },
      {
        rid: 7,
        mn: "341026",
        mnName: "马家堡东路",
        time: "2020-10-01 00:00:00",
        ldn: "69.4",
        addr: "马家堡东路肉类食品研究所",
        admin: "丰台区",
        status: "未审核",
      },
      {
        rid: 8,
        mn: "341027",
        mnName: "北三环",
        time: "2020-10-01 00:00:00",
        ldn: "68.4",
        addr: "北三环东路15号，北京化工大学(岗亭楼顶)",
        admin: "石景山区",
        status: "未审核",
      },
      {
        rid: 9,
        mn: "341028",
        mnName: "阜石路北",
        time: "2020-10-05 00:00:00",
        ldn: "67.4",
        addr: "阜石路首钢技校",
        admin: "丰台区",
        status: "未审核",
      },
      {
        rid: 10,
        mn: "341029",
        mnName: "石景山路",
        time: "2020-10-01 00:00:00",
        ldn: "64.4",
        addr: "石景山八角南里红领巾厕所",
        admin: "丰台区",
        status: "未审核",
      },
      {
        rid: 11,
        mn: "341030",
        mnName: "西三环",
        time: "2020-10-01 00:00:00",
        ldn: "65.4",
        addr: "六里桥南安安市场正对面公厕南侧",
        admin: "丰台区",
        status: "未审核",
      },
      {
        rid: 12,
        mn: "341031",
        mnName: "鲁谷路",
        time: "2020-10-01 00:00:00",
        ldn: "65.4",
        addr: "鲁谷路(路北)情报所74号家属院南院墙",
        admin: "石景山区",
        status: "未审核",
      },
      {
        rid: 13,
        mn: "341032",
        mnName: "滨河承泽苑",
        time: "2020-10-09 00:00:00",
        ldn: "65.4",
        addr: "葡东小区13号楼旁",
        admin: "门头沟区",
        status: "未审核",
      },
      {
        rid: 14,
        mn: "341033",
        mnName: "西四环",
        time: "2020-10-01 00:00:00",
        ldn: "64.7",
        addr: "五棵松(西四环中复电讯前)西四环中路39号",
        admin: "海淀区",
        status: "未审核",
      },
      {
        rid: 15,
        mn: "341034",
        mnName: "北大街",
        time: "2020-10-01 00:00:00",
        ldn: "58.4",
        addr: "丰台北大街圣地苑宾馆",
        admin: "丰台区",
        status: "未审核",
      },
      {
        rid: 16,
        mn: "341035",
        mnName: "城子办事处",
        time: "2020-10-09 00:00:00",
        ldn: "59.5",
        addr: "桃园社区居委会",
        admin: "门头沟区",
        status: "未审核",
      },
    ];
    this.tableData_bak = this.tableData;
    this.listOfMnName = Array.from(
      new Set(this.tableData_bak.map((item) => item.mnName))
    ).map((e) => {
      return { text: e, value: e };
    });
    this.listOfAdmin = Array.from(
      new Set(this.tableData_bak.map((item) => item.admin))
    ).map((e) => {
      return { text: e, value: e };
    });
    this.checkedcol = this.checkOptionsOne
      .filter((e) => e.checked === true)
      .map((e) => e.value);
    this.initFilterListMap();
    this.initColumnSearchValueMap();
    this.initMapOfSort();
  }

  //分页
  isAllDisplayDataChecked = false;
  isIndeterminate = false;
  listOfDisplayData: any[] = [];
  mapOfCheckedId: { [key: string]: boolean } = {};
  currentPageDataChange($event: Array<{ rid: string }>): void {
    this.listOfDisplayData = $event;
    this.refreshStatus();
  }
  refreshStatus(): void {
    this.isAllDisplayDataChecked = this.listOfDisplayData.every(
      (item) => this.mapOfCheckedId[item.rid]
    );
    this.isIndeterminate =
      this.listOfDisplayData.some((item) => this.mapOfCheckedId[item.rid]) &&
      !this.isAllDisplayDataChecked;
    console.log("mapOfCheckedId", this.mapOfCheckedId);
  }
  checkAll(value: boolean): void {
    this.listOfDisplayData.forEach(
      (item) => (this.mapOfCheckedId[item.rid] = value)
    );
    this.refreshStatus();
  }

  tableData: any[] = [];
  tableData_bak: any[] = [];
  //列操作排序容器
  mapOfSort: { [key: string]: string | null } = {
    mn: null,
    time: null,
    ldn: null,
  };
  initMapOfSort() {
    this.checkOptionsOne.forEach((element) => {
      let column = element.value;
      this.mapOfSort[column] = null;
    });
  }
  sortName: string | null = null;
  sortValue: string | null = null;
  sort(sortName: string, value: string): void {
    this.sortName = sortName; //排序字段
    this.sortValue = value; //排序方式
    // 互斥排序模式
    for (const key in this.mapOfSort) {
      this.mapOfSort[key] = key === sortName ? value : null;
    }
    this.search_1();
  }

  // 列选择过滤的可选项列表容器
  listOfMnName = [];
  listOfAdmin = [];
  //全表模糊搜索值
  searchValue: string = "";
  // 列选择过滤已选项列表容器
  listOfSearchMnName = []; //站点搜索值
  listOfSearchAdmin = []; //行政区搜索值

  //单列模糊搜索
  addrSearchValue: string = "";
  addrSearchDropMenuVisible: boolean = false;
  search(): void {
    //列选择过滤搜索函数
    const filterFunc = (item) => {
      return (
        (this.listOfSearchMnName.length
          ? this.listOfSearchMnName.some(
              (mnName) => item.mnName.indexOf(mnName) !== -1
            )
          : true) &&
        (this.listOfSearchAdmin.length
          ? this.listOfSearchAdmin.some(
              (admin) => item.admin.indexOf(admin) !== -1
            )
          : true)
      );
    };
    //全量搜索函数
    const filterFuncAll = (item) => {
      return (
        item.mnName.indexOf(this.searchValue) !== -1 ||
        item.admin.indexOf(this.searchValue) !== -1 ||
        item.mn.indexOf(this.searchValue) !== -1 ||
        item.time.indexOf(this.searchValue) !== -1 ||
        item.ldn.indexOf(this.searchValue) !== -1 ||
        item.addr.indexOf(this.searchValue) !== -1
      );
    };
    // 列模糊搜索函数
    const singleColumnSearch = (item) => {
      return item.addr.indexOf(this.addrSearchValue) !== -1;
    };
    const complexFilter = (item) => {
      return (
        filterFunc(item) && filterFuncAll(item) && singleColumnSearch(item)
      );
    };
    let filterData = this.tableData_bak;
    if (
      this.listOfSearchMnName.length ||
      this.listOfSearchAdmin.length ||
      this.searchValue ||
      this.addrSearchValue
    ) {
      filterData = this.tableData_bak.filter((item) => complexFilter(item));
    } else {
      filterData = this.tableData_bak.filter((item) => item);
    }
    if (this.sortValue != null) {
      this.tableData = filterData.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 = filterData;
    }
    this.nzModalService.closeAll();
    this.addrSearchDropMenuVisible = false;
  }

  filter(listOfSearchValues, filterId): void {
    if (filterId === "listOfSearchMnName") {
      this.listOfSearchMnName = listOfSearchValues;
    } else if (filterId === "listOfSearchAdmin") {
      this.listOfSearchAdmin = listOfSearchValues;
    }
    this.search();
  }

  filter_1(event, field) {
    console.log("event", event);
    this.listOfFilterValueOfMap[field] = event;
    console.log("listOfFilterValueOfMap", this.listOfFilterValueOfMap);
    this.search_1();
  }

  reset(value): void {
    // if (value === "addr") {
    //   this.addrSearchValue = "";
    // }
    this.columnSearchValueMap[value] = "";
    this.search_1();
  }

  nzModalDatas;
  isNzModalVisible = false;
  openNzModal(rid) {
    this.nzModalDatas = this.tableData.filter((e) => e.rid === rid);
    this.isNzModalVisible = true;
  }
  nzModalhandleCancel() {
    this.isNzModalVisible = false;
  }

  closeEditePanel() {
    this.isEditePanelVisible = false;
    this.resetForm();
  }

  isEditePanelVisible = false;
  openEditPanel(rid) {
    let datas = this.tableData.filter((e) => e.rid === rid);
    if (datas.length > 0) {
      let editePanelData = datas[0];
      this.validateForm.patchValue(editePanelData);
    }
    this.isEditePanelVisible = true;
  }

  resetForm(): void {
    this.validateForm.reset();
  }

  submit() {
    // 掉接口，然后reload data
    let instance = this.validateForm.value;
    console.log("instance", instance);

    this.tableData = this.tableData.map((e) => {
      if (e.rid === instance.rid) {
        return instance;
      } else {
        return e;
      }
    });
    this.tableData_bak = this.tableData;
    this.listOfMnName = Array.from(
      new Set(this.tableData_bak.map((item) => item.mnName))
    ).map((e) => {
      return { text: e, value: e };
    });
    this.listOfAdmin = Array.from(
      new Set(this.tableData_bak.map((item) => item.admin))
    ).map((e) => {
      return { text: e, value: e };
    });
    this.isEditePanelVisible = false;
  }

  deleteRowCancel(): void {
    this.nzMessageService.info("点击取消");
  }

  deleteRowConfirm(rid): void {
    this.tableData = this.tableData.filter((e) => e.rid !== rid);
    this.tableData_bak = this.tableData;
    this.listOfMnName = Array.from(
      new Set(this.tableData_bak.map((item) => item.mnName))
    ).map((e) => {
      return { text: e, value: e };
    });
    this.listOfAdmin = Array.from(
      new Set(this.tableData_bak.map((item) => item.admin))
    ).map((e) => {
      return { text: e, value: e };
    });
    this.nzMessageService.info("删除成功");
  }

  downLoadFile(rid) {
    console.log("start to download file.");
    let blob = new Blob(["实例文件"], { type: "application/doc" });
    let a = document.createElement("a");
    a.href = URL.createObjectURL(blob);
    a.download =
      "实例文件" + rid + "-" + new Date().toLocaleDateString() + ".doc";
    a.click();
  }

  rowDataReview(rid) {
    console.log("start to review row data.");
    this.tableData = this.tableData.map((e) => {
      if (e.rid === rid) {
        e.status = "已审核";
      }
      return e;
    });
    console.log("tabelData", this.tableData);
    this.tableData_bak = this.tableData;
    this.listOfMnName = Array.from(
      new Set(this.tableData_bak.map((item) => item.mnName))
    ).map((e) => {
      return { text: e, value: e };
    });
    this.listOfAdmin = Array.from(
      new Set(this.tableData_bak.map((item) => item.admin))
    ).map((e) => {
      return { text: e, value: e };
    });
    this.nzMessageService.info("审核成功");
  }

  generateReport(rid) {
    console.log("start to generate report.");
    this.nzMessageService.info("报告生成成功");
  }

  preview(rid) {
    console.log("start to preview.");
    this.nzMessageService.info("预览完成");
  }

  checkBoxParam = {
    show: true,
    field: "rid",
    width: "3.8rem",
  };

  checkOptionsOne = [
    {
      label: "序号",
      value: "rid",
      checked: true,
      width: "6rem",
      showSort: true,
    },
    {
      label: "站点编号",
      value: "mn",
      checked: true,
      width: "10rem",
      showSort: true,
    },
    {
      label: "站点名称",
      value: "mnName",
      checked: true,
      width: "16rem",
      showFilter: true,
      tooltip: true
    },
    {
      label: "时间",
      value: "time",
      checked: true,
      width: "12rem",
      showFilter: true,
      tooltip: true
    },
    { label: "Ldn", value: "ldn", checked: true, width: "8rem" },
    {
      label: "状态",
      value: "status",
      checked: true,
      width: "8rem",
      showCustomFilter: true,
    },
    {
      label: "行政区",
      value: "admin",
      checked: false,
      width: "8rem",
      showCustomFilter: true,
    },
    {
      label: "地址",
      value: "addr",
      checked: false,
      width: "15rem",
      showCustomFilter: true,
    },
  ];

  checkedcol = [];
  log(value: object[]): void {
    this.checkedcol = this.checkOptionsOne
      .filter((e) => e.checked === true)
      .map((e) => e.value);
    console.log(value);
  }

  allChecked = false;
  indeterminate = true;
  updateAllChecked(): void {
    this.indeterminate = false;
    if (this.allChecked) {
      this.checkOptionsOne = this.checkOptionsOne.map((item) => {
        return {
          ...item,
          checked: true,
        };
      });
    } else {
      this.checkOptionsOne = this.checkOptionsOne.map((item) => {
        return {
          ...item,
          checked: false,
        };
      });
    }
    this.checkedcol = this.checkOptionsOne
      .filter((e) => e.checked === true)
      .map((e) => e.value);
    console.log("updateAllChecked", this.checkOptionsOne);
  }

  updateSingleChecked(): void {
    if (this.checkOptionsOne.every((item) => !item.checked)) {
      this.allChecked = false;
      this.indeterminate = false;
    } else if (this.checkOptionsOne.every((item) => item.checked)) {
      this.allChecked = true;
      this.indeterminate = false;
    } else {
      this.indeterminate = true;
    }
  }

  filterListOfMap = {};
  filterList = [];
  listOfFilterValueOfMap = {};
  initFilterListMap() {
    this.checkOptionsOne.forEach((element) => {
      let list = Array.from(
        new Set(this.tableData.map((item) => item[element.value]))
      ).map((e) => {
        return { text: e, value: e };
      });
      let column = element.value;
      this.filterListOfMap[column] = list;
      this.filterList.push(column);
      this.listOfFilterValueOfMap[column] = [];

      // if(element.showFilter) {
      //   let list = Array.from(new Set(this.tableData.map(item => item[element.value]))).map(e=> {
      //     return {text: e, value: e}
      //   });
      //   let col = element.value
      //   this.filterListOfMap[col] = list;
      //   this.filterList.push(col);
      // } else {
      //   let col = element.value
      //   this.filterListOfMap[col] = [];
      // }
    });
    console.log("filterListOfMap", this.filterListOfMap);
  }
  columnSearchValueMap = {};
  columnSearchList = [];
  initColumnSearchValueMap() {
    this.checkOptionsOne.forEach((element) => {
      let column = element.value;
      this.columnSearchValueMap[column] = "";
      this.columnSearchList.push(column);
    });
    console.log("columnSearchValueMap", this.columnSearchValueMap);
  }

  searchDropMenuVisible: boolean = false;
  search_1(): void {
    //列选择过滤搜索函数
    const filterFunc = (item) => {
      let filterResult = true;
      for (let i = 0; i < this.filterList.length; i++) {
        let column = this.filterList[i];
        if (
          this.listOfFilterValueOfMap[column].length &&
          this.listOfFilterValueOfMap[column].every(
            (name) => item[column].indexOf(name) === -1
          )
        ) {
          filterResult = false;
          break;
        }
      }
      return filterResult;
      // return (
      //   let filterResult = false;
      //   this.filterList.forEach(element => {
      //     let column = element.value;
      //     this.listOfFilterValueOfMap[column].length? this
      //   });
      //   (this.listOfSearchMnName.length ? this.listOfSearchMnName.some(mnName => item.mnName.indexOf(mnName) !== -1) : true) &&
      //   (this.listOfSearchAdmin.length ? this.listOfSearchAdmin.some(admin => item.admin.indexOf(admin) !== -1) : true)
      // )
    };
    //全量搜索函数
    // const filterFuncAll = (item) => {
    //   return (
    //     item.mnName.indexOf(this.searchValue) !== -1 ||
    //     item.admin.indexOf(this.searchValue) !== -1 ||
    //     item.mn.indexOf(this.searchValue) !== -1 ||
    //     item.time.indexOf(this.searchValue) !== -1 ||
    //     item.ldn.indexOf(this.searchValue) !== -1 ||
    //     item.addr.indexOf(this.searchValue) !== -1
    //   )
    // }

    const filterFuncAll = (item) => {
      let filterAllResult = false;
      for (let i = 0; i < this.checkOptionsOne.length; i++) {
        let column = this.checkOptionsOne[i].value;
        if (
          !item[column] ||
          new String(item[column]).indexOf(this.searchValue) !== -1
        ) {
          filterAllResult = true;
          break;
        }
        // if(item[column].indexOf(this.search) !== -1) {
        //   filterAllResult = true;
        //   break;
        // }
      }
      return filterAllResult;
      // return (
      //   item.mnName.indexOf(this.searchValue) !== -1 ||
      //   item.admin.indexOf(this.searchValue) !== -1 ||
      //   item.mn.indexOf(this.searchValue) !== -1 ||
      //   item.time.indexOf(this.searchValue) !== -1 ||
      //   item.ldn.indexOf(this.searchValue) !== -1 ||
      //   item.addr.indexOf(this.searchValue) !== -1
      // )
    };
    // 列模糊搜索函数
    const singleColumnSearch = (item) => {
      let columnSearchResult = true;
      // let filterResult = true;
      // for(let i=0; i<this.filterList.length; i++) {
      //   let column = filter[i];
      //   if(this.listOfFilterValueOfMap[column].length && this.listOfFilterValueOfMap[column].some(name => item[column].indexOf(name) === -1)) {
      //     filterResult = false;
      //     break;
      //   }
      // }
      // return filterResult;
      for (let i = 0; i < this.columnSearchList.length; i++) {
        let column = this.columnSearchList[i];
        if (
          this.columnSearchValueMap[column] &&
          item[column].indexOf(this.columnSearchValueMap[column]) === -1
        ) {
          columnSearchResult = false;
          break;
        }
      }
      return columnSearchResult;

      // return (
      //   item.addr.indexOf(this.addrSearchValue) !== -1
      // )
    };
    // const singleColumnSearch = (item) => {
    //   return (
    //     item.addr.indexOf(this.addrSearchValue) !== -1
    //   )
    // }
    const complexFilter = (item) => {
      return (
        filterFunc(item) && filterFuncAll(item) && singleColumnSearch(item)
      );
    };
    let filterData = this.tableData_bak;
    filterData = this.tableData_bak.filter((item) => complexFilter(item));
    // if ((this.listOfSearchMnName.length || this.listOfSearchAdmin.length) || this.searchValue || this.addrSearchValue) {

    // } else {
    //   filterData = this.tableData_bak.filter((item)=> item);
    // }
    if (this.sortValue != null) {
      this.tableData = filterData.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 = filterData;
    }
    this.searchDropMenuVisible = false;
    console.log("search competed.");
    // this.nzModalService.closeAll();
    // this.addrSearchDropMenuVisible=false;
  }

  isAddPanelVisible: boolean = false;
  openAddPanel() {
    this.isAddPanelVisible = true;
  }
  addPanelConfirm() {
    let maxRid = this.tableData[this.tableData.length - 1].rid;
    let record = {
      rid: maxRid + 1,
      mn: this.validateFormAdd.get("mn").value,
      mnName: this.validateFormAdd.get("mnName").value,
      time: this.validateFormAdd.get("time").value,
      ldn: this.validateFormAdd.get("ldn").value,
      admin: this.validateFormAdd.get("admin").value,
      addr: this.validateFormAdd.get("addr").value,
    };
    this.tableData = this.tableData.map((e) => e);
    this.tableData.push(record);
    this.tableData_bak = this.tableData;
    this.isAddPanelVisible = false;
  }

  addPanelCancel() {
    this.validateFormAdd.reset();
    this.isAddPanelVisible = false;
  }

  closeAddPanel() {
    this.isAddPanelVisible = false;
  }

  batchDelete() {
    console.log("mapOfCheckedId", this.mapOfCheckedId);
    this.tableData = this.tableData.filter(
      (item) => !this.mapOfCheckedId[item.rid]
    );
    this.tableData_bak = this.tableData;
  }

  save() {
    console.log("start to save.");
    this.nzMessageService.info("保存成功");
  }

  exportOfExcel() {
    let exportData = [];
    this.tableData.forEach((element) => {
      exportData.push({
        站点编号: element.mn,
        站点名称: element.mnName,
        时间: element.time,
        "Ldn(dB)": element.ldn,
        状态: element.status,
        行政区: element.admin,
        地址: element.addr,
      });
    });
    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, "基础数据表");
  }

  batchDownLoad() {
    console.log("start to batch download file.");
    let blob = new Blob(["实例文件"], { type: "application/zip" });
    let a = document.createElement("a");
    a.href = URL.createObjectURL(blob);
    a.download = "实例文件包" + "-" + new Date().toLocaleDateString() + ".zip";
    a.click();
  }
}