
import React, { useState, useEffect } from 'react';
import { Form, Input, Button, Icon, Select, message, Table, Divider, Row, Col, Tag, Pagination, Modal, DatePicker } from 'antd';
import router from 'umi/router';
import request from '../../utils/request'
import apis from '../../services/apis';
import UserSource from './components/UserSource.jsx';
import UserSourcepie from './components/UserSourcepie.jsx';
import UserBehavior from './components/UserBehavior.jsx';
import UserActive from './components/UserActive';
import UserSex from './components/UserSex';
import NewUsers from './components/NewUsers'
import UserConversion from './components/UserConversion'
import IntentionalCustomers from './components/IntentionalCustomers'
import styles from './styles.less'
import moment from 'moment';
import CityNums from '../charts/CityNums';
const indexEcharts = (props) => {

  const endDate = new Date()

  //为了观察数据先设30天
  const startDate = moment().subtract(7, 'day').toDate()

  function onTabledatas (e) {

  }
  
  return (

    <>
      <div style={{ display: 'flex',width:'100%' }}>
        <div className={styles.bar}>
          <UserSource endDate={endDate}  startDate={startDate} onSuccess={(e) => onTabledatas(e)}></UserSource>
        </div>
        <div className={styles.pie}>
          <UserSourcepie endDate={endDate} startDate={startDate}></UserSourcepie>
        </div>
      </div>
      <div>
      <CityNums></CityNums>
      </div>
      <div className={styles.behavior}>
        <UserBehavior tableShow={false} endDate={endDate} startDate={startDate} dataZoom={false}></UserBehavior>
      </div>
      <div style={{ display: 'flex' }}>
        <div className={styles.bar}>

          <UserActive ></UserActive>
        </div>
        <div className={styles.pie}><UserSex></UserSex> </div>
      </div>
      <div style={{ display: 'flex' }}>
        <div className={styles.bar}>
          <NewUsers endDate={endDate} startDate={startDate} dataZoom={false}></NewUsers>
        </div>
        <div className={styles.pie}><UserConversion></UserConversion> </div>
      </div >

      <div className={styles.customers}>
        <IntentionalCustomers></IntentionalCustomers>
      </div>
    </>
  )
}


export default indexEcharts