import React, { Component } from 'react';
import numeral from 'numeral';
import moment from 'moment';
import {
  Row,
  Col,
  Icon,
  Card,
  Tabs,
  Table,
  Radio,
  DatePicker,
  Tooltip,
  Menu,
  Dropdown,
} from 'antd';
import {
  ChartCard,
  yuan,
  MiniArea,
  MiniBar,
  MiniProgress,
  Field,
  Bar,
  Pie,
  TimelineChart,
} from '../../components/Charts';
import Trend from '../../components/Trend';
import NumberInfo from '../../components/NumberInfo';
import styles from './index.less';

const { TabPane } = Tabs;
const { RangePicker } = DatePicker;

export default class Dashboard extends Component {
  render() {
    // mock order card data
    const orderData = [];
    const beginDay = new Date().getTime();
    const fakeY = [23, 44, 32, 55, 66, 89, 100, 200, 300, 400, 112, 500, 1000];
    for (let i = 0; i < fakeY.length; i++) {
      orderData.push({
        x: moment(new Date(beginDay + (1000 * 60 * 60 * 24 * i))).format('YYYY-MM-DD'),
        y: fakeY[i],
      });
    }
    // mock rank list data
    const rankingListData = [];
    for (let i = 0; i < 7; i++) {
      rankingListData.push({
        title: `渠道商${i + 1} - 贝尔安亲${i + 1}`,
        total: 25894.8,
      });
    }

    // 顶部的4个卡片，响应式配置
    const topColResponsiveProps = {
      xs: 24,
      sm: 12,
      md: 12,
      lg: 12,
      xl: 6,
      style: { marginBotton: 24 },
    };

    // 底部的销售额与用户量趋势图，日期筛选
    const salesExtra = (
      <div className={styles.salesExtraWrap}>
        <div className={styles.salesExtra}>
          <a>今日</a>
          <a>本周</a>
          <a>本月</a>
          <a>全年</a>
        </div>
        <RangePicker
          style={{ width: 256 }}
        />
      </div>
    );

    return (
      <div>
        <Row gutter={24}>
          <Col {...topColResponsiveProps}>
            <ChartCard
              bordered={false}
              title="总销售额"
              action={<Tooltip title="指标说明"><Icon type="info-circle-o" /></Tooltip>}
              total={yuan(1247238957)}
              footer={<Field label="日均销售额" value={`¥${numeral(23343).format('0,0')}`} />}
              contentHeight={46}
            >
              <Trend flag="up" style={{ marginRight: 16 }}>
                周同比<span className={styles.trendText}>12%</span>
              </Trend>
              <Trend flag="down">
                日环比<span className={styles.trendText}>11%</span>
              </Trend>
            </ChartCard>
          </Col>
          <Col {...topColResponsiveProps}>
            <ChartCard
              bordered={false}
              title="支付笔数"
              action={<Tooltip title="指标说明"><Icon type="info-circle-o" /></Tooltip>}
              total={100000}
              footer={<Field label="日订单量" value={5000} />}
              contentHeight={46}
            >
              <MiniBar
                height={46}
                data={orderData}
              />
            </ChartCard>
          </Col>
          <Col {...topColResponsiveProps}>
            <ChartCard
              bordered={false}
              title="用户量"
              action={<Tooltip title="指标说明"><Icon type="info-circle-o" /></Tooltip>}
              total={4000}
              footer={<Field label="日增长量" value={200} />}
              contentHeight={46}
            >
              <MiniArea
                color="#975FE4"
                height={46}
                data={orderData}
              />
            </ChartCard>
          </Col>
          <Col {...topColResponsiveProps}>
            <ChartCard
              bordered={false}
              title="活跃量"
              action={<Tooltip title="指标说明"><Icon type="info-circle-o" /></Tooltip>}
              total="2037个"
              footer={<Field label="日活增长" value={200} />}
              contentHeight={46}
            >
              <MiniArea
                line
                height={46}
                data={orderData}
              />
            </ChartCard>
          </Col>
        </Row>
        <Card
          bordered={false}
          bodyStyle={{ padding: 0 }}
          style={{ marginTop: 20 }}
        >
          <div className={styles.salesCard}>
            <Tabs tabBarExtraContent={salesExtra} size="large" tabBarStyle={{ marginBottom: 24 }}>
              <TabPane tab="销售额" key="sales">
                <Row>
                  <Col xl={16} lg={12} md={12} sm={24} xs={24}>
                    <div className={styles.salesBar}>
                      <Bar
                        height={295}
                        title="销售额趋势"
                        data={orderData}
                      />
                    </div>
                  </Col>
                  <Col xl={8} lg={12} md={12} sm={24} xs={24}>
                    <div className={styles.salesRank}>
                      <h4 className={styles.rankingTitle}>渠道商销售额排名</h4>
                      <ul className={styles.rankingList}>
                        {
                          rankingListData.map((item, i) => (
                            <li key={item.title}>
                              <span className={(i < 3) ? styles.active : ''}>{i + 1}</span>
                              <span>{item.title}</span>
                              <span>{numeral(item.total).format('0,0')}</span>
                            </li>
                          ))
                        }
                      </ul>
                    </div>
                  </Col>
                </Row>
              </TabPane>
            </Tabs>
          </div>
        </Card>
      </div>
    );
  }
}