|
|
import { useState, useEffect } from 'react'
|
|
|
import { useParams, useNavigate } from 'react-router-dom'
|
|
|
import { Row, Col, Modal, Space, Form, Typography, DatePicker, Input, Button, App } from 'antd'
|
|
|
import useHotelStore from '@/stores/Hotel'
|
|
|
import { HotelList, RoomList } from "./HotelComponents";
|
|
|
import { ExclamationCircleFilled } from '@ant-design/icons'
|
|
|
const { Title } = Typography
|
|
|
|
|
|
function Detail() {
|
|
|
|
|
|
const { hotelId, checkin, checkout } = useParams()
|
|
|
|
|
|
const [loading, setLoading] = useState(false)
|
|
|
const [hotelQuotation, setHotelQuotation] = useState({
|
|
|
hotelName: '',
|
|
|
roomName: '',
|
|
|
price: ''
|
|
|
})
|
|
|
|
|
|
const navigate = useNavigate()
|
|
|
const { notification, modal } = App.useApp()
|
|
|
const [selectedHotel, getRoomListByHotel, roomList] =
|
|
|
useHotelStore(state =>
|
|
|
[state.selectedHotel, state.getRoomListByHotel, state.roomList])
|
|
|
|
|
|
useEffect (() => {
|
|
|
|
|
|
|
|
|
setLoading(true)
|
|
|
getRoomListByHotel(hotelId, checkin, checkout)
|
|
|
.finally(() => setLoading(false))
|
|
|
}, [])
|
|
|
|
|
|
const handleRoomChange = (room, plan) => {
|
|
|
console.info('room: ', room)
|
|
|
console.info('plan: ', plan)
|
|
|
console.info('hotel: ', selectedHotel)
|
|
|
const forHtJson = {
|
|
|
hotelName: selectedHotel.hotel_name,
|
|
|
roomName: room.RoomName,
|
|
|
price: plan.Price
|
|
|
}
|
|
|
setHotelQuotation(forHtJson)
|
|
|
|
|
|
showModal()
|
|
|
|
|
|
console.info('stringify: ' + JSON.stringify(forHtJson))
|
|
|
document.getElementById('forHtJson').value = JSON.stringify(forHtJson)
|
|
|
}
|
|
|
|
|
|
const [isModalOpen, setIsModalOpen] = useState(false);
|
|
|
const showModal = () => {
|
|
|
setIsModalOpen(true);
|
|
|
};
|
|
|
const handleOk = () => {
|
|
|
setIsModalOpen(false);
|
|
|
};
|
|
|
const handleCancel = () => {
|
|
|
setIsModalOpen(false);
|
|
|
}
|
|
|
|
|
|
return (
|
|
|
<>
|
|
|
<input type='hidden' id='forHtJson' />
|
|
|
<Modal title='你选择了' open={isModalOpen} onOk={handleOk} onCancel={handleCancel}>
|
|
|
<p>酒店：{hotelQuotation.hotelName}</p>
|
|
|
<p>房型：{hotelQuotation.roomName}</p>
|
|
|
<p>价格：{hotelQuotation.price}</p>
|
|
|
</Modal>
|
|
|
<Row gutter={16}>
|
|
|
<Col span={20}>
|
|
|
<Typography.Title level={4}>
|
|
|
{selectedHotel.hotel_name}
|
|
|
</Typography.Title>
|
|
|
</Col>
|
|
|
<Col span={4}>
|
|
|
<Button onClick={() => navigate(-1)}>Back</Button>
|
|
|
</Col>
|
|
|
</Row>
|
|
|
<RoomList loading={loading} onChange={({room, plan}) => {handleRoomChange(room, plan)}} dataSource={roomList}></RoomList>
|
|
|
</>
|
|
|
);
|
|
|
}
|
|
|
|
|
|
export default Detail;
|