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

@connect(({ detail }) => ({ detail }))
class index extends Component {
  constructor(props) {
    super(props);
    this.state = {
      defaultImg: null,
    };
  }
  componentWillMount = () => {
    const { typeNo } = this.props.location.query;
    if (typeNo) {
      this.props.dispatch({
        type: 'detail/getFciDogById',
        payload: {
          typeNo,
        },
      });
    }
  };
  componentDidMount = () => {};
  componentWillUnmount = () => {
    this.props.dispatch({
      type: 'detail/clearState',
      payload: {},
    });
  };
  onError = () => {
    this.setState({
      defaultImg: bg02,
    });
  };
  render() {
    const { data } = this.props.detail;
    const { defaultImg } = this.state;
    return (
      <DocumentTitle title="FCI犬种标准">
        <div className={styles.body}>
          <div className={styles.body_c}>
            <div className={styles.b_t}>
              {/* {data.fci_standard_no ? (
                <img
                  src={
                    defaultImg ||
                    `http://www.cku.org.cn/uploadimage/dogname${data.fci_standard_no}.jpg`
                  }
                  onError={this.onError}
                  alt={data.english_breed_name}
                />
              ) : (
                <img src={bg02} alt={data.english_breed_name} />
              )} */}
              <img src={bg02} alt={data.english_breed_name} />
              <h2>{data.chinese_breed_name}</h2>
              <h3>{data.english_breed_name}</h3>
            </div>
            {data.type_no ? (
              <div className={styles.b_c}>
                <div className={styles.b_c_t}>
                  <div className={styles.b_c_t_t}>
                    <div className={styles.b_c_t_i}>
                      <span>分类</span>
                      {data.chinese_section_name || '--'}
                    </div>
                    <div className={styles.b_c_t_i}>
                      <span>犬种编号</span>
                      {data.type_no || '--'}
                    </div>
                    <div className={styles.b_c_t_i}>
                      <span>FCI认可日期</span>
                      {data.date_of_acceptance_on_a_definitive_basis_by_the_fci
                        ? data.date_of_acceptance_on_a_definitive_basis_by_the_fci.split(' ')[0]
                        : '--'}
                    </div>
                  </div>
                  <div className={styles.b_c_t_b}>
                    <div className={styles.b_c_t_b_i}>
                      <span>{data.origin || '--'}</span>
                      犬种起源国
                    </div>
                    <div className={styles.b_c_t_b_i}>
                      <span>
                        {data.date_of_publication_of_the_official_validstandard
                          ? data.date_of_publication_of_the_official_validstandard.split(' ')[0]
                          : '--'}
                      </span>
                      犬种标准生效日期
                    </div>
                    <div className={styles.b_c_t_b_i}>
                      <span>{data.working_trial || '--'}</span>
                      工作测试
                    </div>
                  </div>
                </div>
                <div className={styles.b_c_c}>
                  <div className={styles.b_c_c_tr}>
                    <span>原产地：</span>
                    <p>{data.origin || '--'}</p>
                  </div>
                  <div className={styles.b_c_c_tr}>
                    <span>用途：</span>
                    <p dangerouslySetInnerHTML={{ __html: data.utilization || '--' }}></p>
                  </div>
                  <div className={styles.b_c_c_tr}>
                    <span>FCI分组：</span>
                    <p>
                      {`第${data.group_no}组：${data.chinese_group_name}`}
                      <br />
                      {`第${data.section_no}部分：${data.chinese_section_name}`}
                    </p>
                  </div>
                  <div className={styles.b_c_c_tr}>
                    <span>历史沿革：</span>
                    <p
                      dangerouslySetInnerHTML={{ __html: data.brief_historical_summary || '--' }}
                    ></p>
                  </div>
                </div>
                {data.general_appearance ? (
                  <div className={styles.b_c_b}>
                    <div className={styles.b_c_b_t}>总体外形</div>
                    <div
                      className={styles.b_c_b_b}
                      dangerouslySetInnerHTML={{ __html: data.general_appearance }}
                    ></div>
                  </div>
                ) : null}
                {data.important_proportions ? (
                  <div className={styles.b_c_b}>
                    <div className={styles.b_c_b_t}>重要比例</div>
                    <div
                      className={styles.b_c_b_b}
                      dangerouslySetInnerHTML={{ __html: data.important_proportions }}
                    ></div>
                  </div>
                ) : null}
                {data.behaviour_temperament ? (
                  <div className={styles.b_c_b}>
                    <div className={styles.b_c_b_t}>行为/秉性</div>
                    <div
                      className={styles.b_c_b_b}
                      dangerouslySetInnerHTML={{ __html: data.behaviour_temperament }}
                    ></div>
                  </div>
                ) : null}
                {data.head ? (
                  <div className={styles.b_c_b}>
                    <div className={styles.b_c_b_t}>头部</div>
                    <div
                      className={styles.b_c_b_b}
                      dangerouslySetInnerHTML={{ __html: data.head }}
                    ></div>
                  </div>
                ) : null}
                {data.neck ? (
                  <div className={styles.b_c_b}>
                    <div className={styles.b_c_b_t}>颈部</div>
                    <div
                      className={styles.b_c_b_b}
                      dangerouslySetInnerHTML={{ __html: data.neck }}
                    ></div>
                  </div>
                ) : null}
                {data.body ? (
                  <div className={styles.b_c_b}>
                    <div className={styles.b_c_b_t}>躯干</div>
                    <div
                      className={styles.b_c_b_b}
                      dangerouslySetInnerHTML={{ __html: data.body }}
                    ></div>
                  </div>
                ) : null}
                {data.tail ? (
                  <div className={styles.b_c_b}>
                    <div className={styles.b_c_b_t}>尾部</div>
                    <div
                      className={styles.b_c_b_b}
                      dangerouslySetInnerHTML={{ __html: data.tail }}
                    ></div>
                  </div>
                ) : null}
                {data.skin ? (
                  <div className={styles.b_c_b}>
                    <div className={styles.b_c_b_t}>皮肤</div>
                    <div
                      className={styles.b_c_b_b}
                      dangerouslySetInnerHTML={{ __html: data.skin }}
                    ></div>
                  </div>
                ) : null}
                {data.coat ? (
                  <div className={styles.b_c_b}>
                    <div className={styles.b_c_b_t}>被毛</div>
                    <div
                      className={styles.b_c_b_b}
                      dangerouslySetInnerHTML={{ __html: data.coat }}
                    ></div>
                  </div>
                ) : null}
                {data.size_and_weight ? (
                  <div className={styles.b_c_b}>
                    <div className={styles.b_c_b_t}>尺寸和重量</div>
                    <div
                      className={styles.b_c_b_b}
                      dangerouslySetInnerHTML={{ __html: data.size_and_weight }}
                    ></div>
                  </div>
                ) : null}
                {data.limbs ? (
                  <div className={styles.b_c_b}>
                    <div className={styles.b_c_b_t}>四肢</div>
                    <div
                      className={styles.b_c_b_b}
                      dangerouslySetInnerHTML={{ __html: data.limbs }}
                    ></div>
                  </div>
                ) : null}
                {data.gait ? (
                  <div className={styles.b_c_b}>
                    <div className={styles.b_c_b_t}>步态</div>
                    <div
                      className={styles.b_c_b_b}
                      dangerouslySetInnerHTML={{ __html: data.gait }}
                    ></div>
                  </div>
                ) : null}
                {data.faults ? (
                  <div className={styles.b_c_b}>
                    <div className={styles.b_c_b_t}>缺陷</div>
                    <div
                      className={styles.b_c_b_b}
                      dangerouslySetInnerHTML={{ __html: data.faults }}
                    ></div>
                  </div>
                ) : null}
                {data.serious_faults ? (
                  <div className={styles.b_c_b}>
                    <div className={styles.b_c_b_t}>严重缺陷</div>
                    <div
                      className={styles.b_c_b_b}
                      dangerouslySetInnerHTML={{ __html: data.serious_faults }}
                    ></div>
                  </div>
                ) : null}
                {data.disqualifying_faults ? (
                  <div className={styles.b_c_b}>
                    <div className={styles.b_c_b_t}>失格缺陷</div>
                    <div
                      className={styles.b_c_b_b}
                      dangerouslySetInnerHTML={{ __html: data.disqualifying_faults }}
                    ></div>
                  </div>
                ) : null}
                {data.nb ? (
                  <div className={styles.b_c_b}>
                    <div className={styles.b_c_b_t}>注意</div>
                    <div
                      className={styles.b_c_b_b}
                      dangerouslySetInnerHTML={{ __html: data.nb }}
                    ></div>
                  </div>
                ) : null}
              </div>
            ) : (
              <div className={styles.b_c}>
                <div className={styles.b_c_n}></div>
                <div className={styles.b_c_n_t}>该犬种信息还没有更新，敬请期待</div>
              </div>
            )}
          </div>
        </div>
      </DocumentTitle>
    );
  }
}

export default index;