import React, { useRef, useState } from 'react';
import Table, { ProColumns, ActionType } from '@/components/Table';
import { getRententionData } from '@/services/dataBorad/rechargeAnalysis';
import { Select } from 'antd';
import moment from 'moment';
import TimeType from '@/constants/enum/timeType';
const Address: React.FC = () => {
  const tableRef = useRef<ActionType>();
  const [timeType, setTimeType] = useState(TimeType.DAY);

  const columns: ProColumns<any>[] = [
    {
      title: '时间类型',
      dataIndex: 'time_type',
      hideInTable: true,
      initialValue: TimeType.DAY,
      renderFormItem: (item, { type, defaultRender, ...rest }, form) => {
        return (
          <Select
            options={[
              {
                label: '每日',
                value: TimeType.DAY,
              },
              {
                label: '每周',
                value: TimeType.WEEK,
              },
              {
                label: '每月',
                value: TimeType.MONTH,
              },
            ]}
            onChange={(val) => {
              setTimeType(val);
            }}
          />
        );
      },
    },
    {
      title: '日期',
      dataIndex: 'time',
      width: '10%',
      hideInSearch: true,
    },
    {
      title: '时间筛选',
      dataIndex: 'timeData',
      hideInTable: true,
      width: '20%',
    },
    {
      title: '时间',
      dataIndex: 'select_time',
      valueType: 'dateRange',
      width: '20%',
      hideInTable: true,
      ellipsis: true,
    },
    {
      title: '付费次数',
      dataIndex: 'pay_num',
      hideInSearch: true,
      width: '20%',
    },
    {
      title: '付费用户数',
      dataIndex: 'pay_user',
      width: 150,
      hideInSearch: true,
    },
    {
      title: '付费金额',
      dataIndex: 'pay_price',
      hideInSearch: true,
      width: '20%',
    },
    {
      title: '付费率',
      dataIndex: 'rate',
      hideInSearch: true,
      width: '20%',
    },
    {
      title: 'ARPU',
      dataIndex: 'arpu',
      hideInSearch: true,
      width: '20%',
    },
    {
      title: 'ARPPU',
      dataIndex: 'arppu',
      hideInSearch: true,
      width: '20%',
    },
  ];

  return (
    <Table
      columns={columns}
      rowKey="id"
      actionRef={tableRef}
      // search={false}
      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 getRententionData(params);
      }}
    />
  );
};

export default Address;
