import { Component, ReactNode } from 'react';
import { AtForm, AtInput, AtButton, AtMessage } from 'taro-ui';
import Taro from '@tarojs/taro';
import pt from '@/plain-text';
import './inform.scss';

export default class InformPage extends Component {
  state = {
    phone: '',
    name: '',
    isLoading: false,
    isDisable: false,
  };
  handleChangePhone(phone: string) {
    this.setState({
      phone: phone,
    });
    return phone;
  }
  handleChangeName(name: string) {
    this.setState({
      name: name,
    });
    return name;
  }
  onSubmit() {
    this.setState({
      isLoading: true,
      isDisable: true,
    });
    console.log(this.state.name, this.state.phone);
    this.setState({
      isLoading: false,
    });
    Taro.atMessage({
      message: pt.get().informPage.submitText.success,
      type: 'success',
    });
    setTimeout(() => {
      this.setState({
        isDisable: false,
      });
    }, 5000);
  }
  onReset() {
    this.setState({
      phone: '',
      name: '',
    });
  }

  render(): ReactNode {
    return (
      <AtForm
        onSubmit={this.onSubmit.bind(this)}
        onReset={this.onReset.bind(this)}
      >
        <AtMessage />
        <AtInput
          name='phone'
          title={pt.get().informPage.phoneText.title}
          type='text'
          placeholder={pt.get().informPage.phoneText.placeholder}
          value={this.state.phone}
          onChange={this.handleChangePhone.bind(this)}
        />
        <AtInput
          required
          name='name'
          title={pt.get().informPage.nameText.title}
          type='text'
          placeholder={pt.get().informPage.nameText.placeholder}
          value={this.state.name}
          onChange={this.handleChangeName.bind(this)}
        />
        <AtButton
          loading={this.state.isLoading}
          formType='submit'
          type='primary'
          disabled={this.state.isDisable}
        >
          {pt.get().informPage.buttonText.submit}
        </AtButton>
        <AtButton formType='reset' type='secondary'>
          {pt.get().informPage.buttonText.reset}
        </AtButton>
      </AtForm>
    );
  }
}