import React, { useRef, useState } from 'react';
import Table, { ProColumns, ActionType } from '@/components/Table';
import moment from 'moment';
import { fetchTableData } from '@/utils/table';
import { getRententionData } from '@/services/dataBorad/retentionAnalysis';
import TableModal from './components/TableModal';

const RetentionAnalysis = () => {
  const [visible, setVisible] = useState(false);
  const [requestData, setRequestData] = useState();
  const sendData = (row: any) => {
    setVisible(true);
    setRequestData(row.time);
  };

  const tableRef = useRef<ActionType>();
  const columns: ProColumns<any>[] = [
    {
      title: '时间',
      dataIndex: 'time',
    },
    {
      title: '时间',
      dataIndex: 'select_time',
      valueType: 'dateRange',
      width: '20%',
      hideInTable: true,
      ellipsis: true,
    },
    {
      title: '登录用户数',
      dataIndex: 'login_user',
      hideInSearch: true,
      ellipsis: true,
    },
    {
      title: '第一日',
      dataIndex: 'day_one',
      hideInSearch: true,
    },
    {
      title: '第二日',
      dataIndex: 'day_two',
      hideInSearch: true,
    },
    {
      title: '第四日',
      dataIndex: 'day_three',
      hideInSearch: true,
    },
    {
      title: '第五日',
      dataIndex: 'day_four',
      hideInSearch: true,
    },
    {
      title: '第六日',
      dataIndex: 'day_five',
      hideInSearch: true,
    },
    {
      title: '第七日',
      dataIndex: 'day_seven',
      hideInSearch: true,
    },
    {
      title: '操作',
      valueType: 'option',
      width: 150,
      render: (_, row) => [
        <button
          key="edit"
          onClick={() => {
            sendData(row);
          }}
        >
          查看
        </button>,
      ],
    },
  ];
  return (
    <div>
      <Table
        columns={columns}
        rowKey="id"
        actionRef={tableRef}
        request={async (params) => {
          if ((params.select_time ?? '') !== '') {
            params.start_time = moment(params.select_time[0]).valueOf() / 1000;
            params.end_time = moment(params.select_time[1]).valueOf() / 1000;
          }
          return await fetchTableData(getRententionData, params);
        }}
      />
      <TableModal
        visible={visible}
        modalData={requestData}
        onCancel={function () {
          setVisible(false);
        }}
      />
    </div>
  );
};

export default RetentionAnalysis;
