import { Column } from "@ant-design/charts";

import { Card, Col, Row, DatePicker } from "antd";
import type { DataItem } from '../data'
import type { RangePickerProps } from 'antd/es/date-picker/generatePicker';

import numeral from 'numeral';

import styles from '../analysis.less';
import type moment from "moment";

export type TimeType = 'today' | 'week' | 'month' | 'year'


type RangePickerValue = RangePickerProps<moment.Moment>['value']
const { RangePicker } = DatePicker

const rankListData: { title: string, value: number }[] = []
const arr = ['丰乐服务区', '肥东服务区', '太湖服务区', '文集服务区', '河口服务区', '八公山服务区', '大龙山服务区'];
for (let i = 0; i < 7; i += 1) {
  rankListData.push({ title: arr[i], value: 231101 * (i + 2) })
  rankListData.reverse()
}

const tabList: { key: TimeType, tab: string }[] = [
  { key: 'today', tab: '今日' },
  { key: 'week', tab: '本周' },
  { key: 'month', tab: '本月' },
  { key: 'year', tab: '本年' },
]

type RevenueCardProps = {
  rangePickerValue: RangePickerValue,
  handleRangePickerChange: (value: RangePickerValue) => void,
  selectDate: (type: TimeType) => void
  isActive: (type: TimeType) => string
  loading: boolean,
  salesData: DataItem[]
}


const RevenueCard = ({ rangePickerValue, loading, salesData, isActive, selectDate, handleRangePickerChange }: RevenueCardProps) => {

  return (
    <Card
      bordered={false}
      loading={loading}
      title="营收趋势"
      style={{marginBottom:24}}
      extra={
        <div className={styles.salesExtraWrap}>
          <div className={styles.salesExtra}>
            {tabList.map(n => (<a className={isActive(n.key)} onClick={() => selectDate(n.key)}>{n.tab}</a>))}
          </div>
          <RangePicker
            value={rangePickerValue}
            onChange={handleRangePickerChange}
            style={{ maxWidth: 256 }}
          />
        </div>
      }
    >
      <Row gutter={24}>
        <Col xxl={17} xl={17} lg={17} md={12} sm={12} xs={24} style={{ marginBottom: 24 }}>
          <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: '营收',
              },
            }}
          />

        </Col>
        <Col xxl={7} xl={7} lg={7} md={12} sm={12} xs={24} style={{ marginBottom: 24 }} >
          <div className={styles.salesRank}>
            <h4 className={styles.rankingTitle}>服务区经营排行</h4>
            <ul className={styles.rankingList}>
              {rankListData.map((item, i) => (
                <li key={item.title}>
                  <span className={`${styles.rankingItemNumber} ${i < 3 ? styles.active : ''}`}>
                    {i + 1}
                  </span>
                  <span className={styles.rankingItemTitle} title={item.title}>
                    {item.title}
                  </span>
                  <span className={styles.rankingItemValue}>
                    {numeral(item.value).format('0,0')}元
                  </span>
                </li>
              ))}
            </ul>
          </div>
        </Col>
      </Row>
    </Card>
  );
};

export default RevenueCard;
