import { useState, useEffect, useRef } from "react";
import Taro from '@tarojs/taro'
import MoreGuide from "@/components/MoreGuide";
import Cards from '@/components/foodCards/foodCards.jsx'
import BossCard from '@/components/BossCard'
import image from '@/assets/icons/ProCard/8kb.jpg'
import Pay from '@/assets/icons/GuideCheck/Pay_logo.png'
import food from '@/assets/icons/ProCard/food.png'
import ProCard_hot from '@/assets/icons/ProCard/ProCard_hot.png'
import Taxi from '@/assets/icons/GuideCheck/taxi.png'
import WiFi from '@/assets/icons/GuideCheck/WiFi.png'
import GoHere from '@/assets/icons/GuideCheck/GoHere.png'
import position from '@/assets/icons/GuideCheck/position_logo.png'
import Cup from '@/assets/icons/GuideCheck/Cup.png'
import BlackSpot from '@/assets/icons/GuideCheck/BlackSpot.png'
import starOn from '@/assets/icons/GuideCheck/starOn.png'
import starOff from '@/assets/icons/GuideCheck/starOff.png'
import { getRecommendList, getExtendContent, getShopPackage } from '@/services/home'
import sleep from '@/assets/icons/GuideCheck/sleep_logo.png'
import { getTaRoom, goToRoomForm } from '@/services/taRoom​'
import showMore from '../../../assets/icons/housemantj/查看更多.png'

import './GuideCss/style.less'


const scoreList = new Array(5).fill(0)
const score = '3.9'



export default (props) => {
  const { router, person } = props
  console.log("🚀 ~ file: Guide.jsx ~ line 34 ~ props", props)
  const { roomId, location, roomOrderId } = router.params
  const [extend, setExtend] = useState([])
  const [ifroomId, setIfroomId] = useState('havenot')
  const [spackage, setPackage] = useState([])

  // 住宿经纬度
  const Roomlog = useRef('')
  const Roomlat = useRef('')
  // 停车场经纬度
  const Parklog = useRef('')
  const Parklat = useRef('')
  const [taRoomContent, setTaRoomContent] = 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 48 ~ goToRoomForm ~ res", res)
        if (res.status !== 1) {
          Taro.navigateTo({
            url: `/pages/RoomOrder/index?roomOrderId=${roomOrderId}&status=${res.status}&roomId=${roomId}`,
          })
        }
      })
    }
  }, [roomOrderId])



  useEffect(() => {
    // 老板推荐的套餐
    getRecommendList({ location: location }).then((res) => {
      setPackage(res || [])
    })

    if (roomId) {
      // 点击’去这里‘跳转导航
      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 || [])
        console.log(res);
      })
      //更多指引
      getExtendContent('room', roomId).then((res) => {
        setExtend(res.records || [])
        setIfroomId('reality')
        setAllextNum(res.total)
        setNewextNum(res.records.length)
      })


    } else {
      console.log('房源没有ID');
      return
    }

  }, [roomId])


  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 scroll-y 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'>
                <view className='MessageCard-title1'>
                  <text className='MessageCard-left'>----------</text>
                  民宿位置
                  <text className='MessageCard-right'>----------</text>
                </view>
                <view className='MessageCard-content'>
                  <view className='MessageCard-name' >{taRoomContent?.address}</view>
                </view>
                <view className='MessageCard-button-RoomName'>
                  <image className='MessageCard-image' src={GoHere} />
                  <text className='MessageCard-text' onClick={() => { goRoomMap() }} >去这里</text>
                </view>
              </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?.parkingAddress}</view>
                </view>
                <view className='MessageCard-button-Park'>
                  <image className='MessageCard-image' src={Taxi} />
                  <text className='MessageCard-text' onClick={() => { goParkMap() }} >去这里</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'>
                  <view className='MessageCard-name' >名称：{taRoomContent?.wifiName}</view>
                  <view className='MessageCard-info'  ><text className='MessageCard-name'>密码：</text>{taRoomContent?.wifiPassword}</view>
                </view>
                <view className='MessageCard-button'>
                  <image className='MessageCard-image' src={WiFi} />
                  <text className='MessageCard-text' onClick={() => { wifiCopy() }}>复制</text>
                </view>
              </view>

              <view className='Guide-Content-box' >
                <view className='title-image'>
                  <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>
        {spackage?.map((item, index) => <BossCard key={(index)} item={item} />)}

        {/* 卡片------------- */}
        {/* <view className='Guide-Content-box-two'>
          <view className='title-image-two'>
            <image mode='scaleToFill' className='title-image-cup-two' src={Cup} />
            <text className='title-title-boss-two' >老板推荐的攻略</text>
          </view>
        </view>
        <view className='Raiders-box-one'>
          <view className='Raiders-imageLove'>
            <image className='Raiders-image-Raiders' src={Raiders} />
            <image className='Raiders-image-loveOn' src={loveOn} />
          </view>
          <view className='Raiders-box'>
            <image className='Raiders-image' mode='widthFix' src={RaidersImage} />
            <text className='Raiders-text'>南京古称金陵，自东吴孙权迁都南京以来，多个汉字汉字汉字汉字</text>
            <view className='Raiders-kilometer-on'>
              <image className='Raiders-kilometer' src={position} />
              <text className='Raiders-kilometer-image'>12.8公里</text>
              <text className='Raiders-on-text'>￥8888/人</text>
            </view>
          </view>
          <view className='Raiders-box' style='padding-lift:10px'>
            <view className='Raiders-imageLove'>
              <image className='Raiders-image-Raiders' src={Raiders} />
              <image className='Raiders-image-loveOn' src={loveOn} />
            </view>
            <image className='Raiders-image' mode='widthFix' src={RaidersImage} />
            <text className='Raiders-text'>南京古称金陵，自东吴孙权迁都南京以来，多个汉字汉字汉字汉字</text>
            <view className='Raiders-kilometer-on'>
              <image className='Raiders-kilometer' src={position} />
              <text className='Raiders-kilometer-image'>12.8公里</text>
              <text className='Raiders-on-text'>￥8888/人</text>
            </view>
          </view>
        </view> */}
      </view>
    </scroll-view>

  )
}
