import React, { Component, useState, useEffect } from 'react';
import { Card, Row, Col, Statistic, Icon, Modal, Tabs, Button } from 'antd';
// import IndexEcharts from './components/indexEcharts';
// import Swiper from './swiper/index';
import moment from 'moment';
import router from 'umi/router';
import request from '@/utils/request';
import apis from '@/services/apis';
import TimeSelect from '../compents/TimeSelect';
import BuildingSelect from '@/components/SelectButton/BuildSelect';
import Navigate from '@/components/Navigate';
import ActivityOverview from './activityOverview';
import ActivityContent from './activityContent';


const { TabPane } = Tabs;

const activity = props => {

  const [helpVisible, setHelpVisible] = useState(false);


  function callback(key) {
    console.log(key);
  }

  return (
    <div>
      <Tabs
        onChange={callback}
        type="card"
        tabBarExtraContent={
          <Button type="link" onClick={() => setHelpVisible(true)}>
            指标说明
          </Button>
        }
      >
        <TabPane tab="统计总况" key="1">
          <ActivityOverview></ActivityOverview>
        </TabPane>
        <TabPane tab="统计内容" key="2">
          <ActivityContent></ActivityContent>
        </TabPane>
      </Tabs>

      <Modal
        title="指标说明"
        visible={helpVisible}
        onCancel={() => setHelpVisible(false)}
        footer={null}
      >
        <Row>
          <p style={{ fontSize: '0.106rem', color: '#333', marginBottom: '4px' }}>分享人数：</p>
          <p style={{ fontSize: '0.106rem', color: '#999', marginBottom: '8px' }}>
            分享小程序活动的总人数
          </p>
        </Row>
        <Row>
          <p style={{ fontSize: '0.106rem', color: '#333', marginBottom: '4px' }}>分享次数：</p>
          <p style={{ fontSize: '0.106rem', color: '#999', marginBottom: '8px' }}>
            触发小程序活动分享的总次数
          </p>
        </Row>
        <Row>
          <p style={{ fontSize: '0.106rem', color: '#333', marginBottom: '4px' }}>新增注册用户：</p>
          <p style={{ fontSize: '0.106rem', color: '#999', marginBottom: '8px' }}>
            通过分享的活动授权手机号的总人数
          </p>
        </Row>
        <Row>
          <p style={{ fontSize: '0.106rem', color: '#333', marginBottom: '4px' }}>访问人数：</p>
          <p style={{ fontSize: '0.106rem', color: '#999', marginBottom: '8px' }}>
            访问小程序活动的总人数
          </p>
        </Row>

        <Row>
          <p style={{ fontSize: '0.106rem', color: '#333', marginBottom: '4px' }}>访问次数：</p>
          <p style={{ fontSize: '0.106rem', color: '#999', marginBottom: '8px' }}>
            访问小程序活动的总次数
          </p>
        </Row>
      </Modal>
    </div>
  );
};
export default activity;
