heytripgo/web/src/views/hotel/HotelComponents.jsx

import { createContext, useContext } from 'react'
import {
  Flex,
  Button,
  Image,
  Divider,
  Typography,
  Empty,
  Skeleton,
  Row,
  Col,
} from 'antd'

const HotelContext = createContext()

export function HotelList({ dataSource, loading, onChange }) {
  if (dataSource && dataSource.length > 0) {
    const itemList = dataSource.map((data, index) => {
      return (
        <Skeleton active loading={loading} key={index}>
          <Row
            gutter={16}
            className="rounded shadow-md hover:shadow-lg hover:shadow-gray-400 p-2 border-solid border border-gray-100"
          >
            <Col span={24}>
              <Flex
                vertical
                gap="small"
                align="flex-start"
                justify="flex-start"
              >
                <Typography.Title level={5}>{data.hotel_name}</Typography.Title>
                <Typography.Text type="secondary">
                  {data.address}
                </Typography.Text>
                <span>{data.base_price.Price ?? 0} 起</span>
                <Button
                  size="small"
                  type="primary"
                  onClick={() => onChange(data)}
                >
                  查看房型
                </Button>
              </Flex>
            </Col>
          </Row>
        </Skeleton>
      )
    })

    return (
      <HotelContext.Provider value={{ onChange }}>
        <Flex vertical gap="small">
          {itemList}
        </Flex>
      </HotelContext.Provider>
    )
  } else {
    return <Empty />
  }
}

export function RoomList({ dataSource, loading, onChange }) {
  const triggerChange = (changedValue) => {
    onChange?.(changedValue)
  }

  if (dataSource && dataSource.length > 0) {
    const itemList = dataSource.map((room, index) => {
      let roomImage = <Empty description={false} />
      if (room?.Images && room?.Images.length > 0) {
        roomImage = <Image src={room?.Images[0].Url} />
      }

      return (
        <Skeleton active loading={loading} key={index}>
          <div className="rounded shadow-md hover:shadow-lg hover:shadow-gray-400 p-2 border-solid border border-gray-100">
            <Typography.Title level={5}>
              {room.RoomName}, {room.BedTypeDesc}
            </Typography.Title>
            <Row gutter={[16, 16]}>
              <Col span={4}>
                <Flex vertical>
                  {roomImage}
                  <span>大小: {room.Area ?? 0}m²</span>
                </Flex>
              </Col>
              <Col span={20}>
                {room.RatePlans.map((plan, index) => {
                  return (
                    <PlanItem key={index} room={room} plan={plan}></PlanItem>
                  )
                })}
              </Col>
            </Row>
          </div>
        </Skeleton>
      )
    })

    return (
      <HotelContext.Provider value={{ triggerChange }}>
        <Flex gap="middle" vertical>
          {itemList}
        </Flex>
      </HotelContext.Provider>
    )
  } else {
    return <Empty />
  }
}

const getMealDesc = (plan) => {
  const type = plan.MealType
  let desc = '未知'
  if (type === 1)
    desc = '早' + plan.Breakfast + '中' + plan.Lunch + '晚' + plan.Dinner
  else if (type === 2) desc = '半包'
  else if (type === 3) desc = '全包'
  else if (type === 4) desc = '午/晚二选一'
  else if (type === 5) desc = '早+午/晚二选一'

  return desc
}

const PlanItem = ({ room, plan }) => {
  const { triggerChange } = useContext(HotelContext)
  return (
    <>
      <Row gutter={[16, 16]} className=" divide-y divide-slate-700">
        <Col span={6}>
          <span>餐: {getMealDesc(plan)}</span>
        </Col>
        <Col span={6}>
          <span>
            {plan.Cancelable
              ? plan.CancelRulesText.join('；')
              : plan.CancelableText}
          </span>
        </Col>
        <Col span={6}>
          <b>{plan.PriceUnit}</b>
          <small>{plan.Currency}</small>
        </Col>
        <Col span={4}>
          <Button size="small" onClick={() => triggerChange({ room, plan })}>
            选他
          </Button>
        </Col>
      </Row>
      <Divider />
    </>
  )
}