import React, { useRef } from 'react';
import Modal, { ModalProps } from '@/components/Modal';
import { fetchTableData } from '@/utils/table';
import Table, { ProColumns, ActionType } from '@/components/Table';
import TimeText from '@/components/Typography/TimeText';
import { getChannelData } from '@/services/dataBorad/retentionAnalysis';

interface TableModalPropsType extends ModalProps {
  modalData: any;
  onCancel: () => void;
}
const TableModal = ({ onCancel, modalData, ...rest }: TableModalPropsType) => {
  const tableRef = useRef<ActionType>();
  const columns: ProColumns<any>[] = [
    {
      title: '时间',
      dataIndex: 'time',
      hideInSearch: true,
      width: '20%',
      render: (_, row) => [<TimeText value={row} format={'YYYY-MM-DD'} />],
    },
    {
      title: '渠道类型',
      dataIndex: 'channel_name',
      hideInSearch: 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,
    },
  ];

  const handleCancel = () => {
    onCancel();
  };

  return (
    <Modal title="渠道活跃分析" onCancel={handleCancel} width={800} {...rest}>
      <Table
        columns={columns}
        rowKey="id"
        search={false}
        actionRef={tableRef}
        request={async (params) => {
          params.time = modalData;
          return fetchTableData(getChannelData, params);
        }}
      />
    </Modal>
  );
};

export default TableModal;
