import React, { Component } from 'react';
import { connect } from 'react-redux';
import { Picker, DatePicker, Progress, Toast } from 'antd-mobile';
import router from 'umi/router';
import { formatDatetime } from '../../../utils/helper';
import 'antd-mobile/dist/antd-mobile.less';
import styles from './index.less';

const CustomChildren = props => {
  return (
    <div onClick={props.onClick} className={`${styles.select} ${styles.placeholder}`}>
      {props.extra}
    </div>
  );
};

@connect(({ info }) => ({ info }))
class Index extends Component {
  constructor(props) {
    super(props);
    this.state = {
      progressFlag: false,
      percent: 0,
    };
  }
  componentDidMount = () => {
    document.title = '犬只鉴定信息';
    // this.props.dispatch({
    //   type: 'info/dogtype',
    //   payload: {},
    // });
  };
  uploadImgs = e => {
    const name = e.target.name;
    this.props.dispatch({
      type: 'info/updateState',
      payload: {
        [name + 'Value']: e.target.value,
      },
    });
    this.setState({
      progressFlag: true,
    });
    this.props.dispatch({
      type: 'info/uploadImgs',
      payload: {
        name: name,
        files: e.target.files,
      },
      progress: progressEvent => {
        if (progressEvent.lengthComputable) {
          this.setState({
            percent: (progressEvent.loaded / progressEvent.total) * 100,
          });
        } else {
          this.setState({
            percent: 0.5,
          });
        }
      },
      callback: () => {
        this.setState({
          percent: 0,
          progressFlag: false,
        });
      },
    });
  };
  delete = name => {
    this.props.dispatch({
      type: 'info/updateState',
      payload: {
        [name]: null,
        [name + 'Url']: null,
        [name + 'Value']: '',
      },
    });
  };
  uploadVod = e => {
    const name = e.target.name;
    this.props.dispatch({
      type: 'info/updateState',
      payload: {
        [name + 'Value']: e.target.value,
      },
    });
    this.setState({
      progressFlag: true,
    });
    this.props.dispatch({
      type: 'info/uploadVod',
      payload: {
        name: name,
        files: e.target.files,
      },
      progress: progressEvent => {
        if (progressEvent.lengthComputable) {
          this.setState({
            percent: (progressEvent.loaded / progressEvent.total) * 100,
          });
        } else {
          this.setState({
            percent: 0.5,
          });
        }
      },
      callback: flag => {
        if ('toBig' === flag) {
          Toast.fail('视频大于200M');
        }
        this.setState({
          percent: 0,
          progressFlag: false,
        });
      },
    });
  };
  save = () => {
    this.props.dispatch({
      type: 'info/save',
      payload: {},
    });
  };
  onChangeText = type => e => {
    this.props.dispatch({
      type: 'info/updateState',
      payload: {
        [type]: e.target.value,
      },
    });
  };
  onChangePicker = type => v => {
    let value = null;
    if (v instanceof Date) {
      value = formatDatetime(v, 'YYYY-MM-DD');
    } else {
      value = v[0];
    }
    this.props.dispatch({
      type: 'info/updateState',
      payload: {
        [type]: value,
      },
    });
  };
  render() {
    const {
      referee,
      dogOwnerName,
      gender,
      mobile,
      cardNo,
      memberCode,
      province,
      city,
      area,
      address,
      dogBreed,
      // dogTypeList,
      dogColor,
      dogGender,
      dogName,
      dogBirthdate,

      frontPicUrl,
      frontPicValue,

      leftSidePicUrl,
      leftSidePicValue,

      rightSidePicUrl,
      rightSidePicValue,

      backPicUrl,
      backPicValue,

      runVideo,
      runVideoValue,

      noseVideo,
      noseVideoValue,
    } = this.props.info;
    const { progressFlag, percent } = this.state;
    return (
      <div className={styles.body}>
        {progressFlag ? (
          <div className={styles.progress}>
            <Progress position="normal" percent={percent} style={{ width: '80%' }}></Progress>
          </div>
        ) : null}
        <div className={styles.box}>
          <div className={`${styles.tr} ${styles.required}`}>
            推荐人
            <input
              type="text"
              onChange={this.onChangeText('referee')}
              value={referee || ''}
              placeholder="请输入人名或俱乐部名称"
            ></input>
          </div>
        </div>
        <div className={styles.title}>犬主信息</div>
        <div className={styles.box}>
          <div>
            <div className={`${styles.tr} ${styles.required}`}>
              姓名
              <input
                type="text"
                onChange={this.onChangeText('dogOwnerName')}
                value={dogOwnerName || ''}
                placeholder="请输入姓名"
              ></input>
            </div>
            <div className={`${styles.tr} ${styles.required}`}>
              性别
              <Picker
                title="选择性别"
                extra="请选择"
                cols={1}
                data={[{ value: 1, label: '男' }, { value: 0, label: '女' }]}
                value={[gender]}
                onChange={this.onChangePicker('gender')}
              >
                <CustomChildren></CustomChildren>
              </Picker>
            </div>
            <div className={`${styles.tr} ${styles.required}`}>
              手机号码
              <input
                type="number"
                onChange={this.onChangeText('mobile')}
                value={mobile || ''}
                placeholder="请输入手机号码"
                maxLength="11"
              ></input>
            </div>
            <div className={`${styles.tr} ${styles.required}`}>
              身份证号
              <input
                type="text"
                onChange={this.onChangeText('cardNo')}
                value={cardNo || ''}
                placeholder="请输入身份证号"
                maxLength="18"
              ></input>
            </div>
            <div className={styles.tr}>
              CKU会员号
              <input
                type="text"
                onChange={this.onChangeText('memberCode')}
                value={memberCode || ''}
                placeholder="如果是CKU会员请填写"
              ></input>
            </div>
            <div className={`${styles.tr} ${styles.required}`}>
              地址
              <div
                onClick={() => {
                  router.push('/dogAppraisals/info/locationPicker');
                }}
                className={`${styles.select} ${styles.placeholder}`}
              >
                {province ? `${province}${city}${area}` : '请在地图选择地址'}
              </div>
            </div>
            <div className={`${styles.tr} ${styles.required}`}>
              详细地址
              <input
                type="text"
                onChange={this.onChangeText('address')}
                value={address || ''}
                placeholder="请输入详细地址"
              ></input>
            </div>
          </div>
          <p className={styles.describe}>
            鉴定通过我们将根据您填写的详细地址直接为您邮寄证书，邮寄方式为顺丰到付，请您注意查收！
          </p>
        </div>
        <div className={styles.title}>犬只信息</div>
        <div className={styles.box}>
          <div>
            <div className={`${styles.tr} ${styles.required}`}>
              申请犬种
              {/* <Picker
                title="选择犬种"
                extra="请选择"
                cols={1}
                data={dogTypeList}
                value={[dogBreed]}
                onChange={this.onChangePicker('dogBreed')}
              >
                <CustomChildren></CustomChildren>
              </Picker> */}
              <input
                type="text"
                onChange={this.onChangeText('dogBreed')}
                value={dogBreed || ''}
                placeholder="请输入犬种"
              ></input>
            </div>
            <div className={`${styles.tr} ${styles.required}`}>
              毛色
              <input
                type="text"
                onChange={this.onChangeText('dogColor')}
                value={dogColor || ''}
                placeholder="请输入毛色"
              ></input>
            </div>
            <div className={`${styles.tr} ${styles.required}`}>
              犬只性别
              <Picker
                title="选择性别"
                extra="请选择"
                cols={1}
                data={[{ value: 1, label: '公' }, { value: 0, label: '母' }]}
                value={[dogGender]}
                onChange={this.onChangePicker('dogGender')}
              >
                <CustomChildren></CustomChildren>
              </Picker>
            </div>
            <div className={`${styles.tr} ${styles.required}`}>
              犬名
              <input
                type="text"
                onChange={this.onChangeText('dogName')}
                value={dogName || ''}
                placeholder="请输入犬名"
              ></input>
            </div>
            <div className={`${styles.tr} ${styles.required}`}>
              出生日期
              <DatePicker
                mode="date"
                format="YYYY-MM-DD"
                title="选择日期"
                value={
                  dogBirthdate
                    ? new Date(formatDatetime(dogBirthdate, 'YYYY/MM/DD HH:mm:ss'))
                    : null
                }
                onChange={this.onChangePicker('dogBirthdate')}
                extra="请选择"
                maxDate={new Date()}
              >
                <CustomChildren></CustomChildren>
              </DatePicker>
            </div>
          </div>
          <p className={`${styles.describe} ${styles.describe_l}`}>
            报名鉴定犬只最小年龄为6月龄（以申请当天时间为准）
          </p>
          <div className={`${styles.tl} ${styles.required}`}>
            犬只静态照片
            <p>
              犬只自然站立，距离拍摄位置约2-3米，拍摄高度约为坐姿
              视角高度，拍摄4张犬只照片，照片大小需小于200M
            </p>
            <div className={styles.box_w}>
              <div className={styles.img}>
                {frontPicUrl ? (
                  <div
                    className={styles.dele}
                    onClick={() => {
                      this.delete('frontPic');
                    }}
                  ></div>
                ) : null}
                <label htmlFor="frontPic">
                  {frontPicUrl ? <img alt="正面" src={frontPicUrl}></img> : null}
                  <input
                    type="file"
                    onChange={this.uploadImgs}
                    id="frontPic"
                    name="frontPic"
                    value={frontPicValue}
                    accept="image/*"
                  />
                </label>
                正面
              </div>
              <div className={styles.img}>
                {leftSidePicUrl ? (
                  <div
                    className={styles.dele}
                    onClick={() => {
                      this.delete('leftSidePic');
                    }}
                  ></div>
                ) : null}
                <label htmlFor="leftSidePic">
                  {leftSidePicUrl ? <img alt="左侧面" src={leftSidePicUrl}></img> : null}
                  <input
                    type="file"
                    onChange={this.uploadImgs}
                    id="leftSidePic"
                    name="leftSidePic"
                    value={leftSidePicValue}
                    accept="image/*"
                  />
                </label>
                左侧面
              </div>
              <div className={styles.img}>
                {rightSidePicUrl ? (
                  <div
                    className={styles.dele}
                    onClick={() => {
                      this.delete('rightSidePic');
                    }}
                  ></div>
                ) : null}
                <label htmlFor="rightSidePic">
                  {rightSidePicUrl ? <img alt="右侧面" src={rightSidePicUrl}></img> : null}
                  <input
                    type="file"
                    onChange={this.uploadImgs}
                    id="rightSidePic"
                    name="rightSidePic"
                    value={rightSidePicValue}
                    accept="image/*"
                  />
                </label>
                右侧面
              </div>
              <div className={styles.img}>
                {backPicUrl ? (
                  <div
                    className={styles.dele}
                    onClick={() => {
                      this.delete('backPic');
                    }}
                  ></div>
                ) : null}
                <label htmlFor="backPic">
                  {backPicUrl ? <img alt="背面" src={backPicUrl}></img> : null}
                  <input
                    type="file"
                    onChange={this.uploadImgs}
                    id="backPic"
                    name="backPic"
                    value={backPicValue}
                    accept="image/*"
                  />
                </label>
                背面
              </div>
            </div>
          </div>
          <div className={`${styles.tl} ${styles.required}`}>
            犬只视频
            <p>视频需小于200M</p>
            <div className={styles.box_w}>
              <div className={styles.video}>
                {runVideo ? (
                  <div
                    className={styles.dele}
                    onClick={() => {
                      this.delete('runVideo');
                    }}
                  ></div>
                ) : null}
                <label htmlFor="runVideo">
                  {runVideo ? (
                    <img alt="奔跑视频" src={require('../assets/info/icon08.png')}></img>
                  ) : null}
                  <input
                    type="file"
                    onChange={this.uploadVod}
                    id="runVideo"
                    name="runVideo"
                    value={runVideoValue}
                    accept="video/*"
                  />
                </label>
                <div>
                  直线往返和环形往返步态视频： 自然走动来回直线往返、绕场环
                  形奔跑一圈，两个步态均需要完成，视频时间不少于20-25秒
                </div>
              </div>
              <div className={styles.video}>
                {noseVideo ? (
                  <div
                    className={styles.dele}
                    onClick={() => {
                      this.delete('noseVideo');
                    }}
                  ></div>
                ) : null}
                <label htmlFor="noseVideo">
                  {noseVideo ? (
                    <img alt="鼻纹视频" src={require('../assets/info/icon09.png')}></img>
                  ) : null}
                  <input
                    type="file"
                    onChange={this.uploadVod}
                    id="noseVideo"
                    name="noseVideo"
                    value={noseVideoValue}
                    accept="video/*"
                  />
                </label>
                <div>
                  鼻纹视频：让犬只鼻头纹理充分展现出来，在光线较暗的地方建
                  议打开闪光灯，拍摄时间不少于 15秒
                </div>
              </div>
            </div>
          </div>
          <p className={`${styles.describe} ${styles.describe_b}`}>视频拍摄注意事项：</p>
          <div className={styles.describe_b_}>
            1.拍摄视频前建议清洁犬只、梳理犬只毛发；
            <br />
            2.注意鼻头清洁，避免沾有任何异物影响鼻纹的成功采集；
            <br />
            3.拍摄时避免手机抖动，保证视频的清晰度；
            <br />
            4.拍摄期间周围尽量不要有任何杂音；
            <br />
            5.拍摄时尽量让犬只保持在主视觉区域内。
            <br />
          </div>
        </div>
        <div className={styles.btn} onClick={this.save}></div>
      </div>
    );
  }
}

export default Index;