import React from 'react';
import './index.less';
import Page from '@src/containers/Page';
import { asyncSMessage } from '@src/services/AsyncTools';
import { MobileArea } from '../../../../Constant';
import Input, { SelectInput, VerificationInput } from '../../../components/Input';
import Button from '../../../components/Button';
import { User } from '../../../stores/user';
import { Common } from '../../../stores/common';

export default class extends Page {
  initState() {
    return {
      data: { mobile: '', area: MobileArea[0].value, email: '' },
    };
  }

  init() {
    this.validNumber = 0;
  }

  changeData(field, value) {
    let { data } = this.state;
    data = data || {};
    data[field] = value;
    this.setState({ data });
  }

  validMobile(login) {
    const { data } = this.state;
    const { area, mobile } = data;
    if (!area || !mobile) return;
    this.validNumber += 1;
    const number = this.validNumber;
    User.validWechat(area, mobile)
      .then(result => {
        if (result) {
          this.setState({ mobileError: '' });
          return User.validMobile(area, mobile).then(r => {
            if (number !== this.validNumber) return;
            this.setState({ needEmail: r });
          });
        }
        this.setState({ needEmail: false });
        return login ? Promise.resolve() : Promise.reject(new Error('该手机已绑定其他账号，请更换手机号码'));
      })
      .catch(err => {
        this.setState({ mobileError: err.message });
      });
  }

  sendValid() {
    const { data, mobileError } = this.state;
    const { area, mobile } = data;
    if (!area || !mobile || mobileError) return Promise.reject();
    return Common.sendSms(area, mobile)
      .then(result => {
        if (result) {
          asyncSMessage('发送成功');
          this.setState({ mobileError: '', validError: '' });
        } else {
          throw new Error('发送失败');
        }
      })
      .catch(err => {
        this.setState({ mobileError: err.message });
        throw err;
      });
  }

  submit() {
    const { data, needEmail, mobileError, validError } = this.state;
    const { area, mobile, mobileVerifyCode, email } = data;
    if (mobileError || validError) return;
    if (!area || !mobile || !mobileVerifyCode) return;
    if (needEmail && !email) return;
    User.bind(area, mobile, mobileVerifyCode, email)
      .then(() => {
        const { url } = this.props.core.query;
        if (url) {
          toLink(url);
        } else {
          linkTo('/product');
        }
      })
      .catch(err => {
        console.log(err.message);
        if (err.message.indexOf('验证码') >= 0) {
          this.setState({ validError: err.message });
        } else {
          this.setState({ mobileError: err.message });
        }
      });
  }

  renderView() {
    const { needEmail } = this.state;
    return (
      <div>
        <SelectInput
          placeholder="请输入手机号"
          selectValue={this.state.data.area}
          select={MobileArea}
          value={this.state.data.mobile}
          error={this.state.mobileError}
          onSelect={value => {
            this.changeData('area', value);
            this.validMobile();
          }}
          onChange={e => {
            this.changeData('mobile', e.target.value);
            this.validMobile();
          }}
        />
        <VerificationInput
          placeholder="请输入验证码"
          value={this.state.data.mobileVerifyCode}
          error={this.state.validError}
          onSend={() => {
            return this.sendValid();
          }}
          onChange={e => {
            this.changeData('mobileVerifyCode', e.target.value);
          }}
        />
        {needEmail && (
          <Input
            placeholder="请输入邮箱"
            value={this.state.data.email}
            onChange={e => {
              this.changeData('email', e.target.value);
            }}
          />
        )}
        <Button
          margin={25}
          radius
          block
          disabled={this.state.validError || this.state.mobileError}
          onClick={() => {
            this.submit();
          }}
        >
          绑定
        </Button>
      </div>
    );
  }
}