import { useState, useEffect } from 'react'
import Taro from '@tarojs/taro'
import { Text, Input } from '@tarojs/components'
import './style.less'



export default (props) => {
  const { onChange } = props

  const [customerName, setCustomerName] = useState()
  const [customerPhone, setCustomerPhone] = useState()




  const handeInput = (e, key) => {
    const value = e.detail.value

    if (key === 'customerName') {
      setCustomerName(value)
    } else {
      setCustomerPhone(value)
    }
  }

  useEffect(() => {
    onChange({ customerName, customerPhone })
  }, [customerName, customerPhone])


  return (
    <view className='from-room'  >
      <mp-form >
        <mp-cells title='请填写姓名手机号' footer='  '>
          <mp-cell prop='customerName' title='姓名：' extClass=''>
            <input onInput={(e) => handeInput(e, 'customerName')} focus dataField='name' className='weui-input' placeholder='请输入姓名' />
          </mp-cell>
          <mp-cell prop='customerPhone' title='手机号：' extClass=''>
            <input type='number' onInput={(e) => handeInput(e, 'customerPhone')} dataField='mobile' className='weui-input' placeholder='请输入手机号' />
          </mp-cell>
        </mp-cells>
      </mp-form>
    </view>
  )
}
