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

import Taro, { useDidShow } from '@tarojs/taro'
import { View, Image } from '@tarojs/components';
import see from '@/assets/icons/landlord/lookPerson.png'
import share from '@/assets/icons/landlord/shareLink.png'
import del from '@/assets/icons/landlord/delete.png'
import addImg from '@/assets/icons/landlord/add.png'
import copyRoom from '@/assets/icons/landlord/copyroom.png'
import React, { useState, useEffect, useRef, useImperativeHandle, useMemo } from 'react'
import { getRoomList, saveRoom, deleteRoom } from '@/services/landlord'
import cutoverUser from '@/assets/icons/UserCenter/cutoverUser.png'
import ToggleRole from '@/components/toggleRole/ToggleRole'
import List from '@/components/List';
import Picker from '@/components/Picker'
import SearchBar from '@/components/SearchBar'
import ShareRoom from '../shareRoom/ShareRoom.jsx'
import ShareCard from '../shareCard/shareCard'
import './houseManage.less'


export default React.forwardRef((props, ref) => {
  const { hotel, hotelList, onHotelChange } = props
  const [detail, setDetail] = useState([])

  const fetchAPI = useMemo(() => hotel.hotelId ? () => getRoomList({ hotelId: hotel.hotelId }) : undefined, [hotel?.hotelId])
  const queryParams = useMemo(() => ({}), [])

  const shareDataRef = useRef()

  // 判断是否首次加载
  const mounted = useRef(false)

  const handelClick = () => {
    Taro.navigateTo({ url: `/hotel/pages/landlord/addRoom/addRoom?hotelId=${hotel.hotelId}&hotelName=${hotel.hotelName}` });
  }
  const handelDelete = (val) => {
    Taro.showModal({
      title: '提示',
      content: `确认删除${val.roomName}?`,
      success: function (res) {
        if (res.confirm) {
          deleteRoom(val.roomId).then(() => {
            Taro.showToast({
              title: '删除房源成功',
              icon: 'none',
            })
            getRoomList({ hotelId: hotel.hotelId }).then((res) => {
              setDetail(res.records || [])
            })
          })
        }
      }
    })
  }
  const handelDetail = (val) => {
    Taro.navigateTo({ url: `/hotel/pages/landlord/addRoom/addRoom?hotelId=${hotel.hotelId}&hotelName=${hotel.hotelName}&roomId=${val.roomId}` });
  }

  const [showCutover, setShowCutover] = useState(false)
  const [showCard, setShowCard] = useState(false)
  const [room, setRoom] = useState({})
  const ShowMoldeOn = (room) => {
    setRoom(room)
    setShowCutover(true)
  }
  const onClose = () => {
    setShowCutover(false)
  }
  const onClose2 = () => {
    setShowCard(false)
  }
  //切换民宿
  const handleHotelChange = (hotelId, current) => {
    onHotelChange(current)
  }

  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 || [])
      })
    }
  })
  //分享房源
  useImperativeHandle(ref, () => ({
    getShareMessage: () => {
      const { shareImage, roomOrderId } = shareDataRef.current
      setShowCard(false)
      console.log(`/pages/index/index?tab=1&roomId=${room.roomId}&roomOrderId=${roomOrderId}&fromType=hotel&recommender=${hotel.hotelId}`)
      return {
        title: room.roomName,
        path: `/pages/index/index?tab=1&roomId=${room.roomId}&roomOrderId=${roomOrderId}&fromType=hotel&recommender=${hotel.hotelId}`,
        imageUrl: shareImage,
      }
    }
  }))

  const handleFinish = (val) => {
    shareDataRef.current = val
    setShowCutover(false)
    // 打开分享弹窗
    setShowCard(true)
  }
  //查看入住人
  const handelOrder = (val) => {
    Taro.navigateTo({ url: `/hotel/pages/landlord/roomOrder/roomOrder?roomId=${val.roomId}&roomName=${val.roomName}&hotelId=${hotel.hotelId}` });
  }

  const onSearch = (e) => {
    if (e.detail.value == '') {
      getRoomList({ hotelId: hotel.hotelId }).then((res) => {
        setDetail(res.records || [])
      })
    }
    else {
      getRoomList({ hotelId: hotel.hotelId, roomName: e.detail.value }).then((res) => {
        setDetail(res.records || [])
      })
    }
  }
  const handelCopy = (e, val) => {
    //阻止冒泡不允许执行父元素的点击事件
    e.stopPropagation()
    // detail.map((item,index)=>{
    //   if (item.roomId==val.roomId) {
    //     console.log(index)
    //   }
    // })
    saveRoom({ ...val, roomId: null, roomName: val.roomName + '复制' }).then((res) => {
      getRoomList({ hotelId: hotel.hotelId }).then((res) => {
        setDetail(res.records || [])
      })
    })
  }
  const [showCutover3, setShowCutover3] = useState(false)
  const ShowMoldeOn3 = () => {
    setShowCutover3(true)
  }
  const onClose3 = () => {
    setShowCutover3(false)
  }
  return (
    <view>
      <view style={{ padding: '0 30rpx', height: '100%' }}>
        <ToggleRole role='hotel' showCutover={showCutover3} maskClosable={showCutover3} onClose={onClose3} />
        <View>
          <view className='storeName'>店名：<Picker style={{ display: 'inline-block' }} placeholder="请选择民宿" value={hotel?.hotelId} kv={['hotelName', 'hotelId']} dicts={hotelList} onChange={handleHotelChange} /></view>
          <view onClick={ShowMoldeOn3} className='User-info-cutover'>
            <image className='User-info-cutover-image' src={cutoverUser} />
          </view>
        </View>
        <SearchBar placeholder='请输入房源名搜索' onBlur={onSearch} />
        <ShareRoom showCutover={showCutover} onClose={onClose} room={room} onFinish={handleFinish} />
        <ShareCard showCutover={showCard} onClose={onClose2} />
        <List
          style={{ height: 'calc(100vh - 290px)' }}
          request={fetchAPI}
          params={queryParams}
          onDataChange={setDetail}
          noData="暂无房源信息"
        >
          <view className='waterfall'>
            {
              detail.map((item, index) =>
                <view className='houseCard' key={index}>
                  <View className='houseName' onClick={() => handelDetail(item)}>{item.roomName || ''}<Image src={copyRoom} onClick={(e) => handelCopy(e, item)} /></View>
                  <view className='operation'>
                    <view onClick={() => handelOrder(item)}><image src={see} />查看入住人</view>
                    <view onClick={() => ShowMoldeOn(item)}><image src={share} />分享链接</view>
                    <view onClick={() => handelDelete(item)}><image src={del} />删除房源</view>
                  </view>
                </view>)
            }
          </view>
        </List>
      </view>
      <view className='addHouse' onClick={handelClick}>
        <image className='addImg' src={addImg} />添加房源
      </view>

    </view>
  )
})