import { useState } from "react"
import Taro from "@tarojs/taro"
import { View, Image, Textarea } from "@tarojs/components"
import withLayout from '@/layouts'
import CustomNav from "@/components/CustomNav"
import MyButton from "@/components/MyButton"
import editImg from '@/assets/user/edit.png'
import { addFeedback } from "@/services/feedback"
import './style.less'
import { useModel } from "@/store"

export default withLayout((props) => {
  const { person } = useModel('person')
  const [value, setValue] = useState()
  const [show, setShow] = useState(true)
  const [loading, setLoading] = useState(false)
  const onChange = (e) => {
    if (e.detail.value) {
      setValue(e.detail.value)
    } else {
      setShow(true)
    }
  }
  const handleSumbit = () => {
    if (show) {
      Taro.showToast({
        title: '请输入您的建议',
        icon: 'none',
      })
    } else {
      setLoading(true)
      addFeedback({ ...person, content: value }).then((res) => {
        Taro.showToast({
          title: '反馈已收到！',
          icon: 'success'
        })
        setTimeout(() => {
          Taro.navigateBack({
            delta: 1
          })
        }, 1000)
      }).catch(err => {
        Taro.showToast({
          title: '网络异常, 请刷新小程序重试',
          icon: 'none',
        })
      })
    }
  }
  return (
    <View className='page-index'>
      <View className='index-navbar'>
        <CustomNav title='意见反馈' />
      </View>
      <View className='index-container feedback'>
        <View className='content'>
          <Textarea
            value={value}
            onFocus={() => setShow(false)}
            onInput={onChange}
            className='value'
          />
          {
            show &&
            <View className='defaultValue'>
              <Image src={editImg} className='edit' />
              请留下您宝贵的意见和建议！
            </View>
          }

        </View>
        <View className='bottomBtn'>
          <MyButton value='提交' loading={loading} onClick={handleSumbit} />
        </View>
      </View>
    </View>
  )
})