import { VirtualList } from 'pixuireactcomponents';
import { h, Component } from 'preact';

import ActGoodsItem from '../act-goods-item/act-goods-item';
import Empty from '../empty/empty';

import styles from './css/index.less';

interface ActGoodsListProps {
  emptyText?: string;
  mListIsEnd?: boolean;
  clickButton?: (data: any) => void;
  loadMore?: () => Promise<any>;
  mGoodsList?: Array<{
    picurl?: string;
    num?: string;
    name?: string;
    getTime?: string;
    deadline?: string;
    provider?: string;
    statusStyle?: string;
    statusText?: string;
  }>;
}

export default class ActGoodsList extends Component<ActGoodsListProps, {}> {
  render() {
    const ItemFunc = (index: number) => (
      <ActGoodsItem
        key={index}
        propsData={mGoodsList[index]}
        clickButton={clickButton}
      />
    );
    const { emptyText = '暂无奖励记录',
      mListIsEnd,
      clickButton = (() => {}),
      loadMore = (() => Promise.resolve(1)),
      mGoodsList = [],
    } = this.props;
    const remToPx = (remValue: number): number => {
      const width = window.innerWidth;
      const height = window.innerHeight;
      const base = Math.min(height, width);
      let fontSize: number;

      if (base > 720) { // 兼容ipad
        fontSize = 80;
      } else if (base == 720 && width < 1280) {
        fontSize = 70;
      } else {
        fontSize = 100 * (base / 750);
      }

      return remValue * fontSize;
    };
    return (
      <div
        className={styles['record-list-container']}
      >
        {/* 标题 */}
        {mGoodsList.length > 0 && (
        <div className={styles['record-list-title']}>
          <div className={`${styles['record-col-item']} ${styles['record-title-item']}`}>奖励</div>
          <div className={`${styles['record-col-item']} ${styles['record-title-item']}`}>获奖时间</div>
          <div className={`${styles['record-col-item']} ${styles['record-title-item']}`}>有效期至</div>
          <div className={`${styles['record-col-item']} ${styles['record-title-item']}`}>比赛</div>
          <div className={`${styles['record-col-item']} ${styles['record-title-item']}`}>状态</div>
        </div>
        )}
        {mGoodsList.length > 0
          ? (
            <div className={styles['record-list']}>
              <VirtualList
                layout={'vertical'}
                width={'100%'}
                height={'100%'}
                itemCount={mGoodsList.length}
                itemSize={remToPx(1.16)}
                cacheSize={0}
                renderItemFunc={ItemFunc}
                hasMore={() => !mListIsEnd}
                loadMore={loadMore}
                style={{ scrollbarColor: 'transparent', scrollbarWidth: 0 }}
                touchBottomThreshold={500}
              >
              </VirtualList>
            </div>
          )
          : (
            <div className={styles['record-list']}>
              <Empty text={emptyText}/>
            </div>
          )}
      </div>
    );
  }
}