import React, { Component } from 'react';
import { http } from 'src/utils';
import { Formik, Form, Field } from 'formik';
import { Toast } from "antd-mobile";
import './index.scss';

class AddressPopup extends Component {
  constructor(props) {
    super(props)
    this.state = {
      isLoading: false,
      addressInfo: {
        name: '',
        phone: '',
        address: '',
      },
    }
  }

  componentDidMount() {
    this.fetchUserAddress();
  }

  // 获取收货信息
  fetchUserAddress = () => {
    const {addressInfo} = this.state;
    http.get(`${API.home}/sys/user_address_info`).then(res => {
      const {code, data, msg} = res.data;
      if (code === 200) {
        this.setState({
          addressInfo: Object.assign({}, addressInfo, {
            name: data.name,
            phone: data.phone,
            address: data.address,
          }),
          isLoading: true,
        });
      }
    });
  }

  handleToSubmit = (params = {}) => {
    const {successBindAddress} = this.props;
    http.post(`${API.home}/sys/update_address`, {
      act_type: 'treasure',
      ...params,
    }).then(res => {
      const {code, msg} = res.data;
      if (code === 200) {
        successBindAddress();
      } else {
        Toast.info(msg, 2, null, false);
      }
    });
  }

  render() {
    const {isLoading, addressInfo} = this.state;
    const {tip, prize, skip = 'default'} = this.props;
    return (
      <>
        {
          isLoading &&
          <Formik
            initialValues={{
              ...addressInfo,
            }}
            validate={({name, phone, address}) => {
              const errors = {};

              if (!name) {
                errors.name = '请输入收件人';
              }
              if (!/^1[3-9]\d{9}$/.test(phone)) {
                errors.phone = '请填写正确格式的手机号';
              }
              if (!address) {
                errors.address = '请输入收货地址';
              }

              return errors;
            }}
            validateOnBlur={false}
            validateOnChange={false}
            onSubmit={(values) => {
              this.handleToSubmit(values);
            }}
          >
            {
              ({errors}) => (
                <Form className="address-form" data-skip={skip}>
                  <h2 className="address-form__title">收货信息</h2>
                  {
                    prize ? (
                      <p className='address__prize'>
                        您抽中了
                        <span style={{'color': '#FF4000'}}>{prize}</span>
                      </p>
                    ) : (null)
                  }
                  {
                    tip ? (<div className="address-form__subtitle">{tip}</div>) : (
                      <p className="address-form__desc">请及时填写收货信息，获得实物奖品后将第一时间为您邮寄</p>)
                  }
                  <Field
                    name="name"
                    render={({field}) => (
                      <div className="address-form__item">
                        <input
                          {...field}
                          className="address-form__ipt"
                          type="text"
                          placeholder="收件人"
                        />
                        {
                          errors.name &&
                          <p className="address-form__tip">{errors.name}</p>
                        }
                      </div>
                    )}
                  />
                  <Field
                    name="phone"
                    render={({field}) => (
                      <div className="address-form__item">
                        <input
                          {...field}
                          className="address-form__ipt"
                          type="text"
                          placeholder="联系方式"
                        />
                        {
                          errors.phone &&
                          <p className="address-form__tip">{errors.phone}</p>
                        }
                      </div>
                    )}
                  />
                  <Field
                    name="address"
                    render={({field}) => (
                      <div className="address-form__item">
                        <input
                          {...field}
                          className="address-form__ipt"
                          type="text"
                          placeholder="收货地址"
                        />
                        {
                          errors.address &&
                          <p className="address-form__tip">{errors.address}</p>
                        }
                      </div>
                    )}
                  />
                  <button
                    className="address-form__submit"
                    data-status="do"
                    type="submit"
                  >提交
                  </button>
                </Form>
              )
            }
          </Formik>
        }
      </>
    );
  }
}

export default AddressPopup;