import { useState, useEffect } from 'react'
import withLayout from '@/layout'
import { ScrollView, Input } from '@tarojs/components'
import { useSelector } from 'react-redux'
import { fetch } from '@/utils/request'
import { API_FEEDBACK_SUBMIT } from '@/constants/api'
import Taro from '@tarojs/taro'
import '@/assets/css/iconfont.css'
import './index.scss'

export default withLayout(() => {

  const user = useSelector(state => state.user)
  const [PersonId, setPersonId] = useState(null)
  const [FormData, setFormData] = useState({
    phone: '',
    message: ''
  })

  useEffect(() => {
    if (user?.userInfo?.person?.personId) {
      setPersonId(user.userInfo.person.personId)
    }
  }, [user])

  const FormChange = (key, e) => {
    let Data = { ...FormData }
    Data[key] = e.detail.value
    setFormData(Data)
  }

  const Submit = () => {
    fetch({ url: API_FEEDBACK_SUBMIT, method: 'post', payload: FormData }).then(() => {
      Taro.showToast({
        title: '反馈成功', icon: 'none', complete: () => {
          Taro.navigateBack({ delta: 1 })
        }
      })
    })
  }

  return (
    <view className='Page feedBack flex-v'>

      <view className='flex-item'>
        <view>
          <ScrollView scroll-y refresher-enabled={false}>
            <view className='PageContent'>
              <text className='Title'>问题描述</text>
              <view>
                <Input placeholder='请填写10个字以上的问题描述以便我们提供更好的帮助' value={FormData.message} onInput={FormChange.bind(this, 'message')}></Input>
              </view>
              <text className='Title'>联系方式（选填）</text>
              <view>
                <Input placeholder='输入邮箱/手机号方便联系' value={FormData.phone} onInput={FormChange.bind(this, 'phone')}></Input>
              </view>
            </view>
          </ScrollView>
        </view>
      </view>

      <view className='Bottom'>
        <text onClick={Submit}>提交</text>
      </view>

    </view>
  )
})
