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

import numeral from 'numeral';
import type { DataItem } from '../data';
import styles from '../style.less';

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

type RangePickerValue = RangePickerProps<moment.Moment>['value'];
export type TimeType = 'today' | 'week' | 'month' | 'year';

const { RangePicker } = DatePicker;

const rankingListData: { title: string; total: number }[] = [];
for (let i = 0; i < 7; i += 1) {
  rankingListData.push({
    title: `工专路 ${i} 号店`,
    total: 323234,
  });
}

const CourseCard = ({
  rangePickerValue,
  salesData,
  isActive,
  handleRangePickerChange,
  loading,
  selectDate,
}: {
  rangePickerValue: RangePickerValue;
  isActive: (key: TimeType) => string;
  salesData: DataItem[];
  loading: boolean;
  handleRangePickerChange: (dates: RangePickerValue, dateStrings: [string, string]) => void;
  selectDate: (key: TimeType) => void;
}) => (
  <Card loading={loading} bordered={false} bodyStyle={{ padding: 0, marginBottom:'24px' }}>
    <div className={styles.salesBar}>
      <Column
        height={300}
        forceFit
        data={salesData as any}
        xField="x"
        yField="y"
        xAxis={{
          visible: true,
          title: {
            visible: false,
          },
        }}
        yAxis={{
          visible: true,
          title: {
            visible: false,
          },
        }}
        title={{
          visible: true,
          text: '课程浏览量',
          style: {
            fontSize: 14,
          },
        }}
        meta={{
          y: {
            alias: '人数',
          },
        }}
      />
    </div>
  </Card>
);

export default CourseCard;
