miniapp-v2/src/hotel/components/shareRoom/ShareRoom.jsx

import React from 'react'
import Popup from '@/components/Popup'
import Taro from '@tarojs/taro'
import { Input, Button, View, Picker, Label } from '@tarojs/components'
import { shareRoom } from '@/services/landlord'
import './ShareRoom.less'
import { useState } from 'react'


export default (props) => {
  const { showCutover, onClose, room, onFinish } = props
  const [startDate, setStartDate] = useState('')
  const [endDate, setEndDate] = useState('')
  const [roomNum, setRoomNum] = useState('')
  const handelStartDate = (e) => {
    setStartDate(e.detail.value)
  }
  const handelEndDate = (e) => {
    setEndDate(e.detail.value)
  }
  const handelShare = () => {
    var myDate = new Date();
    shareRoom({
      hotelId: room.hotelId,
      personNum: roomNum == '' ? 0 : roomNum, roomId: room.roomId,
      startDate: startDate == '' ? myDate.toLocaleDateString() : startDate,
      endDate: endDate == '' ? myDate.toLocaleDateString() : endDate
    }).then((res) => {
      onFinish(res)
      setStartDate('')
      setEndDate('')
      setRoomNum()
    })

  }
  return (
    <Popup show={showCutover} onClose={onClose}>
      <View className='from-room srl'>
        <View style={{ marginBottom: '25px' }}>
          <View className='rzline' /><Label className='srl mg'>请输入入住人信息</Label><View className='rzline' />
        </View>
        <View className='srleft'>
          <Label>入住人数：</Label>
          <Input onInput={(e) => setRoomNum(e.detail.value)} value={roomNum} type='number' placeholder='请输入入住人数' />
        </View>
        <View className='srleft'>
          <Label >入住开始时间：</Label>
          <Picker className='picker' mode='date' onChange={handelStartDate}>
            {startDate == '' ? '请选择入住开始时间' : startDate}
          </Picker>
        </View>
        <View className='srleft'>
          <Label>入住结束时间：</Label>
          <Picker className='picker' mode='date' onChange={handelEndDate}>
            {endDate == '' ? '请选择入住结束时间' : endDate}
          </Picker>
        </View>
        <View>
          <Button className='cancel' onClick={onClose}>取消</Button>
          <Button className='btn' onClick={handelShare}>分享</Button>
        </View>




        {/* <mp-form  >
        <Label style={{color:'black'}}>请输入入住人信息</Label>
        <mp-cells    footer='  ' >
          <mp-cell title='入住人数：' extClass='font'>
            <Input focus dataField='nm' onInput={(e) => setRoomNum(e.detail.value)} value={roomNum} type='number' placeholder='请输入入住人数' />
          </mp-cell>
          <mp-cell title='入住开始时间：' extClass='font'>
            <Picker mode='date' onChange={handelStartDate}>
              {startDate == '' ? '请选择入住开始时间' : startDate}
            </Picker>
          </mp-cell>
          <mp-cell title='入住结束时间：' extClass='font'>
            <Picker  mode='date' onChange={handelEndDate}>
            {endDate == '' ? '请选择入住结束时间' : endDate}
          </Picker>
          </mp-cell>
          <mp-cell>
            <Button className='cancel' onClick={onClose}>取消</Button><Button className='btn' onClick={handelShare}>分享</Button>
          </mp-cell>
        </mp-cells>
      </mp-form> */}
      </View>







      {/* <View className='from-room'>
        <Label style={{ color: 'black' }}>请输入入住人信息</Label>
        <View className='flex'>
          <Label>入住人数：</Label><Input focus dataField='nm' onInput={(e) => setRoomNum(e.detail.value)} value={roomNum} type='number' placeholder='请输入入住人数' /></View>
        <View className='flex'>
          <Label>入住开始时间：</Label>
          <Picker mode='date' className='picker' onChange={handelStartDate}>
            {startDate == '' ? '请选择入住开始时间' : startDate}
          </Picker>
        </View>
        <View className='flex'>
          <Label>入住结束时间：</Label>
          <Picker className='picker' mode='date' onChange={handelEndDate}>
            {endDate == '' ? '请选择入住结束时间' : endDate}
          </Picker>
        </View>
        <View><Button className='cancel' onClick={onClose}>取消</Button><Button className='btn' onClick={handelShare}>分享</Button></View>
      </View> */}
    </Popup>
  )
}