import React, { useRef, useState } from 'react';
import echarts from 'echarts/lib/echarts';
import {
  getActiveData,
  getMonthUserData,
  getOldUserData,
  getTodayUserData,
  getWeekUserData,
} from '@/services/dataBorad/activeAnalysis';
import MoreData from '@/widget/MoreData';
import ReactEcharts from 'echarts-for-react';
import { Card, Col, Row, Select } from 'antd';
const ActiveAnalysis: React.FC = () => {
  const { Option } = Select;
  const [timeType, setTimeType] = useState('day');
  const getData = async (func) => {
    const res = await func({});
    return res.data;
  };

  const [data, setData] = useState(getData(getTodayUserData));
  const [oldUserData, setOldUserData] = useState(getData(getOldUserData));
  const [weekData, setWeekData] = useState(getData(getWeekUserData));
  const [monthData, setMonthData] = useState(getData(getMonthUserData));

  const getOption = async (item = 'day') => {
    const res = await getActiveData({ time_type: item });
    const xData: any = [];
    const seriesData: any = [];
    res.data.foreach((item: any) => {
      xData.push(item.time);
      seriesData.push(item.dwn);
    });
    const option = {
      xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        // data: xData,
      },
      yAxis: {
        type: 'value',
      },
      series: [
        {
          data: [150, 230, 224, 218, 135, 147, 360],
          // data: seriesData.reverse(),
          type: 'line',
        },
      ],
    };
    return option;
  };
  const [option, setOption] = useState(getOption);
  const setTimeOption = (val: any) => {
    setTimeType(val);
    setOption(getOption(val));
  };

  return (
    <div>
      <Row gutter={24} justify="space-between" style={{ marginBottom: 10 }}>
        <Col span={6}>
          <Card style={{ height: '200px' }}>{MoreData(data, '今日活跃用户数')}</Card>
        </Col>
        <Col span={6}>
          <Card style={{ height: '200px' }}>{MoreData(oldUserData, '今日登录老用户数')}</Card>
        </Col>
        <Col span={6}>
          <Card style={{ height: '200px' }}>{MoreData(weekData, 'WAU(本周去重人数)')}</Card>
        </Col>
        <Col span={6}>
          <Card style={{ height: '200px' }}>{MoreData(monthData, 'MAU(本月去重人数)')}</Card>
        </Col>
      </Row>
      <Card style={{ width: '100%' }}>
        <Row gutter={32} style={{ marginBottom: 10 }}>
          <Col span={6}>
            <h1>登陆人数数据图</h1>
            <Select
              defaultValue="lucy"
              value={timeType}
              style={{ width: 100 }}
              bordered={false}
              onChange={(val) => {
                setTimeOption(val);
              }}
            >
              <Option value="day">每日</Option>
              <Option value="week">每周</Option>
              <Option value="month">每月</Option>
            </Select>
          </Col>
          <Col span={18}>
            <ReactEcharts option={option} />
          </Col>
        </Row>
      </Card>
    </div>
  );
};

export default ActiveAnalysis;
