miniapp-v2/src/hotel/components/HouseManage/houseManage.jsx

import Taro from '@tarojs/taro'
import see from '@/assets/icons/landlord/查看入住人.png'
import share from '@/assets/icons/landlord/分享链接.png'
import del from '@/assets/icons/landlord/删除.png'
import addImg from '@/assets/icons/landlord/添加.png'
import iconsearch from '@/assets/icons/housemantj/search.png'
import './houseManage.less'
import {useState, useEffect,useRef } from 'react'
import {useDidShow } from '@tarojs/taro'
import {getRoomList,deleteRoom} from '@/services/landlord'
import ShareRoom from '../shareRoom/ShareRoom.jsx'


export default (props) => {
  const {hotel}=props
  const [detail, setDetail] = useState([])
  // 判断是否首次加载
  const mounted = useRef(false)

  const handelClick=()=>{
    Taro.navigateTo({ url: `/hotel/pages/landlord/addRoom/addRoom?hotelId=${hotel.hotelId}&hotelName=${hotel.hotelName}` });
  }
  const handelDelete=(roomId)=>{
    deleteRoom(roomId).then(()=>{
      Taro.showToast({
        title: '删除房源成功',
        icon: 'none',
      })
      getRoomList({hotelId:hotel.hotelId}).then((res)=>{
        setDetail(res.records||[])
      })
    })
  }

  const [showCutover, setShowCutover] = useState(false)
  const [roomId, setRoomId] = useState()
  const ShowMoldeOn = (roomId) => {
    setRoomId(roomId)
    setShowCutover(true)
  }
  const onClose = () => {
    setShowCutover(false)
  }
  useEffect(()=>{
    //首次加载页面时
    if (!mounted.current && hotel.hotelId) {
      getRoomList({hotelId:hotel.hotelId}).then((res)=>{
        setDetail(res.records||[])
        mounted.current = true
      })
    }
  },[hotel?.hotelId])

  //当前页面切换到前台时
  useDidShow(() => {
    if (mounted.current) {
      getRoomList({hotelId:hotel.hotelId}).then((res)=>{
        setDetail(res.records||[])
      })
    }
  })

  return (
    <view>
      <view style={{ padding: '0 30rpx', height: '100%' }}>
          <view className='search'>
            <input className='searchInput' disabled />
            <image className='searchicon' src={iconsearch} />
            <view className="searchword">请输入关键字搜索</view>
          </view>
          <ShareRoom showCutover={showCutover} onClose={onClose}  roomId={roomId}/>
        <scroll-view scroll-y="true" scroll-view='true' bindscrolltoupper="upper" bindscrolltolower="lower" bindscroll="scroll" style={{ height: 'calc(100vh - 255px)' }}>

          <view>
            {
              detail?.map((item)=>
              <view className='houseCard'>
              <view className='houseName'>{item.roomName}</view>
              <view className='operation'>
                <view><image src={see} />查看入住人</view>
                <view onClick={()=>ShowMoldeOn(item.roomId)}><image src={share}/>分享链接</view>
                <view onClick={()=>{handelDelete(item.roomId)}}><image src={del} />删除房源</view>
              </view>
            </view>
              )
            }
            
           
          </view>
        </scroll-view>        
      </view>
      <view className='addHouse' onClick={handelClick}>
        <image className='addImg' src={addImg} />添加房源
      </view>
    
      </view>
  )
}