import Taro, { Component } from '@tarojs/taro'
import { isChineseMobilePhoneNumber, isEmail } from '@utils/tools'
import './index.scss'

import { submitFeedBack } from '@services/feedBack'
export default class FeedBack extends Component {
  state = {
    phone: '',
    message: '',
    files: [],
    loading: false,
  }
  config = {
    navigationBarTitleText: '意见反馈',
  }
  validate(value) {
    const { message, phone } = value
    if (!message) {
      Taro.showToast({
        title: '问题描述不能为空',
        icon: 'none'
      })
      return false
    }

    if (phone && (!isChineseMobilePhoneNumber(phone) && !isEmail(phone))) {
      Taro.showToast({
        title: '联系方式输入格式错误',
        icon: 'none'
      })
      return false
    }
    return true
  }

  handleSubmit = (e) => {
    const { formId } = e.detail
    const { message, phone, files } = this.state
    const payload = {
      formId,
      message,
      phone,
      files: files.map(file => file.url)
    }
    if (this.validate(payload)) {
      submitFeedBack(payload).then(res => {
        Taro.showToast({
          title: '意见提交成功',
          icon: 'success',
          duration: 2000
        })

        setTimeout(() => {
          Taro.navigateBack({ delta: 1 })
        }, 1000)
      })
    }
  }
  onImagePickerChange(files) {
    this.setState({
      files
    })
  }
  onTextareaChange(e) {
    this.setState({
      message: e.target.value
    })
  }
  onContactChange(e) {
    this.setState({
      phone: e.target.value
    })
  }
  render() {
    return (
      <Form className='form' report-submit={true} onSubmit={this.handleSubmit.bind(this)}>
        <View className='form__wrap'>
          <View className="item tel">
            <View className="item__label">问题描述</View>
            <View>
              <Textarea
                className="item__textarea"
                value={message}
                height="200"
                onInput={this.onTextareaChange}
                maxLength={200}
                placeholder='请填写10个字以上的问题描述以便我们提供更好的帮助'
              />
            </View>
          </View>

          {/* <View className="item tel">
            <View className="item__label">相关截图（选填）</View>
            <View>
              <AtImagePicker
                files={files}
                onChange={this.onImagePickerChange.bind(this)}
              />
            </View>
          </View> */}

          <View className="item tel">
            <View className="item__label">联系方式（选填）</View>
            <View>
              <Input
                name="contact"
                className="item__input"
                value={phone}
                type="text"
                onInput={this.onContactChange.bind(this)}
                placeholder="输入邮箱/手机号方便联系"
                placeholderClass='item__input-placeholder'
              />
            </View>
          </View>
        </View>
        <View className='form__btn'>
          <Button type="primary" className="submit__btn" form-type="submit">提交</Button>
        </View>
      </Form>
    )
  }
}

