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

@connect(({ dogGroup }) => ({ dogGroup }))
class DogBreed extends React.PureComponent {
  componentWillMount = () => {
    this.props.dispatch({
      type: 'dogGroup/getFciDogAll',
      payload: {},
    });
  };
  componentDidMount = () => {};
  componentWillUnmount = () => {};
  onChange = () => e => {
    let value = e.target.value;
    this.props.dispatch({
      type: 'dogGroup/getResultList',
      payload: {
        value,
      },
    });
  };
  goDetail = typeNo => {
    router.push(`/breed/detail?typeNo=${typeNo}`);
  };
  render() {
    const { value, resultList } = this.props.dogGroup;
    return (
      <div className={styles.breed_body}>
        <div className={styles.breed_t}>
          <div className={styles.breed_s}>
            <input
              value={value}
              onChange={this.onChange()}
              onBlur={() => {
                window.scrollTo(0, 0);
              }}
            />
            搜索
          </div>
        </div>
        <div className={styles.breed_l}>
          {resultList
            ? resultList.map((data, index) => {
                return (
                  <div
                    key={data.type_no}
                    onClick={() => {
                      this.goDetail(data.type_no);
                    }}
                    className={styles.breed_l_tr}
                  >
                    {data.chinese_breed_name}
                  </div>
                );
              })
            : null}
        </div>
      </div>
    );
  }
}
export default DogBreed;