import React, { Component } from 'react';
import { Col, Row, Icon } from 'antd';

class GuideLeader extends Component { // eslint-disable-line react/prefer-stateless-function
  state = {
    imageHeader: this.props.image_header,
    benefit_1: this.props['benefit_1'],
    benefit_2: this.props['benefit_2'],
    benefit_3: this.props['benefit_3'],
    benefit_4: this.props['benefit_4'],
    benefit_5: this.props['benefit_5'],
  };

  constructor(props, context) {
    super(props, context);
  }

  renderBenefits() {
    const items = ['benefit_1', 'benefit_2', 'benefit_3', 'benefit_4', 'benefit_5'];
    const benefits = [];
    items.reduce((prev, current) => {
      prev.push(this.state[current]);
      return prev;
    }, benefits);

    return (benefits.map((benefit, index) => {
      let className = `benefit_${index + 1}`;
      <div className={className}>
        <img src={benefit} />
      </div>
    }));
  }

  render() {
    return (
      <Row>
        <Row className="title">
          <img src={this.state.imageHeader} />
        </Row>
        <Row className="info">
          <p>爱客进销存，能和钉钉打通的进销存软件。轻松掌握库存、采购和销售数据，摆脱手工管理的糊涂账。</p>
        </Row>
        <Row className="body ik-margin-top-20">
          {this.renderBenefits()}
        </Row>
        <div className="begin-use">
          <a
            href="https://t.dingtalk.com/invite/index?code=bd7028b731&inviterUid=DBEE9A0E6BCA4E4091E7FE61FE0552A6"
            target="_blank">
            加入钉钉交流群以获取更多</a>
        </div>
      </Row>
    );
  }
}

export default GuideLeader;
