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 { ArrowDownOutlined, ArrowUpOutlined } from '@ant-design/icons';

import { statMallStatistics, getAmountAndGoodsCount } from '@/services/home/index'
import { Line } from '@ant-design/charts';

export default () => {
  const [deviceData, setDeviceData] = useState([]);
  const [profit, setProfit] = useState([]);
  const [shop, setShop] = useState([]);


  
  const config = {
    title: {
      visible: true,
      text: '商城(商品数量/金额)-折线图',
    },
    padding: 'auto',
    forceFit: true,
    data:deviceData,
    xField: 'date',
    yField: 'value',
    yAxis: { label: { formatter: (v) => `${v}`.replace(/\d{1,3}(?=(\d{3})+$)/g, (s) => `${s},`) } },
    legend: { position: 'right-top' },
    seriesField: 'type',
    color: (d) => {
      return d === 'register' ? '#93D072' : '#2D71E7';
    },
    responsive: true,
  };


  useEffect(() => {
    statMallStatistics().then((res) => {
      setProfit(res.data)
    })
    getAmountAndGoodsCount().then((res) => {
      let list = []
      res.data.map((item, index) => {
        list.push({
          "date": item.createTime,
          "type": "shop",
          "value": Number(item.goodsCount),
        })
        list.push({
          "date": item.createTime,
          "type": "money",
          "value": Number(item.amountCount),
        })
      })
      console.log(list);
      setDeviceData(list)
    })
  }, []);

  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?.todayTransaction}
              precision={2}
              prefix="￥"
            />
          </Card>
        </Col>
        <Col span={6}>
          <Card>
            <Statistic
              title="昨天成交"
              value={profit?.yesterdayTransaction}
              precision={2}
              prefix="￥"
            />
          </Card>
        </Col>
        <Col span={6}>
          <Card>
            <Statistic
              title="上周成交"
              value={profit?.lastWeekTransaction}
              precision={2}
              prefix="￥"
            />
          </Card>
        </Col>
        <Col span={6}>
          <Card>
            <Statistic
              title="上月成交"
              value={profit?.lastMonthTransaction}
              precision={2}
              prefix="￥"
            />
          </Card>
        </Col>
      </Row>
      <Divider>商城(商品数量/金额)-折线图</Divider>
      {
        deviceData.length != 0 ?  <Line {...config} /> :  <></>
      }
    </>
  );
};