import React, { useState, useEffect } from 'react';

import { PageContainer, ProTable } from '@ant-design/pro-components';
import { Card, Col, Row, Statistic, Divider, Tag, Image } from 'antd';
import './index.less';
import { Line } from '@ant-design/charts';

import { ArrowDownOutlined, ArrowUpOutlined } from '@ant-design/icons';


import services from '@/services/admin';

const { indexProfit, indexDeviceReport, indexDevice } = services.IndexController;


export default () => {
  const [deviceData, setDeviceData] = useState([]);
  const [profit, setProfit] = useState([]);
  const [shop, setShop] = useState([]);
  const deviceConfig = {
    data: deviceData,
    xField: 'name',
    yField: 'value',
    seriesField: 'category',
    xAxis: {
      type: 'time',
    },
    yAxis: {
      label: {
        // 数值格式化为千分位
        formatter: (v) => `${v}`.replace(/\d{1,3}(?=(\d{3})+$)/g, (s) => `${s},`),
      },
    },
  };

  useEffect(() => {
    indexProfit().then(({ data }) => {
      setProfit(data);
      // setShop(data.shop);
    }).catch(() => {

    });
    indexDeviceReport().then(({ data, success }) => {
      if (success) {
        setDeviceData(data);
      }

    }).catch(() => {

    });


  }, []);

  return (
    <>
      <Divider>充电桩</Divider>
      <Row gutter={10}>
        <Col span={6}>
          <Card>
            <Statistic
              title="今日充电"
              value={profit?.device_count?.today}
              precision={2}
              prefix="￥"
            />
          </Card>
        </Col>
        <Col span={6}>
          <Card>
            <Statistic
              title="昨日充电"
              value={profit?.device_count?.yesterday}
              precision={2}
              prefix="￥"
            />
          </Card>
        </Col>
        <Col span={6}>
          <Card>
            <Statistic
              title="上周充电"
              value={profit?.device_count?.week}
              precision={2}
              prefix="￥"
            />
          </Card>
        </Col>
        <Col span={6}>
          <Card>
            <Statistic
              title="上月充电"
              value={profit?.device_count?.month}
              precision={2}
              prefix="￥"
            />
          </Card>
        </Col>
      </Row>
      <Divider>商城</Divider>
      <Row gutter={10}>
        <Col span={6}>
          <Card>
            <Statistic
              title="今天成交"
              value={profit?.shop_count?.today}
              precision={2}
              prefix="￥"
            />
          </Card>
        </Col>
        <Col span={6}>
          <Card>
            <Statistic
              title="昨天成交"
              value={profit?.shop_count?.yesterday}
              precision={2}
              prefix="￥"
            />
          </Card>
        </Col>
        <Col span={6}>
          <Card>
            <Statistic
              title="上周成交"
              value={profit?.shop_count?.week}
              precision={2}
              prefix="￥"
            />
          </Card>
        </Col>
        <Col span={6}>
          <Card>
            <Statistic
              title="上月成交"
              value={profit?.shop_count?.month}
              precision={2}
              prefix="￥"
            />
          </Card>
        </Col>
      </Row>
      <Divider>商城(商品数量/金额)-折线图</Divider>
      <Line {...deviceConfig} />


    </>
  );
};

