import React from 'react';
import { connect } from 'react-redux';
import router from 'umi/router';
import styles from './index.less';

class GroupItem extends React.PureComponent {
  goDetail = index => {
    router.push(`/breed/group?index=${index}`);
  };
  render() {
    const { item, index } = this.props;
    return (
      <div
        className={styles.gr_i}
        onClick={() => {
          this.goDetail(index);
        }}
      >
        <div className={styles.gr_i_l}>
          {item.chinese_group_name}
          <span>{item.english_group_name}</span>
        </div>
        {index + 1}
      </div>
    );
  }
}

@connect(({ dogGroup }) => ({ dogGroup }))
class DogGroup extends React.PureComponent {
  componentWillMount = () => {
    this.props.dispatch({
      type: 'dogGroup/getFciGroup',
      payload: {},
    });
  };
  componentDidMount = () => {};
  componentWillUnmount = () => {};
  render() {
    const { list } = this.props.dogGroup;
    return (
      <div className={styles.group_body}>
        {list
          ? list.map((data, index) => {
              return <GroupItem key={data.group_no} item={data} index={index}></GroupItem>;
            })
          : null}
      </div>
    );
  }
}
export default DogGroup;