import PageHeader from '@/components/PageHeader';
import SearchTable from '@/components/SearchTable';
import { GET_OPERATION_LIST } from '@/services/Urls';
// import { getSearchOptions } from '@/services/common/logManagement';
import { exportExcelData } from '@/utils/tableFC';
import type { ProColumns } from '@ant-design/pro-components';
import { useIntl } from '@umijs/max';
import { AutoComplete,Button,Descriptions,Drawer } from 'antd';
import { useEffect,useState } from 'react';

type TableListItem = {
  [key: string]: any;
};

type ExpandItem = {
  createTime?:string | undefined,
  loginIp?:string | undefined,
  loginOutTime?:string | undefined,
  loginTime?:string | undefined
}
// type tree = {
//   title: string;
//   value: number | string;
//   children?: tree[];
// };

const Operate: React.FC = () => {
  const intl = useIntl();

  // const [treeData, setTreeData] = useState([]); //页面（菜单）搜索数据
  // const [loading, setLoading] = useState(true);
  const [exportValue, setExportValue] = useState([]);
  const [selectParams, setSelectParams] = useState({});
  const [options, setOptions] = useState<{ value: string }[]>([]);
  const [visible, setVisible] = useState(false);
  const [expand, setExpandData] = useState<ExpandItem>({});

  //搜索的树形菜单
  // const treeMenu = (date: any) => {
  //   console.log(date);
  //   const treeData = date.map((element: any) => {
  //     const obj: tree = {
  //       title: intl.formatMessage({
  //         id: `menu.${element.privilegeNumber}`,
  //       }),
  //       value: element.id,
  //       children:
  //         element.children?.map((val: any) => ({
  //           title: intl.formatMessage({
  //             id: `menu.${element.privilegeNumber}.${val.privilegeNumber}`,
  //           }),
  //           value: val.id,
  //         })) || [],
  //     };
  //     return obj;
  //   });
  //   setTreeData(treeData);
  //   setLoading(false);
  // };

  // 菜单接口
  // const getMenu = () => {
  //   getMenuCompany()
  //     .then((res: any) => {
  //       treeMenu(res.data);
  //     })
  //     .catch(() => {
  //       setLoading(false);
  //     });
  // };

  const getSearOptions = (value: string) => {
    const newOption  = [
      {value:value + 'test1'},
      {value:value + 'test2'},
    ];
    setOptions(newOption);

  };

  const columns: ProColumns<TableListItem>[] = [
    {
      title: intl.formatMessage({
        id: 'operate.columns.title.userName',
      }),
      dataIndex: 'userName',
      key: 'userName',
      valueType: 'text',
      width: 200,
      fixed: 'left',
      search: false,
    },
    {
      title: intl.formatMessage({
        id: 'operate.columns.title.name',
      }),
      dataIndex: 'name',
      key: 'name',
      valueType: 'text',
      renderFormItem: () => {
        return (
          <AutoComplete
            options={options}
            style={{ width: 350 }}
            onSearch={(text) => getSearOptions(text)}
            placeholder={intl.formatMessage({
              id: 'form.info.text.entrt',
            })}
          />
        );
      },
    },
    {
      title: intl.formatMessage({
        id: 'operate.columns.title.page',
      }),
      dataIndex: 'module',
      key: 'module',
      valueType: 'treeSelect',
      fieldProps: {
        // treeData,
        treeCheckable: true,
        showCheckedStrategy: 'SHOW_PARENT',
        maxTagCount: 'responsive',
      },
      // search: {
      //   transform: (value) => {
      //     interface TreeData {
      //       value: number;
      //       title: string;
      //     }
      //     const filterTreeData = (value: number[]): TreeData[] => {
      //       let newValue = value;
      //       const pArr = treeData.filter((item: any) => {
      //         return value.includes(item.value);
      //       });
      //       let cArr: any[] = [];
      //       // 获取pArr中的所有子节点的id
      //       pArr.forEach((item: any) => {
      //         // value数组删除与pArr中的id重复的id
      //         newValue = value.filter((val: any) => {
      //           return val === item.value;
      //         });

      //         item.children.forEach((cItem: any) => {
      //           cArr.push(cItem.value);
      //         });
      //       });
      //       return [...cArr, ...newValue];
      //     };

      //     return {
      //       menuId: filterTreeData(value),
      //     };
      //   },
      // },
    },
    {
      title: intl.formatMessage({
        id: 'operate.columns.title.operation',
      }),
      dataIndex: 'businessName',
      key: 'businessName',
      search: false,
    },
    {
      title: intl.formatMessage({
        id: 'operate.columns.title.operaTime',
      }),
      dataIndex: 'createTime',
      key: 'createTime',
      search: false,
    },
    {
      title: intl.formatMessage({
        id: 'operate.columns.title.operaTime',
      }),
      dataIndex: 'time',
      key: 'time',
      valueType: 'dateRange',
      hideInTable: true,
      search: {
        transform: (value) => ({
          startTime: value ? value[0] : '',
          endTime: value ? value[1] : '',
        }),
      },
    },
    {
      title: intl.formatMessage({ id: 'columns.title.other' }),
      valueType: 'option',
      key: 'option',
      fixed: 'right',
      width: 150,
      render: (_, record,) => [
        <div key="option">
          <Button
            size="small"
            type="link"
            key="editable"
            onClick={() => {
              setVisible(true);
              setExpandData(record);
            }}
          >
            {intl.formatMessage({ id: 'columns.handel.unfold' })}
          </Button>
        </div>,
      ],
    },
  ];

  const [customColumns, setCustomColumns] = useState<ProColumns<TableListItem>[]>(columns);



  useEffect(() => {
    const newColumns = customColumns.map((item:any) => item);
    newColumns[1].renderFormItem = () => {
      return (
        <AutoComplete
          options={options}
          style={{ width: 350 }}
          onSearch={(text) => getSearOptions(text)}
          placeholder={intl.formatMessage({
            id: 'form.info.text.entrt',
          })}
        />
      );
    };
    setCustomColumns([...newColumns]);
    
  }, [options]);

  useEffect(() => {
    // getMenu();
    // getOptions();
  }, []);

  return (
    <div>
      <PageHeader />
      <Drawer
        placement="right"
        onClose={() => {
          setVisible(false);
        }}
        width={600}
        open={visible}
      >
        <Descriptions title={intl.formatMessage({ id: 'columns.title.other' })}>
          <Descriptions.Item
            label={intl.formatMessage({ id: 'operate.label.loginIp' })}
          >
            {expand.loginIp}
          </Descriptions.Item>
          <Descriptions.Item
            label={intl.formatMessage({ id: 'operate.label.loginOutTime' })}
          >
            {expand.loginOutTime}
          </Descriptions.Item>
          <Descriptions.Item
            label={intl.formatMessage({ id: 'operate.label.loginTime' })}
          >
            {expand.loginTime}
          </Descriptions.Item>
        </Descriptions>
      </Drawer>
      <SearchTable
        columns={customColumns}
        headerTitle={intl.formatMessage({
          id: 'columns.title.header',
        })}
        isMass={true}
        rowKey={'id'}
        reload={0}
        selectedValue={(e) => setExportValue(e)}
        selectParams={(e) => setSelectParams(e)}
        toolBarRender={() => [
          <Button
            key="primary"
            onClick={() => {
              exportExcelData(
                GET_OPERATION_LIST,
                intl.formatMessage({
                  id: 'operate.columns.title.operaLog',
                }),
                customColumns,
                selectParams,
                exportValue,
              );
            }}
          >
            {exportValue.length
              ? intl.formatMessage({
                  id: 'operate.handel.exportSelected',
                })
              : intl.formatMessage({
                  id: 'columns.handel.export',
                })}
          </Button>,
        ]}
        initAPI={GET_OPERATION_LIST}
      />
    </div>
  );
};
export default Operate;