import { Card, Col, DatePicker, Row, Tabs, Tooltip } from 'antd';
import type { RangePickerProps } from 'antd/es/date-picker/generatePicker';
import type moment from 'moment';
import { Column, TinyColumn } from '@ant-design/charts';

import numeral from 'numeral';
import type { DataItem } from '../data';
import styles from '../style.less';
import { InfoCircleOutlined } from '@ant-design/icons';
import { ChartCard } from './Charts';
import { courseBrowseTimesStatistics } from '../service';
import { useRequest } from 'umi';

const topColResponsiveProps = {
  xs: 24,
  sm: 24,
  md: 24,
  lg: 24,
  xl: 24,
  style: { marginBottom: 24 },
};

const TrainingRow = () => {
  const { loading: courseBrowseTimesLoading, data: courseBrowseTimesData = null } = useRequest(courseBrowseTimesStatistics); // 课程浏览量
  return (
    <Row>
      <Col {...topColResponsiveProps}>
        <div className={styles.salesBar}>
          <ChartCard loading={courseBrowseTimesLoading} bordered={false} bodyStyle={{ padding: '20px 24px 8px', marginBottom: '24px' }} title="课程浏览量">
            <div className={styles.salesBar}>
              <Column
                height={300}
                forceFit
                data={courseBrowseTimesData as any}
                xField="course_name"
                yField="browse_times"
                tooltip={{
                  formatter: (name, value: number) => {
                    // const {name, value} = args;
                    console.log('args', name)
                    return { name: '浏览量', value: value };
                  }
                }}
                xAxis={{
                  visible: true,
                  title: {
                    text: '课程名称',
                    visible: false,
                  },
                }}
                yAxis={{
                  visible: true,
                  title: {
                    text: '课程浏览量',
                    visible: false,
                  },
                }}
              /*
              title={{
                visible: true,
                text: '课程浏览量',
                style: {
                  fontSize: 14,
                },
              }}*/

              />
            </div>
          </ChartCard>
        </div>
      </Col>
    </Row>
  );
}

export default TrainingRow;