import React, { Component } from 'react';
// import { createPortal } from 'react-dom';
import styles from './style.css';
import { Carousel } from 'antd-mobile';
import pageIcon from './images/next_pic_btn@2x.png';

class Perview extends Component {
  constructor(props) {
    super(props);
    this.state = {
      index: props.index,
      list: props.data.filter(i => i),
    };
  }
  onChangeHandle = index => {
    this.setState({
      index: index,
    });
  };
  goPer = () => {
    const { index } = this.state;
    if (index === 0) return;
    this.setState({
      index: index - 1,
    });
  };
  goNext = () => {
    const { index, list } = this.state;
    if (index + 1 >= list.length) return;
    this.setState({
      index: index + 1,
    });
  };
  render() {
    const { index, list } = this.state;
    return (
      <div>
        <div className={styles.content}>
          <div className={styles.imgBox}>
            <Carousel
              selectedIndex={index}
              dots={false}
              afterChange={this.onChangeHandle}
            >
              {list.length === 1 ? (
                <div className={styles.carouselImg}>
                  <img src={list[0].url || list[0]} alt="" />
                </div>
              ) : (
                list.map((item, index) =>
                  item ? (
                    <div className={styles.carouselImg} key={index}>
                      <img src={item.url || item} alt="" />
                    </div>
                  ) : null
                )
              )}
            </Carousel>
          </div>
          <div className={styles.footer}>
            <div className={styles.per} onClick={this.goPer}>
              <div className={styles.leftIcon}>
                <img src={pageIcon} alt="" />
              </div>
              <div>上一张</div>
            </div>
            <div className={styles.pagination}>
              {index + 1}/{list.length}
            </div>
            <div className={styles.next} onClick={this.goNext}>
              <div>下一张</div>
              <div className={styles.rightIcon}>
                <img src={pageIcon} alt="" />
              </div>
            </div>
          </div>
        </div>
      </div>
    );
  }
}

export default Perview;
