import { Column } from '@ant-design/charts';
import { ProCard } from '@ant-design/pro-components';
import { Tabs } from 'antd';

import React from 'react';

// type
import { TimeType } from '../typing';

// comp

// style
import styles from '../styles/bannerInfoCard.less';

// typing

/**comp 组件分解 */
const { TabPane } = Tabs;

/**styles 组件样式配置 */
const offendingColSpanProps = { sm: 24, md: 12, lg: 16 }; // 违规卡片项栅格配置
const rankingColSpanProps = { sm: 24, md: 12, lg: 8}; // 排名卡片项栅格配置

/**state 初始化数据 */
const offendingTabData: Record<string, any>[] = [
  { tabName: '风险人员识别量', keyName: 'totalCount' },
  // { tabName: '违规网点', keyName: 'network' },
];
// const topItemStyle = { marginBottom: 24, height: 190 }; // 每个卡片独立样式

// 前三排名颜色样式
const handleRanking = (value: number) => {
  switch (value) {
    case 0:
      return styles.rankFirst
      break;
    case 1:
      return styles.rankSecond
      break;
    case 2:
      return styles.rankThird
      break;
    default:
      return ''
      break;
  }
};

/**子组件 childComp */
const RankListCard: React.FC = ({
  rankingListData,
}: {
  rankingListData: Record<string, any>[];
}) => {
  return (
    <ul className={styles.rankingList}>
      {rankingListData.map((item, i) => (
        <li key={item.title}>
          {/* <span className={`${styles.rankingItemNumber} ${i < 3 ? styles.active : ''}`}> */}
          <span className={`${styles.rankingItemNumber} ${handleRanking(i)}`}>
            {i + 1}
          </span>
          <span className={styles.rankingItemTitle} title={item.title}>
            {item.title}
          </span>
          <span className={styles.rankingItemValue}>{item.total}</span>
          {/* <span className={styles.rankingItemValue}>{numeral(item.total).format('0,0')}</span> */}
        </li>
      ))}
    </ul>
  );
};

const BannerInfoCard: React.FC = ({
  offendingData,
  rankingListData,
  isActive,
  selectDate,
}: {
  offendingData: Record<string, any>[];
  rankingListData: Record<string, any>[];
  isActive: (key: TimeType) => string;
  selectDate: (key: TimeType) => void;
}) => {
  // const { token } = theme.useToken();
  // const { initialState } = useModel('@@initialState');
  return (
    <div className="bannerInfoCard_wrap">
      <ProCard key="resize-observer" bordered wrap gutter={24} style={{marginTop: 24, marginBottom: 24}}>
        <Tabs
          tabBarExtraContent={
            <div className={styles.salesExtraWrap}>
              <div className={styles.salesExtra}>
                {/* <a className={isActive('today')} onClick={() => selectDate('today')}>
                今日
              </a> */}
              {/* TODO 使用测试数据完善交互 */}
                <a className={isActive('week')} onClick={() => selectDate('week')}>
                  本周
                </a>
                <a className={isActive('month')} onClick={() => selectDate('month')}>
                  本月
                </a>
                <a className={isActive('year')} onClick={() => selectDate('year')}>
                  本年
                </a>
              </div>
              {/* <RangePicker
              value={rangePickerValue}
              onChange={handleRangePickerChange}
              style={{ width: 256 }}
            /> */}
            </div>
          }
          size="large"
          tabBarStyle={{ marginBottom: 24 }}
        >
          {offendingTabData.map((item) => {
            return (<TabPane tab={item.tabName} key={item.keyName}>
                <ProCard gutter={24} wrap ghost>
                  <ProCard gutter={24} ghost colSpan={offendingColSpanProps}>
                    <div className={styles.salesBar}>
                      {/* TODO 替换使用reactEchart */}
                      <Column
                        color="rgba(4, 99, 242, 1)"
                        height={300}
                        maxColumnWidth={30}
                        forceFit
                        data={offendingData 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>
                  </ProCard>
                  <ProCard  title={`${item.tabName}排名`} ghost colSpan={rankingColSpanProps} headStyle={{paddingTop: 0, paddingBottom: 0, paddingLeft: 100}} bodyStyle={{paddingLeft: 100}}>
                      <RankListCard rankingListData={rankingListData}></RankListCard>
                  </ProCard>
                </ProCard>
              </TabPane>)
          })}
        </Tabs>
      </ProCard>
    </div>
  );
};

export default BannerInfoCard;
