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

import icon02 from '../assets/icon02.png';

@connect(({ beautician }) => ({ beautician }))
class index extends Component {
  state = {
  };
  componentWillMount = () => {
    const { id } = this.props.location.query;
    this.props.dispatch({
      type: 'beautician/groomerCertificatesById',
      payload: {
        id
      },
    });
  };
  componentDidMount = () => {};
  componentWillUnmount = () => {};
  onError = () => {
    const { data } = this.props.beautician;
    this.props.dispatch({
      type: 'beautician/updateState',
      payload: {
        data: {
          ...data,
          avatar: icon02,
        },
      },
    });
  };
  render() {
    const { data } = this.props.beautician;
    return (
      <DocumentTitle title={data.levelCn}>
        <div className={styles.content}>
        <div className={`${styles.box} ${(data.levelCn == 'A级' || data.levelCn == 'B级' || data.levelCn == 'C级' || (data.levelCn == '教师级' && data.certificateType == '1')) && styles.mrzgz}`}>
            <div className={styles.img}>
              <img src={data.avatar || icon02} alt="头像" onError={this.onError} />
            </div>
            {/* <img src={data.avatar || icon02} alt="头像" onError={this.onError} /> */}
            <div className={styles.name}>{data.name}</div>
            {/* <div className={styles.gender}>{data.gender == 'male' ? '先生于' : '女士于'}</div> */}
            <div className={styles.enName}>{data.namePinyin}</div>
            {/* <div className={styles.topTime}>{data.takeCertificateDate}</div> */}
            {data.levelCn &&
              <div className={styles.levelCn}>{data.levelCn.split('级')}</div>
            }
            <div className={styles.levelEn}>{data.levelEn}</div>
            {data.reviewer && data.reviewer.length > 15?
              <div className={`${styles.judge} ${styles.middle}`}>{data.reviewer}</div>
              :
              <div className={styles.judge}>{data.reviewer}</div>
            }
            <div className={styles.code}>{data.certificateCode}</div>
            <div className={styles.time}>{data.issueDate}</div>
          </div>
          <div className={`${styles.box} ${data.levelCn == '国际宠物美容师' && styles.mrs }`}>
             <div className={styles.img}>
              <img src={data.avatar || icon02} alt="头像" onError={this.onError} />
            </div>
            {/* <div className={styles.gender}>{data.gender == 'male' ? '先生' : '女士'}</div> */}
            <div className={styles.name}>{data.name}</div>
            <div className={styles.enName}>{data.namePinyin}</div>
            {data.reviewer && data.reviewer.length > 15?
              <div className={`${styles.judge} ${styles.middle}`}>{data.reviewer}</div>
              :
              <div className={styles.judge}>{data.reviewer}</div>
            }
            <div className={styles.code}>{data.certificateCode}</div>
            <div className={styles.time}>{data.issueDate}</div>
          </div>
          <div className={`${styles.box} ${data.levelCn == '国际高级宠物美容师' && styles.gjmrs }`}>
             <div className={styles.img}>
              <img src={data.avatar || icon02} alt="头像" onError={this.onError} />
            </div>
            {/* <div className={styles.gender}>{data.gender == 'male' ? '先生' : '女士'}</div> */}
            <div className={styles.name}>{data.name}</div>
            <div className={styles.enName}>{data.namePinyin}</div>
            {data.reviewer && data.reviewer.length > 15?
              <div className={`${styles.judge} ${styles.middle}`}>{data.reviewer}</div>
              :
              <div className={styles.judge}>{data.reviewer}</div>
            }
            <div className={styles.code}>{data.certificateCode}</div>
            <div className={styles.time}>{data.issueDate}</div>
          </div>
          <div className={`${styles.box} ${data.levelCn == '宠物造型师' && styles.cwzxs }`}>
             <div className={styles.img}>
              <img src={data.avatar || icon02} alt="头像" onError={this.onError} />
            </div>
            <div className={styles.name}>{data.name}</div>
            {/* <div className={styles.gender}>{data.gender == 'male' ? '先生' : '女士'}</div> */}
            {/* <div className={styles.genderEn}>{data.gender == 'male' ? 'Mr.' : 'Ms.'}</div> */}
            <div className={styles.enName}>{data.namePinyin}</div>
            <div className={styles.issueDate}>{data.takeCertificateDate}</div>
            {data.reviewer && data.reviewer.length > 15?
              <div className={`${styles.judge} ${styles.middle}`}>{data.reviewer}</div>
              :
              <div className={styles.judge}>{data.reviewer}</div>
            }
            <div className={styles.code}>{data.certificateCode}</div>
            <div className={styles.time}>{data.issueDate}</div>
          </div>
          <div className={`${styles.box} ${data.levelCn == '金牌宠物造型师' && styles.jpzxs }`}>
             <div className={styles.img}>
              <img src={data.avatar || icon02} alt="头像" onError={this.onError} />
            </div>
            <div className={styles.name}>{data.name}</div>
            {/* <div className={styles.gender}>{data.gender == 'male' ? '先生' : '女士'}</div> */}
            <div className={styles.enName}>{data.namePinyin}</div>
            {/* <div className={styles.genderEn}>{data.gender == 'male' ? 'Mr.' : 'Ms.'}</div> */}
            <div className={styles.issueDate}>{data.takeCertificateDate}</div>
            {data.reviewer && data.reviewer.length > 15?
              <div className={`${styles.judge} ${styles.middle}`}>{data.reviewer}</div>
              :
              <div className={styles.judge}>{data.reviewer}</div>
            }
            <div className={styles.code}>{data.certificateCode}</div>
            <div className={styles.time}>{data.issueDate}</div>
          </div>
          <div className={`${styles.box} ${(data.levelCn == 'CKU国际宠物洗护师（高级）' || data.levelCn == 'CKU国际宠物洗护师（初级）' || data.levelCn == 'CKU国际宠物洗护师（赛级）') && styles.cwxhs}`}>
             <div className={styles.img}>
              <img src={data.avatar || icon02} alt="头像" onError={this.onError} />
            </div>
            <div className={styles.name}>{data.name}</div>
            {/* <div className={styles.gender}>{data.gender == 'male' ? '先生' : '女士'}</div> */}
            {/* <div className={styles.genderEn}>{data.gender == 'male' ? 'Mr.' : 'Ms.'}</div> */}
            <div className={styles.enName}>{data.namePinyin}</div>
            {data.levelCn == 'CKU国际宠物洗护师（高级）' &&
              <div className={styles.level}>高级</div>
            }
            {data.levelCn == 'CKU国际宠物洗护师（初级）' &&
              <div className={styles.level}>初级</div>
            }
            {data.levelCn == 'CKU国际宠物洗护师（赛级）' &&
              <div className={styles.level}>赛级</div>
            }
            <div className={styles.levelEn}>{data.levelEn}</div>
            {data.reviewer && data.reviewer.length > 15?
              <div className={`${styles.judge} ${styles.middle}`}>{data.reviewer}</div>
              :
              <div className={styles.judge}>{data.reviewer}</div>
            }
            <div className={styles.code}>{data.certificateCode}</div>
            <div className={styles.time}>{data.issueDate}</div>
          </div>
          <div className={`${styles.box} ${(data.levelCn == 'PDG-A级' || data.levelCn == 'PDG-B级' || data.levelCn == 'PDG-C级' ) && styles.pdggjmrs}`}>
            <div className={styles.name}>{data.name}</div>
            {data.levelEn &&
              <div className={styles.levelCn}>{data.levelEn}</div>
            }
             <div className={styles.enName}>{data.namePinyin}</div>
            <div className={styles.levelEn}>{data.levelEn}</div>
             {data.reviewer && data.reviewer.length > 15?
              <div className={`${styles.judge} ${styles.middle}`}>{data.reviewer}</div>
              :
              <div className={styles.judge}>{data.reviewer}</div>
            }
            <div className={styles.code}>{data.certificateCode}</div>
            <div className={styles.time}>{data.issueDate}</div>
            <div className={styles.cku_ceo_signature}></div>
            <div className={styles.pdg_ceo_signature}></div>
          </div>
          <div className={`${styles.box} ${(data.levelCn == '宠物级' || data.levelCn == '专业级' || (data.levelCn == '教师级' && data.certificateType == '8')) && styles.blmmrzgz}`}>
            <div className={styles.img}>
                <img src={data.avatar || icon02} alt="头像" onError={this.onError} />
            </div>
            <div className={styles.name}>{data.name}</div>
            <div className={styles.levelCn}>{data.levelCn}</div>
            {data.namePinyin && data.namePinyin.length > 15?
              <div className={`${styles.enName} ${styles.enNameMiddle}`}>{data.namePinyin}</div>
              :
              <div className={styles.enName}>{data.namePinyin}</div>
            }
            <div className={styles.levelEn}>{data.levelEn}</div>

            {data.reviewer && data.reviewer.length > 15?
              <div className={`${styles.judge} ${styles.middle}`}>{data.reviewer}</div>
              :
              <div className={styles.judge}>{data.reviewer}</div>
            }
            <div className={styles.code}>{data.certificateCode}</div>
            <div className={styles.time}>{data.issueDate}</div>
          </div>

        </div>
      </DocumentTitle>
    );
  }
}
export default index;