import React, { Component } from 'react';
import { Carousel, Icon, Divider } from 'antd';
import styles from './index.less';

export default class ProductStockPreview extends Component {
  constructor(props) {
    super(props);
    this.state = props;
    this.styles = styles;
  }
  // 生成轮播图片资源
  getCarouselPics(props) {
    return (
      <Carousel autoplay className={this.styles.drawers}>
        {
        props.map((prop) => {
          return (
            <div>
              <img
                alt={prop.alt}
                src={prop.src}
              />
            </div>
          );
        })
        }
      </Carousel>
    );
  }

  // 生成商品库存缩略信息
  getInfoLabel(props) {
    return props.map((prop) => {
      return (
        <div>
          <div className={this.styles.info}>
            <Icon
              type={prop.icon}
              style={{
                color: 'red',
              }}
            />
            <span className={this.styles.labels}>{prop.labelName}</span>
            <span className={this.styles.labelValue}>{prop.labelValue}</span>
          </div>
          <Divider className={this.styles.divider} />
        </div>
      );
    });
  }

  render() {
    return (
      <div className={styles.productInfo}>
        { this.getCarouselPics(this.state.pics) }
        { this.getInfoLabel(this.state.labelsData) }
      </div>
    );
  }
}
