import Taro from "@tarojs/taro"
import { useEffect, useState } from "react"
import CustomNav from '@/components/CustomNav'
import withLayout from '@/layouts'
import { getTaRoom, goToRoomForm, personSubmit } from '@/services/taRoom​'
import RoomForm from './components/RoomForm'
import './style.less'





export default withLayout((props) => {
  const { router, person } = props
  const { roomId, roomOrderId, status } = router.params
  const [taRoomContent, setTaRoomContent] = useState([])
  const [orderContent, setOrderContent] = useState([])

  const CarNumber = orderContent?.personNum
  const [formData, setFormData] = useState([])

  const handleChange = (e, inx) => {
    formData[inx] = e;
    setFormData([...formData])
  }

  const handleSubmit = (e) => {
    for (let i = 0, len = formData.length; i < len; i++) {

      const item = formData[i];

      if (!item.customerName || !item.customerPhone) {
        Taro.showToast({
          title: '手机号或姓名不能为空',
          icon: 'none',
        })
        return;
      }
    }
    personSubmit(roomOrderId, formData).then(a => {
      Taro.navigateBack({
        delta: 1
      })
    })

  }




  useEffect(() => {
    getTaRoom(roomId).then((res) => {
      setTaRoomContent(res)
    })
    goToRoomForm(roomOrderId).then((res) => {
      setOrderContent(res)
    })
  }, [roomId, roomOrderId])

  const FormCard = new Array(CarNumber).fill(0)
  return (
    <view>
      <CustomNav title={taRoomContent?.roomName} />
      {
        FormCard.map((_, index) => {
          return (
            <RoomForm key={(index)} onChange={(e) => handleChange(e, index)} />
          )
        })
      }
      <button className='button-OK' onClick={handleSubmit} >确定</button>

    </view>
  )
})