import { useState, useEffect, useRef } from "react";
import Taro from '@tarojs/taro'
import MoreGuide from "@/components/MoreGuide";
import BossCard from '@/components/BossCard'
import GPS from '@/assets/icons/GuideCheck/GPS.png'
import copy_logo from '@/assets/icons/GuideCheck/copy_logo.png'
import Cup from '@/assets/icons/GuideCheck/Cup.png'
import BlackSpot from '@/assets/icons/GuideCheck/BlackSpot.png'
import { getRecommendList, getExtendContent } from '@/services/home'
import sleep from '@/assets/icons/GuideCheck/sleep_logo.png'
import { getTaRoom, goToRoomForm } from '@/services/taRoom'
import useTrackClick from '@/utils/hooks/useTrackClick'
import showMore from '@/assets/icons/housemantj/setMore.png'
import { useModel } from "@/store";
import './GuideCss/style.less'
export default (props) => {
const { router, person, location, } = props
let { roomId, roomOrderId } = router.params
const [extend, setExtend] = useState([])
const [ifroomId, setIfroomId] = useState('havenot')
const [spackage, setPackage] = useState([])
const { roomId: rid } = useModel('hotel')
if (!roomId && rid) {
roomId = rid
}
const trackClick = useTrackClick(router)
// 住宿经纬度
const Roomlog = useRef('')
const Roomlat = useRef('')
// 停车场经纬度
const Parklog = useRef('')
const Parklat = useRef('')
const [taRoomContent, setTaRoomContent] = useState([])
const RoomLocation = taRoomContent?.location
//没有停车 wifi的就不显示按钮
const [wifiButtonStyle, setWifiButtonStyle] = useState('')
const [parkingButtonStyle, setParkingButtonStyle] = useState('')
const [guideStyle, setGuideStyle] = useState('')
//当前指南总数
const [newextNum, setNewextNum] = useState(0)
//全部指南个数
const [AllextNum, setAllextNum] = useState(0)
//指南当前页数
const [epage, setEpage] = useState(2)
const extendMore = () => {
setEpage(epage + 1)
getExtendContent('room', roomId, { pageNum: epage }).then((res) => {
setExtend([...extend, ...res.records])
setNewextNum(newextNum + res.records.length)
})
}
useEffect(() => {
if (roomOrderId) {
goToRoomForm(roomOrderId).then((res) => {
console.log("🚀 ~ file: Guide.jsx ~ line 65 ~ goToRoomForm ~ res", res)
if (res.status !== 1 && res.personNum > 0) {
Taro.navigateTo({
url: `/pages/RoomOrder/index?roomOrderId=${roomOrderId}&status=${res.status}&roomId=${roomId}`,
})
}
})
}
}, [roomId, roomOrderId])
useEffect(() => {
if (roomId) {
console.log('--------------------------');
// 点击’去这里‘跳转导航
getTaRoom(roomId).then((res) => {
Roomlog.current = (res.location).toString().split(',')[0]
Roomlat.current = (res.location).toString().split(',')[1]
Parklog.current = (res.parkingLocation).toString().split(',')[0]
Parklat.current = (res.parkingLocation).toString().split(',')[1]
setTaRoomContent(res || [])
})
//更多指引
getExtendContent('room', roomId).then((res) => {
setExtend(res.records || [])
setIfroomId('reality')
setAllextNum(res.total)
setNewextNum(res.records.length)
})
// getRecommendList({ location: RoomLocation }).then((res) => {
// setPackage(res || [])
// })
getRecommendList({ location: location }).then((res) => {
setPackage(res || [])
})
} else {
getRecommendList({ location: location }).then((res) => {
setPackage(res || [])
})
return
}
// extend?.records === []
if (taRoomContent?.wifiPassword === "") {
setWifiButtonStyle('none')
}
if (taRoomContent?.parkingAddress === "") {
setParkingButtonStyle('none')
}
}, [roomId, RoomLocation, taRoomContent?.wifiPassword, taRoomContent?.parkingAddress, location])
const goRoomMap = () => {
Taro.openLocation({
longitude: Roomlog.current - 0,
latitude: Roomlat.current - 0,
name: taRoomContent.roomName,
address: taRoomContent.address,
scale: 12,
})
}
const goParkMap = () => {
Taro.openLocation({
longitude: Parklog.current - 0,
latitude: Parklat.current - 0,
name: taRoomContent.parkingAddress,
address: taRoomContent.parkingAddress,
scale: 12,
})
}
const wifiCopy = () => {
Taro.setClipboardData({
data: taRoomContent?.wifiPassword,
success: e => {
Taro.showToast({
title: '密码已复制',
icon: 'success',
duration: 2000,
})
}
})
}
return (
<scroll-view scrollY style='height:100%;' >
<view className='Guide-Home-box'>
{
ifroomId === 'havenot' && (
<view className='Guide-image-text-box'>
<image className='Guide-images' src={sleep} />
<view className='Guide-text'>休息一下，休息一下~</view>
</view>
)
}
{/* 有民宿的情况下 */}
{
ifroomId === 'reality' && (
<view>
{/*
<view className='MessageCard'>
<view className='MessageCard-title1'>
<text className='MessageCard-left'>----------</text>
名称
<text className='MessageCard-right'>----------</text>
</view>
<view className='MessageCard-content'>
<view className='MessageCard-name' >{taRoomContent?.roomName}</view>
</view>
</view>
<view className='MessageCard-hotle'>
<view className='MessageCard-title1-hotle'>
<text className='MessageCard-left-hotle'>----------</text>
民宿位置
<text className='MessageCard-right-hotle'>----------</text>
</view>
<view className='MessageCard-content-hotle'>
<view className='MessageCard-name-hotle' >{taRoomContent?.address}</view>
</view>
<view className='MessageCard-button-RoomName-hotle' onClick={() => { goRoomMap() }}>
<image className='MessageCard-image-hotle' src={GoHere} />
<text className='MessageCard-text-hotle' >去这里</text>
</view>
</view>
<view className='MessageCard-parkView'>
<view className='MessageCard-title1-parkView'>
<text className='MessageCard-left-parkView'>----------</text>
停车位置
<text className='MessageCard-right-parkView'>----------</text>
</view>
<view className='MessageCard-content-parkView'>
<view className='MessageCard-name-parkView' >{taRoomContent?.parkingAddress}</view>
</view>
<view className='MessageCard-button-Park-parkView' onClick={() => { goParkMap() }} style={{ display: parkingButtonStyle }} >
<image className='MessageCard-image-parkView' src={Taxi} />
<text className='MessageCard-text-parkView' >去这里</text>
</view>
</view>
<view className='MessageCard'>
<view className='MessageCard-title1'>
<text className='MessageCard-left'>----------</text>
WiFi信息
<text className='MessageCard-right'>----------</text>
</view>
<view className='MessageCard-content' style={{ display: wifiButtonStyle }} >
<view className='MessageCard-name' >名称：{taRoomContent?.wifiName}</view>
<view className='MessageCard-info' ><text className='MessageCard-name'>密码：</text>{taRoomContent?.wifiPassword}</view>
</view>
<view className='MessageCard-button' onClick={() => { wifiCopy() }} style={{ display: wifiButtonStyle }}>
<image className='MessageCard-image' src={WiFi} />
<text className='MessageCard-text'>复制</text>
</view>
</view> */}
<view className='room-box-info-ROOM'>
<view className='room-bi-name-ROOM' >
<view className='room-bin-title-ROOM'>房屋名称</view>
<view className='room-bint-nameInfo-ROOM'>{taRoomContent?.roomName}
</view>
</view>
</view>
{/* --------房屋位置-------- */}
<view className='room-box-info-HouLocation'>
<view className='room-bi-name-HouLocation' >
<view className='room-bin-title-HouLocation'>房屋位置</view>
<view className='room-bint-nameInfo-HouLocation'>
<view className='room-bint-nameInfo-bool-HouLocation' >{taRoomContent?.address}</view>
<view className='room-bintn-button-HouLocation' onClick={() => { goRoomMap() }} style={{ display: wifiButtonStyle }}>
<image className='room-bintn-image-HouLocation' src={GPS} />
<text className='room-bintn-text-HouLocation'>去这里</text>
</view>
</view>
</view>
</view>
{/* --------停车场-------- */}
<view className='room-box-info-Parking'>
<view className='room-bi-name-Parking' >
<view className='room-bin-title-Parking'>停车位置</view>
<view className='room-bint-nameInfo-Parking'>
<view className='room-bint-nameInfo-bool-Parking' >{taRoomContent?.parkingAddress}</view>
<view className='room-bintn-button-Parking' onClick={() => { goParkMap() }} style={{ display: wifiButtonStyle }}>
<image className='room-bintn-image-Parking' src={GPS} />
<text className='room-bintn-text-Parking'>去这里</text>
</view>
</view>
</view>
</view>
{/* --------无线网-------- */}
<view className='room-box-info-WIFIContent'>
<view className='room-bi-name-WIFIContent' >
<view className='room-bin-title-WIFIContent'>WiFi信息</view>
<view className='room-bint-nameInfo-WIFIContent'>
<view className='room-bint-nameInfo-bool-WIFIContent-wifi' >名称：{taRoomContent?.wifiName}</view>
<view className='room-bint-nameInfo-bool-WIFIContent-password' >密码：{taRoomContent?.wifiPassword}</view>
<view className='room-bintn-button-WIFIContent' onClick={() => { wifiCopy() }} style={{ display: wifiButtonStyle }}>
<image className='room-bintn-image-WIFIContent' src={copy_logo} />
<text className='room-bintn-text-WIFIContent'>复制</text>
</view>
</view>
</view>
</view>
<view className='Guide-Content-box' >
<view className='title-image' style={{ display: guideStyle }} >
<image mode='scaleToFill' className='title-image-cup' src={BlackSpot} />
<text className='title-title-boss' >更多指引</text>
</view>
{(extend || []).map((item, index) => <MoreGuide key={(index)} item={item} />)}
<view className='showMore' style={{ display: newextNum == AllextNum ? 'none' : '' }} onClick={extendMore}>
<view>点击查看更多</view>
<image src={showMore} className='moreTip' />
</view>
</view>
</view>
)
}
<view className='Guide-Content-box'>
<view className='title-image'>
<image mode='scaleToFill' className='title-image-cup' src={Cup} />
<text className='title-title-boss' >老板推荐好吃的</text>
</view>
</view>
<view style={{ marginTop: '10rpx', marginBottom: '60rpx' }}>
{(spackage || []).map((item, index) => <BossCard det={item} st={parseFloat(item.score.toFixed(1))} key={(index)} trackClick={trackClick} taRoomContent={taRoomContent} item={item} />)}
</view>
</view>
</scroll-view>
)
}