import React, { useRef, useState } from 'react';
import Table, { ProColumns, ActionType } from '@/components/Table';
import moment from 'moment';
import TimeType from '@/constants/enum/timeType';
import { getData } from '@/utils/getData';
import MoreData from '@/widget/MoreData';
import {
  getCoreData,
  getPayData,
  getTodayUserData,
  getMonthPayData,
  getNewUserData,
} from '@/services/dataBorad/coreData';
import { Card, Col, Row, Select } from 'antd';
const CoreData: React.FC = () => {
  const tableRef = useRef<ActionType>();
  const [timeType, setTimeType] = useState(TimeType.DAY);

  // const [date, setDate] = useState(getData);
  const [userDate, setUserDate] = useState(getData(getTodayUserData));
  const [newUserdate, setNewUserDate] = useState(getData(getNewUserData));
  const [payData, setPayDate] = useState(getData(getMonthPayData));
  const [allPay, setAllPayDate] = useState(getData(getPayData));
  const columns: ProColumns<any>[] = [
    {
      title: '时间类型',
      dataIndex: 'coinType',
      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',
      hideInSearch: true,
      width: '10%',
    },
    {
      title: '时间',
      dataIndex: 'select_time',
      valueType: 'dateRange',
      width: '20%',
      hideInTable: true,
      ellipsis: true,
    },
    {
      title: '活跃用户数',
      dataIndex: 'address',
      hideInSearch: true,
      width: '20%',
    },
    {
      title: '新用户数量',
      dataIndex: 'new_user',
      width: 150,
      hideInSearch: true,
    },
    {
      title: '当日充值总额',
      dataIndex: 'address',
      hideInSearch: true,
      width: '20%',
    },
    {
      title: '付费用户数',
      dataIndex: 'address',
      hideInSearch: true,
      width: '20%',
    },
    {
      title: '付费率',
      dataIndex: 'address',
      hideInSearch: true,
      width: '20%',
    },
    {
      title: 'ARPU',
      dataIndex: 'arpu',
      hideInSearch: true,
      width: '20%',
    },
    {
      title: 'ARPPU',
      dataIndex: 'arppu',
      hideInSearch: true,
      width: '20%',
    },
  ];

  return (
    <div>
      <Row gutter={24} style={{ marginBottom: 10 }}>
        <Col span={6}>
          <Card style={{ height: '200px' }}>{MoreData(userDate, '今日活跃用户数', '人')}</Card>
        </Col>
        <Col span={6}>
          <Card style={{ height: '200px' }}>{MoreData(newUserdate, '今日新增人数', '人')}</Card>
        </Col>
        <Col span={6}>
          <Card style={{ height: '200px' }}>{MoreData(payData, '本月充值总额', '万元')}</Card>
        </Col>
        <Col span={6}>
          <Card style={{ height: '200px' }}>{MoreData(allPay, '充值总额', '万元')}</Card>
        </Col>
      </Row>

      <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 getCoreData(params);
        }}
      />
    </div>
  );
};

export default CoreData;
