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 = '猫只鉴定信息';
  };
  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,
      mobile,
      wxcard,
      province,
      city,
      area,
      address,
      dogBreed,
      dogColor,
      dogGender,
      dogName,
      dogBirthdate,

      image1Url,
      image1Value,

      image2Url,
      image2Value,

      image3Url,
      image3Value,

      image4Url,
      image4Value,

      image5Url,
      image5Value,

      image6Url,
      image6Value,

      image7Url,
      image7Value,

      image8Url,
      image8Value,

      image9Url,
      image9Value,

      image10Url,
      image10Value,

      image11Url,
      image11Value,

      image12Url,
      image12Value,
    } = 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}`}>
              手机号码
              <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('wxcard')}
                value={wxcard || ''}
                placeholder="请输入微信号"
              ></input>
            </div>
            <div className={`${styles.tr} ${styles.required}`}>
              地址
              <div
                onClick={() => {
                  router.push('/catAppraisals/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}`}>
              申请猫种
              <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}`}>
            报名鉴定猫只最小年龄为3月龄（以申请当天时间为准）
          </p>
          <div className={`${styles.tl} ${styles.required}`}>
            猫只静态照片
            <div className={styles.box_w}>
              <div className={styles.img}>
                {image1Url ? (
                  <div
                    className={styles.dele}
                    onClick={() => {
                      this.delete('image1');
                    }}
                  ></div>
                ) : null}
                <label htmlFor="image1">
                  {image1Url ? <img alt="头部-正面" src={image1Url}></img> : null}
                  <input
                    type="file"
                    onChange={this.uploadImgs}
                    id="image1"
                    name="image1"
                    value={image1Value || ''}
                    accept="image/*"
                  />
                </label>
                头部-正面
              </div>

              <div className={styles.img}>
                {image2Url ? (
                  <div
                    className={styles.dele}
                    onClick={() => {
                      this.delete('image2');
                    }}
                  ></div>
                ) : null}
                <label htmlFor="image2">
                  {image2Url ? <img alt="头部-侧面" src={image2Url}></img> : null}
                  <input
                    type="file"
                    onChange={this.uploadImgs}
                    id="image2"
                    name="image2"
                    value={image2Value || ''}
                    accept="image/*"
                  />
                </label>
                头部-侧面
              </div>

              <div className={styles.img}>
                {image3Url ? (
                  <div
                    className={styles.dele}
                    onClick={() => {
                      this.delete('image3');
                    }}
                  ></div>
                ) : null}
                <label htmlFor="image3">
                  {image3Url ? <img alt="头部-额顶" src={image3Url}></img> : null}
                  <input
                    type="file"
                    onChange={this.uploadImgs}
                    id="image3"
                    name="image3"
                    value={image3Value || ''}
                    accept="image/*"
                  />
                </label>
                头部-额顶
              </div>

              <div className={styles.img}>
                {image4Url ? (
                  <div
                    className={styles.dele}
                    onClick={() => {
                      this.delete('image4');
                    }}
                  ></div>
                ) : null}
                <label htmlFor="image4">
                  {image4Url ? <img alt="头部-牙齿" src={image4Url}></img> : null}
                  <input
                    type="file"
                    onChange={this.uploadImgs}
                    id="image4"
                    name="image4"
                    value={image4Value || ''}
                    accept="image/*"
                  />
                </label>
                头部-牙齿
              </div>

              <div className={styles.img}>
                {image5Url ? (
                  <div
                    className={styles.dele}
                    onClick={() => {
                      this.delete('image5');
                    }}
                  ></div>
                ) : null}
                <label htmlFor="image5">
                  {image5Url ? <img alt="身体-正面" src={image5Url}></img> : null}
                  <input
                    type="file"
                    onChange={this.uploadImgs}
                    id="image5"
                    name="image5"
                    value={image5Value || ''}
                    accept="image/*"
                  />
                </label>
                身体-正面
              </div>

              <div className={styles.img}>
                {image6Url ? (
                  <div
                    className={styles.dele}
                    onClick={() => {
                      this.delete('image6');
                    }}
                  ></div>
                ) : null}
                <label htmlFor="image6">
                  {image6Url ? <img alt="身体-侧面" src={image6Url}></img> : null}
                  <input
                    type="file"
                    onChange={this.uploadImgs}
                    id="image6"
                    name="image6"
                    value={image6Value || ''}
                    accept="image/*"
                  />
                </label>
                身体-侧面
              </div>

              <div className={styles.img}>
                {image7Url ? (
                  <div
                    className={styles.dele}
                    onClick={() => {
                      this.delete('image7');
                    }}
                  ></div>
                ) : null}
                <label htmlFor="image7">
                  {image7Url ? <img alt="身体-前爪垫" src={image7Url}></img> : null}
                  <input
                    type="file"
                    onChange={this.uploadImgs}
                    id="image7"
                    name="image7"
                    value={image7Value || ''}
                    accept="image/*"
                  />
                </label>
                身体-前爪垫
              </div>

              <div className={styles.img}>
                {image8Url ? (
                  <div
                    className={styles.dele}
                    onClick={() => {
                      this.delete('image8');
                    }}
                  ></div>
                ) : null}
                <label htmlFor="image8">
                  {image8Url ? <img alt="身体-后爪垫" src={image8Url}></img> : null}
                  <input
                    type="file"
                    onChange={this.uploadImgs}
                    id="image8"
                    name="image8"
                    value={image8Value || ''}
                    accept="image/*"
                  />
                </label>
                身体-后爪垫
              </div>

              <div className={styles.img}>
                {image9Url ? (
                  <div
                    className={styles.dele}
                    onClick={() => {
                      this.delete('image9');
                    }}
                  ></div>
                ) : null}
                <label htmlFor="image9">
                  {image9Url ? <img alt="身体-尾巴" src={image9Url}></img> : null}
                  <input
                    type="file"
                    onChange={this.uploadImgs}
                    id="image9"
                    name="image9"
                    value={image9Value || ''}
                    accept="image/*"
                  />
                </label>
                身体-尾巴
              </div>

              <div className={styles.img}>
                {image10Url ? (
                  <div
                    className={styles.dele}
                    onClick={() => {
                      this.delete('image10');
                    }}
                  ></div>
                ) : null}
                <label htmlFor="image10">
                  {image10Url ? <img alt="身体-腹部" src={image10Url}></img> : null}
                  <input
                    type="file"
                    onChange={this.uploadImgs}
                    id="image10"
                    name="image10"
                    value={image10Value || ''}
                    accept="image/*"
                  />
                </label>
                身体-腹部
              </div>

              <div className={styles.img}>
                {image11Url ? (
                  <div
                    className={styles.dele}
                    onClick={() => {
                      this.delete('image11');
                    }}
                  ></div>
                ) : null}
                <label htmlFor="image11">
                  {image11Url ? <img alt="毛发-背部" src={image11Url}></img> : null}
                  <input
                    type="file"
                    onChange={this.uploadImgs}
                    id="image11"
                    name="image11"
                    value={image11Value || ''}
                    accept="image/*"
                  />
                </label>
                毛发-背部
              </div>

              <div className={styles.img}>
                {image12Url ? (
                  <div
                    className={styles.dele}
                    onClick={() => {
                      this.delete('image12');
                    }}
                  ></div>
                ) : null}
                <label htmlFor="image12">
                  {image12Url ? <img alt="毛发-毛质" src={image12Url}></img> : null}
                  <input
                    type="file"
                    onChange={this.uploadImgs}
                    id="image12"
                    name="image12"
                    value={image12Value || ''}
                    accept="image/*"
                  />
                </label>
                毛发-毛质
              </div>
            </div>
          </div>
        </div>
        <div className={styles.btn} onClick={this.save}></div>
      </div>
    );
  }
}

export default Index;