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

export default class SettingsPage extends Component {
  state = {
    report: '',
    isLoading: false,
    isDisable: false,
  };
  handleChange(report: string) {
    this.setState({
      report,
    });
  }
  onSubmit() {
    this.setState({
      isLoading: true,
      isDisable: true,
    });
    console.log(this.state.report);
    this.setState({
      isLoading: false,
    });
    Taro.atMessage({
      message: '提交成功',
      type: 'success',
    });
    setTimeout(() => {
      this.setState({
        isDisable: false,
      });
    }, 5000);
  }
  onReset() {
    this.setState({
      report: '',
    });
  }
  render(): ReactNode {
    return (
      <AtForm
        onSubmit={this.onSubmit.bind(this)}
        onReset={this.onReset.bind(this)}
      >
        <AtMessage />
        <AtTextarea
          value={this.state.report}
          onChange={this.handleChange.bind(this)}
          maxLength={200}
          placeholder={pt.get().reportPage.placeHolderText}
        />
        <AtButton
          loading={this.state.isLoading}
          formType='submit'
          type='primary'
          disabled={this.state.isDisable}
        >
          {pt.get().reportPage.buttonText.submit}
        </AtButton>
        <AtButton formType='reset' type='secondary'>
          {pt.get().reportPage.buttonText.reset}
        </AtButton>
      </AtForm>
    );
  }
}