import { useState, useEffect } from "react";
import Taro, { useDidShow } from '@tarojs/taro'
import MoreGuide from "@/components/MoreGuide";
import BossCard from '@/components/BossCard'
import SpinBox from "@/components/Spin/SpinBox";
import { Image } from "@tarojs/components";
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 { 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 [loading, setLoading] = useState(false)

  const { roomId: rid } = useModel('hotel')

  if (!roomId && rid) {
    roomId = rid
  }

  const trackClick = useTrackClick(router)

  const [taRoomContent, setTaRoomContent] = useState([])

  const goContent = () => {
    if (roomOrderId) {
      goToRoomForm(roomOrderId).then((res) => {
        if (res.status !== 1 && res.personNum > 0) {
          Taro.reLaunch({
            url: `/pages/RoomOrder/index?roomOrderId=${roomOrderId}&status=${res.status}&roomId=${roomId}`,
          })
        }
      })
    }
  }

  useEffect(() => {
    goContent()
  }, [roomId, roomOrderId])

  useDidShow(() => {
    goContent()
  })

  const getGuidelist = () => {
    setLoading(true)
    getExtendContent('room', roomId, { pageSize: 500 }).then((res) => {
      setExtend(res.records || [])
      setIfroomId('reality')
      setLoading(false)
    })
    setLoading(true)
  }

  useEffect(() => {
    if (roomId) {
      setLoading(true)
      // 点击’去这里‘跳转导航
      getTaRoom(roomId).then((res) => {
        setTaRoomContent(res || [])
        setLoading(false)
      })
      //更多指引
      getGuidelist()
      getRecommendList({ location: taRoomContent.location || '' }).then((res) => {
        setPackage(res || [])
        setLoading(false)
      })
    } else {
      setLoading(true)
      getRecommendList({ location: location }).then((res) => {
        setPackage(res || [])
        setLoading(false)
      })
      return
    }
  }, [roomId, taRoomContent?.wifiPassword, taRoomContent?.parkingAddress, location, taRoomContent.location])


  const goRoomMap = () => {
    if (taRoomContent.location) {
      const [longitude, latitude] = taRoomContent.location.split(',').map(x => x - 0)

      Taro.openLocation({
        longitude,
        latitude,
        name: taRoomContent.roomName,
        address: taRoomContent.address,
        scale: 12,
      })
    }
  }

  const goParkMap = () => {
    if (taRoomContent.parkingLocation) {
      const [longitude, latitude] = taRoomContent.parkingLocation.split(',').map(x => x - 0)

      Taro.openLocation({
        longitude,
        latitude,
        name: taRoomContent.parkingAddress,
        address: taRoomContent.parkingAddress,
        scale: 12,
      })
    }
  }

  const wifiCopy = () => {
    Taro.setClipboardData({
      data: taRoomContent?.wifiPassword,
      success: e => {
        Taro.showToast({
          title: '密码已复制',
          icon: 'success',
          duration: 2000,
        })
      }
    })
  }
  const goIndex = () => {
    Taro.redirectTo({ url: '/pages/index/index' })
  }
  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' && (
            <SpinBox loading={loading}>
              <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() }}>
                      <image className='room-bintn-image-HouLocation' src={GPS} />
                      <text className='room-bintn-text-HouLocation'>去这里</text>
                    </view>
                  </view>
                </view>
              </view>
              {/* --------停车场-------- */}
              {
                !taRoomContent.parkingLocation ? null :
                  <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() }}>
                          <image className='room-bintn-image-Parking' src={GPS} />
                          <text className='room-bintn-text-Parking'>去这里</text>
                        </view>
                      </view>
                    </view>
                  </view>
              }
              {/* --------无线网-------- */}
              {
                !taRoomContent.wifiName && !taRoomContent.wifiPassword ? null :
                  <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() }}>
                          <image className='room-bintn-image-WIFIContent' src={copy_logo} />
                          <text className='room-bintn-text-WIFIContent'>复制</text>
                        </view>
                      </view>
                    </view>
                  </view>
              }
              {
                extend.length === 0 ? null :
                  <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>
                    <view>
                      {(extend || []).map((item, index) => <MoreGuide key={(index)} item={item} />)}
                    </view>
                  </view>
              }
            </SpinBox>
          )
        }
        <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', paddingBottom: '60rpx' }}>
          {(spackage || []).map((item, index) => <BossCard det={item} st={parseFloat(item.score.toFixed(1))} key={(index)} trackClick={trackClick} taRoomContent={taRoomContent} item={item} />)}
        </view>
        <Image mode='widthFix' style={{ width: '100%' }} src='http://yz-shigongli.oss-cn-shanghai.aliyuncs.com/images/hotel_guide_help.png' onClick={goIndex} />
      </view>
    </scroll-view>
  )
}