import { h, Component } from 'preact';

import CdnImage from '../cdn-image/cdn-image';

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

interface ActGoodsItemProps {
  propsData?: {
    picurl?: string;
    num?: string;
    name?: string;
    getTime?: string;
    deadline?: string;
    provider?: string;
    statusStyle?: string;
    statusText?: string;
  };
  clickButton?: (data: any) => void;
}

export default class ActGoodsItem extends Component<ActGoodsItemProps, {}> {
  render() {
    const { propsData = {}, clickButton = (() => {}),
    } = this.props;
    return (
      <div>
        {propsData.name && (
        <div
          className={styles['record-item']}
        >
          <div className={`${styles['record-col-item']}`} >
            <div className={styles['record-img-box']}>
              <CdnImage
                className={styles['record-img']}
                src={propsData.picurl || ''}
              />
              <text className={styles['record-img-text']}>{propsData.num}</text>
            </div>
            <text className={styles['record-img-text']}>{propsData.name}</text>
          </div>
          <div className={`${styles['record-col-item']}`} >
            {propsData.getTime}
          </div>
          <div className={`${styles['record-col-item']}`} >
            {propsData.deadline}
          </div>
          <div className={`${styles['record-col-item']}`} >
            {propsData.provider}
          </div>
          <div className={`${styles['record-col-item']}`} >
            <div
              className={`${styles['record-status-text']} ${styles[`record-status-text-${propsData.statusStyle}`]}`}
              onClick={() => clickButton(propsData)}
            >{propsData.statusText}
            </div>
          </div>
        </div>
        )}
      </div>
    );
  }
}