import React, { Component } from 'react';
import { connect } from 'react-redux';
import router from 'umi/router';
import DocumentTitle from 'react-document-title';
import styles from './index.less';

@connect(({ dogGroup, fciSection }) => ({ dogGroup, fciSection }))
class index extends Component {
  state = {};
  componentWillMount = () => {
    const { list } = this.props.dogGroup;
    if (list.length === 0) {
      router.goBack();
      return;
    }
    const { index } = this.props.location.query;
    if (index) {
      this.props.dispatch({
        type: 'fciSection/updateState',
        payload: {
          index,
          item: list[index],
        },
      });
      this.props.dispatch({
        type: 'fciSection/getFciSectionByGroupId',
        payload: {
          groupNo: list[index].group_no,
        },
      });
    }
  };
  componentDidMount = () => {};
  componentWillUnmount = () => {
    this.props.dispatch({
      type: 'fciSection/clearState',
      payload: {},
    });
  };
  goOpen = (data, index) => {
    const { listI } = this.props.fciSection;
    if (index === listI) {
      this.props.dispatch({
        type: 'fciSection/updateState',
        payload: {
          listI: null,
        },
      });
      return;
    }
    this.props.dispatch({
      type: 'fciSection/updateState',
      payload: {
        listI: index,
      },
    });
    this.props.dispatch({
      type: 'fciSection/getFciDogBySectionId',
      payload: {
        gsNo: data.gs_no,
      },
    });
  };
  goDetail = typeNo => {
    router.push(`/breed/detail?typeNo=${typeNo}`);
  };
  render() {
    const { item, list, listI } = this.props.fciSection;
    return (
      <DocumentTitle title="FCI犬种标准">
        <div className={styles.body}>
          <div className={styles.body_c}>
            <div className={styles.g_t}>
              {item.chinese_group_name}
              <p>{item.introduction}</p>
            </div>
            <div className={styles.g_b}>
              {list
                ? list.map((data, index) => {
                    return (
                      <div key={data.section_no} className={styles.g_b_p}>
                        <div
                          onClick={() => {
                            this.goOpen(data, index);
                          }}
                          className={`${styles.g_b_i} ${index === listI ? styles.g_b_i_a : ''}`}
                        >
                          {data.chinese_section_name}
                        </div>
                        <div className={`${styles.g_b_c} ${index === listI ? styles.g_b_c_a : ''}`}>
                          {data.children
                            ? data.children.map((cData, cIndex) => {
                                return (
                                  <div
                                    key={cData.type_no}
                                    onClick={() => {
                                      this.goDetail(cData.type_no);
                                    }}
                                    className={styles.g_b_c_i}
                                  >
                                    {cData.chinese_breed_name} {cData.english_breed_name}
                                  </div>
                                );
                              })
                            : null}
                        </div>
                      </div>
                    );
                  })
                : null}
            </div>
          </div>
        </div>
      </DocumentTitle>
    );
  }
}

export default index;