import React, { useState, useEffect, useCallback } from "react";
import { Table, Row, Input, Select, DatePicker } from "antd";
import type { DatePickerProps, RangePickerProps } from "antd/es/date-picker";
// import { ApprovalType, Approval_Status } from "../entity";
import _ from "lodash";
import usePagination from "@/hooks/usePagination";
import { systemListApi } from "@/pages/admin/Privilege/api";
import { getStaffApi } from "@/common/api";
import { evaDataIndApi } from "../api";
import useInitial from "@/hooks/useInitail";
import moment from "moment";

const { RangePicker } = DatePicker;

const { Option } = Select;
interface Props {
  setParams: any;
}

export default function Filter({ setParams }: Props) {
  // const { list: syslist } = usePagination(systemListApi, {
  //   current: 1,
  //   pageSize: 500,
  // });
  const { list } = usePagination(getStaffApi, { current: 1, pageSize: 1000 });
  const { data } = useInitial(evaDataIndApi, [], {});

  // const seachOnchange = useCallback(
  //   _.debounce((param) => {
  //     setParams({ ...param }, true);
  //   }, 800),
  //   [setParams]
  // );
  const onChange = (value: RangePickerProps["value"], dateString: [string, string] | string) => {
    console.log("Selected Time: ", value);
    if (value) {
      setParams({ startTime: moment(value[0]).unix() * 1000, endTime: moment(value[1]).unix() * 1000 }, true);
      console.log(moment(value[0]).unix() * 1000);
      console.log(moment(value[1]).unix() * 1000);
    }
  };

  return (
    <Row justify="start" style={{ marginBottom: 20 }}>
      <Select
        allowClear
        placeholder="请选择指标名称"
        style={{ width: 150, marginRight: 10, marginBottom: 10 }}
        onChange={(value) => {
          setParams({ indicatorCode: value }, true);
        }}
        showSearch
        optionFilterProp="children"
      >
        {data.map((item: any) => (
          <Option value={item.code} key={item.code}>
            {item.name}
          </Option>
        ))}
      </Select>
      <Select
        allowClear
        placeholder="请选择导入人员"
        style={{ width: 150, marginRight: 10, marginBottom: 10 }}
        onChange={(value) => {
          setParams({ userId: value }, true);
        }}
        showSearch
        optionFilterProp="children"
      >
        {list.map((item) => (
          <Option value={item.id} key={item.id}>
            {item.name}
          </Option>
        ))}
      </Select>
      <RangePicker
        // showTime={{ format: "HH:mm:ss" }}
        // format="YYYY-MM-DD HH:mm:ss"
        onChange={onChange}
        style={{ height: 32 }}
      />
    </Row>
  );
}