import React, { useState, useEffect, useCallback } from 'react';
import PageHeader from '@/components/PageHeader';
import { useDebounceEffect } from 'ahooks';
import { FormattedMessage } from 'umi';
import SearchInput from '@/tenants-ui/SearchInput';
import Table from '@/components/Table';
import styles from './index.less';
import Icon from '@/tenants-ui/Icon';
import cx from 'classnames';
import { EllipsisOutlined } from '@ant-design/icons';
import { Dropdown, Menu } from 'antd';
import ShowModal from '../components/showModal';

export default function RecordList() {
  const [searchText, setSearchText] = useState();
  const [total, setTotal] = useState(50);
  const [sorteredObj, setSorteredObj] = useState({ applyDate: 'ASC' }); //改变排序
  const [applyFromTypes, setApplyFromTypes] = useState([]); //申请来源 选中的申请方式 筛选
  const [page, setPage] = useState({
    pageNum: 1,
    pageSize: 20,
  });

  const columns = [
    {
      title: '申请日期',
      dataIndex: 'applyDate',
      sorter: true,
      sortered: sorteredObj.applyDate,
      render(t, r) {
        return (
          <span>
            <span className={styles.dateCircle}></span>
            <span>{t}</span>
          </span>
        );
      },
    },
    {
      //筛选 表格头部
      title: (
        <div className={styles.headerTitle}>
          {(applyFromTypes?.length && (
            <div className={styles.iconBox}>
              <Icon className={styles.headerIcon} type="checkbox" weight={600} />
              <Icon
                className={cx(styles.headerIcon, styles.headerIconActive)}
                type="dot"
                weight={600}
              />
            </div>
          )) || <Icon className={styles.headerIcon} type="checked" weight={600} />}
          申请来源
        </div>
      ),
      dataIndex: 'applyFrom',
      sorter: false,
      render(t, r) {
        return <span>{t}</span>;
      },
      filters: [
        { value: 1, label: '小程序' },
        { value: 2, label: 'pc端' },
      ],
      filteredValue: applyFromTypes,
    },
    {
      title: '申请人',
      dataIndex: 'applyPerson',
      sorter: false,
      render(t, r) {
        return <span>{t}</span>;
      },
    },
    {
      title: '加班空间',
      dataIndex: 'overSpace',
      sorter: false,
      render(t, r) {
        return <span>{t}</span>;
      },
    },
    {
      title: '加班时间',
      dataIndex: 'overtime',
      sorter: true,
      sortered: sorteredObj.overtime,
      render(t, r) {
        return <span>{t}</span>;
      },
    },
    {
      title: '',
      dataIndex: 'action',
      sorter: false,
      render(t, r) {
        //table body的内容
        {
          /* ...下拉菜单 */
        }
        return (
          <Dropdown
            trigger="click"
            placement="bottomRight"
            overlay={
              <Menu style={{ width: 120 }} onClick={({ key }) => menuClick(key)}>
                <Menu.Item key="view">查看</Menu.Item>
                <Menu.Item key="edit">编辑</Menu.Item>
              </Menu>
            }
          >
            <span className={styles.trigger}>
              <EllipsisOutlined style={{ fontSize: 20 }} />
            </span>
          </Dropdown>
        );
      },
    },
  ];

  const list = [
    {
      rId: 1,
      applyDate: '2020/01/02',
      applyFrom: '小程序',
      applyPerson: '莫兰',
      overSpace: '数字交付中心',
      overtime: '2020/03/13 19:40-21:00',
    },
    {
      rId: 2,
      applyDate: '2020/01/03',
      applyFrom: '小程序',
      applyPerson: '莫兰蓝',
      overSpace: '数字交付中心',
      overtime: '2020/03/13 19:20-21:20',
    },
    {
      rId: 3,
      applyDate: '2020/01/05',
      applyFrom: '小程序',
      applyPerson: '莫兰',
      overSpace: '数字交付中心',
      overtime: '2020/03/13 19:40-21:00',
    },
    {
      rId: 4,
      applyDate: '2020/01/06',
      applyFrom: '小程序',
      applyPerson: '莫兰蓝',
      overSpace: '数字交付中心',
      overtime: '2020/03/13 19:20-21:20',
    },
  ];

  //弹出框的现实
  const [modalVisible, setModalVisible] = useState({ visible: false });
  const onPageChange = (pageObj, pageSize) => {
    setPage(pageObj);
  };
  const menuClick = (key) => {
    //debugger;
    setModalVisible({ visible: true });
  };

  useEffect(() => {
    console.log('useEffect');
  }, [page, sorteredObj, applyFromTypes]);

  return (
    <div>
      <PageHeader
        title={<FormattedMessage id="menu.runtime.recordList" />}
        action={
          <SearchInput
            placeholder="搜索"
            onSearch={(s) => {
              setSearchText(s || undefined);
            }}
            onCancel={() => {
              setSearchText();
            }}
          />
        }
      />
      <div styles={{ marginTop: 12 }}>
        <Table
          total={total}
          columns={columns}
          dataSource={list}
          page={page}
          rowKey="rId"
          loading={false}
          onPageChange={onPageChange}
          onSortChange={(col, sortered) => {
            //'ASC' : 'DESC' 改变排序
            setSorteredObj({ [col.dataIndex]: sortered });
          }}
          onFilterChange={(dataIndex, newList) => {
            setPage({ ...page, pageNum: 1 });
            setApplyFromTypes(newList);
          }}
        ></Table>
      </div>
      {modalVisible.visible && (
        <ShowModal
          onClose={() => {
            setModalVisible({ visible: false });
          }}
        ></ShowModal>
      )}
    </div>
  );
}
