import withLayout from '@/layouts'
import Taro from '@tarojs/taro'
import CustomNav from '@/components/CustomNav'
import { useEffect, useState } from "react"
import './addRoom.less'
import { saveRoom, getHotelDetail } from '@/services/landlord'


export default withLayout((props) => {
  const { hotelId, hotelName } = props.router.params
  const [roomModel, setRoomModel] = useState({
    hotelId,
    roomName: '',
    address: '',
    location: '',
    parkingAddress: '',
    parkingLocation: '',
    wifiName: '',
    wifiPassword: '',
    weight: '',
  })
  const onRoomMap = () => {
    Taro.chooseLocation().then((res) => {
      setRoomModel({ ...roomModel, location: res.longitude + ',' + res.latitude })

    })
  }
  const onParkMap = () => {
    Taro.chooseLocation().then((res) => {
      setRoomModel({ ...roomModel, parkingLocation: res.longitude + ',' + res.latitude })

    })
  }
  const sumbit = () => {
    if(
    roomModel.roomName!=''&&
    roomModel.address!=''&&
    roomModel.location!=''&&
    roomModel.weight!=''
    )
     { 
      saveRoom(roomModel).then(() => {       
          Taro.showModal({
            title: '保存成功',
            showCancel:false
          }).then(() => {
            Taro.navigateBack()
          })
      })       
     } else{
       Taro.showToast({
        title: '有必填项未填哦',
        icon: 'none',
      })
     }
      
  }
  return (
    <view className='page-index'>
      <CustomNav title={hotelName} />
      <view className='from-room'  >
        <mp-form models={roomModel} >
          <mp-cells title='请填写新增的房源信息' footer='  ' >
            <mp-cell prop='roomName' title='房屋名称：' extClass='font'>
              <input focus dataField='roomName' onInput={(e) => setRoomModel({ ...roomModel, roomName: e.detail.value })} value={roomModel.roomName}  placeholder='请输入房屋名称（必填）' />
            </mp-cell>
            <mp-cell prop='address' title='位置信息：' extClass='font'>
              <input dataField='address' onInput={(e) => setRoomModel({ ...roomModel, address: e.detail.value })} value={roomModel.address}  placeholder='请输入房屋位置（必填）' />
            </mp-cell>
            <mp-cell prop='location' title='定位经纬度：' extClass='font'>
              <label onClick={onRoomMap}>{roomModel.location == '' ? '房间定位（必填）' : roomModel.location}</label>
            </mp-cell>
            <mp-cell prop='parkingAddress' title='停车场位置：' extClass='font'>
              <input dataField='parkingAddress' onInput={(e) => setRoomModel({ ...roomModel, parkingAddress: e.detail.value })} value={roomModel.parkingAddress}  placeholder='请输入停车场位置' />
            </mp-cell>
            <mp-cell prop='parkingLocation' title='定位经纬度：' extClass='font'>
              <label onClick={onParkMap}>{roomModel.parkingLocation == '' ? '停车场定位' : roomModel.parkingLocation}</label>
            </mp-cell>
            <mp-cell prop='wifiName' title='Wi-Fi名称：' extClass='font'>
              <input dataField='wifiName' onInput={(e) => setRoomModel({ ...roomModel, wifiName: e.detail.value })} value={roomModel.wifiName}  placeholder='请输入wifi名称' />
            </mp-cell>
            <mp-cell prop='wifiPassword' title='Wi-Fi密码：' extClass='font'>
              <input dataField='wifiPassword' onInput={(e) => setRoomModel({ ...roomModel, wifiPassword: e.detail.value })} value={roomModel.wifiPassword}  placeholder='请输入wifi密码' />
            </mp-cell>
            <mp-cell prop='weight' title='权重：' extClass='font'>
              <input type='number' dataField='weight'  onInput={(e) => setRoomModel({ ...roomModel, weight: e.detail.value })} placeholder='请输入权重（必填）' />
            </mp-cell>
            <mp-cell>
              <button className='button-OK' onClick={sumbit}>确定</button>
            </mp-cell>
          </mp-cells>
        </mp-form>
      </view>
    </view>
  )
})