import React, { useRef, useState } from 'react';
import Table, { ProColumns, ActionType } from '@/components/Table';
import moment from 'moment';
import TimeType from '@/constants/enum/timeType';
import MoreData from '@/widget/MoreData';
import { getCoreData, getListData } from '@/services/dataBorad/coreData';
import { Card, Col, Row, Select } from 'antd';
import { fetchTableData } from '@/utils/table';
const CoreData: React.FC = () => {
  const tableRef = useRef<ActionType>();

  const TimeTypeList = [
    {
      label: '每日',
      value: TimeType.DAY,
    },
    {
      label: '每周',
      value: TimeType.WEEK,
    },
    {
      label: '每月',
      value: TimeType.MONTH,
    },
  ];

  const [coreData, setCoreData] = useState({
    today_active_user: '',
    today_new_user: '',
    month_recharge: '',
    recharge_sum: '',
  });
  const columns: ProColumns<any>[] = [
    {
      title: '时间类型',
      dataIndex: 'code',
      hideInTable: true,
      initialValue: TimeType.DAY,
      valueEnum: () => {
        const options = {};
        TimeTypeList.forEach((item) => {
          options[item.value] = { text: item.label };
        });
        return options;
      },
    },
    {
      title: '日期',
      dataIndex: 'start_time',
      hideInSearch: true,
    },
    {
      title: '时间',
      dataIndex: 'select_time',
      valueType: 'dateRange',
      hideInTable: true,
      ellipsis: true,
    },
    {
      title: '活跃用户数',
      dataIndex: 'active_user',
      hideInSearch: true,
    },
    {
      title: '当日充值总额',
      dataIndex: 'today_recharge',
      hideInSearch: true,
    },
    {
      title: '付费用户数',
      dataIndex: 'pay_user',
      hideInSearch: true,
    },
    {
      title: '付费率',
      dataIndex: 'pay_ratio',
      hideInSearch: true,
    },
  ];

  return (
    <div>
      <Row gutter={24} style={{ marginBottom: 10 }}>
        <Col span={6}>
          <Card style={{ height: '120px' }}>
            {MoreData(null, '今日活跃用户数', coreData.today_active_user + '人')}
          </Card>
        </Col>
        <Col span={6}>
          <Card style={{ height: '120px' }}>
            {MoreData(null, '今日新增人数', coreData.today_new_user + '人')}
          </Card>
        </Col>
        <Col span={6}>
          <Card style={{ height: '120px' }}>
            {MoreData(null, '本月充值总额', coreData.month_recharge + '万元')}
          </Card>
        </Col>
        <Col span={6}>
          <Card style={{ height: '120px' }}>
            {MoreData(null, '充值总额', coreData.recharge_sum + '万元')}
          </Card>
        </Col>
      </Row>

      <Table
        columns={columns}
        rowKey="id"
        actionRef={tableRef}
        request={async (params) => {
          params.code = parseInt(params.code);
          if ((params.select_time ?? '') !== '') {
            params.start_time = moment(params.select_time[0]).valueOf() / 1000;
            params.end_time = moment(params.select_time[1]).valueOf() / 1000;
          }
          const data = await getCoreData({});
          setCoreData(data);
          const res = await fetchTableData(getListData, params);
          console.log('res', res);
          for (const key in res.data) {
            if (Object.prototype.hasOwnProperty.call(res.data, key)) {
              const element = res.data[key];
              if (
                element.start_time != '' &&
                element.start_time != undefined &&
                element.start_time != null
              ) {
                element.start_time = moment(element.start_time * 1000).format(
                  'YYYY-MM-DD hh:mm:ss',
                );
              }
            }
          }
          return res;
        }}
      />
    </div>
  );
};

export default CoreData;
