import React, { Component } from 'react';
import { connect } from 'react-redux';
import 'antd-mobile/dist/antd-mobile.less';
import styles from './index.less';
import { Button, DatePicker, Tabs, Picker, Toast } from 'antd-mobile';
import { formatDateYear } from '../common/index';

import sjIcon from '../assets/sanjiao@2x.png';
import score1 from '../assets/1@2x.png';
import score2 from '../assets/2@2x.png';
import score3 from '../assets/3@2x.png';
import icon04 from '../assets/icon04.png';

const CustomChildren = props => {
  return (
    <div
      className={`${styles.i_gr_i} ${props.children !== props.extra ? styles.i_gr_i_a : ''}`}
      onClick={props.onClick}
    >
      <span>{props.children === props.extra ? props.children : props.extra}</span>
    </div>
  );
};

@connect(({ scoreModel }) => ({ scoreModel }))
class Index extends Component {
  constructor(props) {
    super(props);
    this.state = {
      date: new Date().getFullYear(),
      selectedScoreType: {
        type: 'adult',
        title: '成年犬组',
      },
      groupNo: null,
      fciStandardNo: null,
      dateShow: false,
      showDetail: false,
    };
  }
  componentWillMount = () => {
    document.title = 'CKU年度积分榜';
  };
  componentDidMount = () => {
    this.getScoreList();
    this.props.dispatch({
      type: 'scoreModel/getFciGroup',
      payload: {},
    });
  };
  getScoreList = () => {
    this.props.dispatch({
      type: 'scoreModel/getScoreList',
      payload: {
        scoreType:
          this.state.selectedScoreType.type === 'adult'
            ? 3
            : this.state.selectedScoreType.type === 'mainland'
            ? 20
            : this.state.selectedScoreType.type === 'ohc'
            ? 'ohc'
            : this.state.selectedScoreType.type === 'bbe'
            ? 'bbe'
            : null,
        year: this.state.date,
        groupNo: this.state.groupNo,
        fciStandardNo: this.state.fciStandardNo,
      },
    });
  };
  changeDate = date => {
    this.setState(
      {
        date: formatDateYear(date),
      },
      () => {
        this.clearState(() => {
          this.getScoreList();
        });
      },
    );
  };
  showDate = () => {
    this.setState({
      dateShow: false,
    });
  };
  clearState = fun => {
    this.setState(
      {
        groupNo: null,
        fciStandardNo: null,
      },
      () => {
        if (fun) {
          fun();
        }
      },
    );
  };
  onDismiss = type => () => {
    this.setState(
      {
        [type]: null,
      },
      () => {
        this.getScoreList();
      },
    );
    if (type === 'groupNo') {
      this.setState({
        fciStandardNo: null,
      });
      this.props.dispatch({
        type: 'scoreModel/updateState',
        payload: {
          fciDogList: [],
        },
      });
    }
  };
  onOk = type => v => {
    this.setState(
      {
        [type]: v[0],
      },
      () => {
        if (type === 'groupNo') {
          this.setState(
            {
              fciStandardNo: null,
            },
            () => {
              this.getScoreList();
            },
          );
          this.props.dispatch({
            type: 'scoreModel/getFciDogByGroupId',
            payload: {
              scoreType:
                this.state.selectedScoreType.type === 'adult'
                  ? 3
                  : this.state.selectedScoreType.type === 'mainland'
                  ? 20
                  : this.state.selectedScoreType.type === 'ohc'
                  ? 'ohc'
                  : this.state.selectedScoreType.type === 'bbe'
                  ? 'bbe'
                  : null,
              year: this.state.date,
              groupId: v[0],
            },
          });
        } else {
          this.getScoreList();
        }
      },
    );
  };
  getDetail = pedigreeCertified => {
    this.props.dispatch({
      type: 'scoreModel/detail',
      payload: {
        scoreType:
          this.state.selectedScoreType.type === 'adult'
            ? 3
            : this.state.selectedScoreType.type === 'mainland'
            ? 20
            : this.state.selectedScoreType.type === 'ohc'
            ? 'ohc'
            : this.state.selectedScoreType.type === 'bbe'
            ? 'bbe'
            : null,
        year: this.state.date,
        pedigreeCertified,
      },
    });
    this.setState({
      showDetail: true,
    });
  };
  render() {
    const { detail } = this.props.scoreModel;
    const tabs = [
      { title: '成年犬组', type: 'adult' },
      { title: '本土繁殖', type: 'mainland' },
      { title: '犬主人组', type: 'ohc' },
      { title: '繁殖人组', type: 'bbe' },
    ];
    const customTab = (data, index) => {
      return <div>{data.title}</div>;
    };
    const row = (rowData, index) => {
      if (this.state.date >= 2020) {
        return (
          <div
            key={`${rowData.pedigreeCertified}-${index}`}
            className={styles.index_content_table_body_tr}
            onClick={() => {
              this.getDetail(rowData.pedigreeCertified);
            }}
          >
            <div className={styles.first_col}>
              {rowData.ranking === 1 ? (
                <img src={score1} alt="icon" />
              ) : rowData.ranking === 2 ? (
                <img src={score2} alt="icon" />
              ) : rowData.ranking === 3 ? (
                <img src={score3} alt="icon" />
              ) : (
                rowData.ranking
              )}
            </div>
            <div className={styles.second_col}>
              <div className={styles.tr_nowrap}>{rowData.dogName}</div>
            </div>
            <div className={styles.third_col}>
              <div className={styles.tr_nowrap}>{rowData.dogOwner}</div>
            </div>
            <div className={styles.fourth_col}>
              <div className={styles.tr_nowrap}>{rowData.score}</div>
            </div>
          </div>
        );
      } else {
        return (
          <div key={`${rowData.cku}-${index}`} className={styles.index_content_table_body_tr}>
            <div className={styles.first_col}>
              {index === 0 ? (
                <img src={score1} alt="icon" />
              ) : index === 1 ? (
                <img src={score2} alt="icon" />
              ) : index === 2 ? (
                <img src={score3} alt="icon" />
              ) : (
                index
              )}
            </div>
            <div className={styles.second_col}>
              <div className={styles.tr_nowrap}>{rowData.dogname}</div>
            </div>
            <div className={styles.third_col}>
              <div className={styles.tr_nowrap}>{rowData.name}</div>
            </div>
            <div className={styles.fourth_col}>
              <div className={styles.tr_nowrap}>{rowData.jifen}</div>
            </div>
          </div>
        );
      }
    };
    return (
      <div className={styles.body}>
        <div className={styles.index_container}>
          <div className={styles.index_head}>
            <p className={styles.index_head_title}>CKU年度积分榜</p>
            <DatePicker
              onChange={this.changeDate}
              minDate={new Date(2014, 1, 1, 0, 0, 0)}
              maxDate={new Date(new Date().getFullYear(), 1, 1, 0, 0, 0)}
              mode="year"
              onOk={this.showDate}
              onDismiss={this.showDate}
            >
              <Button
                className={styles.index_head_select}
                size="small"
                onClick={() =>
                  this.setState({
                    dateShow: true,
                  })
                }
              >
                年度
                <img className={styles.index_sjIcon} src={sjIcon} alt="icon" />
              </Button>
            </DatePicker>
          </div>
          <div className={styles.index_tabs}>
            <Tabs
              tabs={tabs}
              renderTab={customTab}
              tabBarBackgroundColor="rgba(38,96,255,1)"
              tabBarUnderlineStyle={{ display: 'none' }}
              initialPage={0}
              animated={false}
              onChange={(tab, index) => {
                this.setState({ selectedScoreType: tab, dateShow: true }, () => {
                  this.setState({
                    dateShow: false,
                  });
                  this.clearState(() => {
                    this.getScoreList();
                  });
                });
              }}
            ></Tabs>
          </div>
          <div className={styles.index_content}>
            <div className={styles.index_content_title}>
              <p>
                CKU{this.state.selectedScoreType.title}{' '}
                {this.state.date || formatDateYear(new Date()) - 1}年度积分榜
              </p>
            </div>
            {this.props.scoreModel.scoreTitle && (
              <div className={styles.index_content_subtitle}>
                <p>{this.props.scoreModel.scoreTitle}</p>
              </div>
            )}
            {this.state.date >= 2020 ? (
              <div className={styles.i_gr}>
                <Picker
                  data={this.props.scoreModel.groupList}
                  value={[this.state.groupNo]}
                  cols={1}
                  title="选择犬组"
                  extra="犬组筛选"
                  onOk={this.onOk('groupNo')}
                  dismissText="清除"
                  onDismiss={this.onDismiss('groupNo')}
                >
                  <CustomChildren>犬组筛选</CustomChildren>
                </Picker>
                {this.state.groupNo ? (
                  <Picker
                    data={this.props.scoreModel.fciDogList}
                    value={[this.state.fciStandardNo]}
                    cols={1}
                    title="选择犬种"
                    extra="犬种筛选"
                    onOk={this.onOk('fciStandardNo')}
                    dismissText="清除"
                    onDismiss={this.onDismiss('fciStandardNo')}
                  >
                    <CustomChildren>犬种筛选</CustomChildren>
                  </Picker>
                ) : (
                  <div
                    className={styles.i_gr_i}
                    onClick={() => {
                      Toast.fail('请先选择犬组');
                    }}
                  >
                    <span>犬种筛选</span>
                  </div>
                )}
              </div>
            ) : null}
            <div className={styles.index_content_table}>
              <div className={styles.index_content_table_head}>
                <div className={styles.first_col}>名次</div>
                <div className={styles.second_col}>犬名</div>
                <div className={styles.third_col}>
                  {this.state.selectedScoreType.type === 'bbe' ? '繁殖人' : '犬主'}
                </div>
                <div className={styles.fourth_col}>积分</div>
              </div>
              <div className={styles.index_content_table_body}>
                {this.props.scoreModel.scoreList.map((item, index) => row(item, index))}
                <div style={{ padding: 10, textAlign: 'center' }}>到达底部</div>
              </div>
            </div>
          </div>
        </div>
        {this.state.showDetail ? (
          <div className={styles.p_m}>
            <div className={styles.p_p}>
              <div
                className={styles.p_p_cl}
                onClick={() => {
                  this.setState({
                    showDetail: false,
                  });
                  this.props.dispatch({
                    type: 'scoreModel/updateState',
                    payload: {
                      detail: {},
                    },
                  });
                }}
              ></div>
              {detail.pedigreeCertified ? (
                <div className={styles.p_p_c}>
                  <div className={styles.p_p_c_t}>{detail.dogName || '--'}</div>
                  <div className={styles.p_p_c_d}>
                    {detail.gender === '1' ? '公' : '母'}&ensp;/&ensp;{detail.birthdate || '--'}
                    &ensp;/&ensp;
                    {detail.dogBreedNameCn || '--'}
                  </div>
                  <div className={styles.p_p_c_box}>
                    <div className={styles.p_p_c_box_l}>
                      <div className={styles.p_p_c_box_l_i}>
                        <span>呼&emsp;&emsp;&emsp;名：</span>
                        {detail.nickname || '--'}
                      </div>
                      <div className={styles.p_p_c_box_l_i}>
                        <span>犬&emsp;主&emsp;人：</span>
                        {detail.dogOwner || '--'}
                      </div>
                      <div className={styles.p_p_c_box_l_i}>
                        <span>繁&emsp;殖&emsp;人：</span>
                        {detail.breeder || '--'}
                      </div>
                      <div className={styles.p_p_c_box_l_i}>
                        <span>血统证书号：</span>
                        {detail.pedigreeCertified || '--'}
                      </div>
                    </div>
                    <img src={detail.picture || icon04} alt="图像" />
                  </div>
                  <div className={styles.p_p_c_b}>
                    <div className={styles.p_p_c_b_i}>
                      <p>
                        <span className={styles.icon05}>{detail.score || '--'}</span>
                      </p>
                      总积分
                    </div>
                    <div className={styles.p_p_c_b_i}>
                      <p>
                        <span>{detail.ranking ? `No.${detail.ranking}` : '--'}</span>
                      </p>
                      全犬种排名
                    </div>
                    <div className={styles.p_p_c_b_i}>
                      <p>
                        <span>{detail.gorupRanking ? `No.${detail.gorupRanking}` : '--'}</span>
                      </p>
                      犬组排名
                    </div>
                    <div className={styles.p_p_c_b_i}>
                      <p>
                        <span>
                          {detail.dogBreedRanking ? `No.${detail.dogBreedRanking}` : '--'}
                        </span>
                      </p>
                      犬种排名
                    </div>
                  </div>
                </div>
              ) : null}
            </div>
          </div>
        ) : null}
      </div>
    );
  }
}

export default Index;