import Taro, { useDidShow } 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 React, { useState, useEffect, useRef, useImperativeHandle } from 'react'
import { getRoomList, deleteRoom } from '@/services/landlord'
import ShareRoom from '../shareRoom/ShareRoom.jsx'
import ShareCard from '../shareCard/shareCard'
import './houseManage.less'
import SearchBar from '@/components/SearchBar'


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

  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 = (roomId) => {
    deleteRoom(roomId).then(() => {
      Taro.showToast({
        title: '删除房源成功',
        icon: 'none',
      })
      getRoomList({ hotelId: hotel.hotelId }).then((res) => {
        setDetail(res.records || [])
      })
    })
  }

  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)
  }
  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)
      return {
        title: room.roomName,
        path: `/pages/index/index?tab=1&roomId=${room.roomId}&roomOrderId=${roomOrderId}`,
        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}` });
  }

  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 || [])
    })
    }
    
  }
  return (
    <view>
      <view style={{ padding: '0 30rpx', height: '100%' }}>
        <SearchBar placeholder='请输入房源名搜索' onBlur={onSearch} />
        <ShareRoom showCutover={showCutover} onClose={onClose} room={room} onFinish={handleFinish} />
        <ShareCard showCutover={showCard} onClose={onClose} />
        <scroll-view scroll-y="true" scroll-view='true' bindscrolltoupper="upper" bindscrolltolower="lower" bindscroll="scroll" style={{ height: 'calc(100vh - 255px)' }}>
          {
            detail?.map((item) =>
              <view className='houseCard'>
                <view className='houseName'>{item.roomName}</view>
                <view className='operation'>
                  <view onClick={() => handelOrder(item)}><image src={see} />查看入住人</view>
                  <view onClick={() => ShowMoldeOn(item)}><image src={share} />分享链接</view>
                  <view onClick={() => handelDelete(item.roomId)}><image src={del} />删除房源</view>
                </view>
              </view>
            )
          }
        </scroll-view>
      </view>
      <view className='addHouse' onClick={handelClick}>
        <image className='addImg' src={addImg} />添加房源
      </view>

    </view>
  )
})
