import { useState, useEffect } from 'react'
import withLayout from '@/layout'
import { ScrollView } from '@tarojs/components'
import Disclaimer from '@/components/Disclaimer'
import Poster from '@/components/Poster'
import { fetch } from '@/utils/request'
import { API_ITEMS_DETAIL } from '@/constants/api'
import useParams from '@/utils/hooks/useParams'
import useShare from '@/utils/hooks/useShare'
import usePoster from '@/utils/hooks/usePoster'
import DetailBottom from './components/DetailBottom/index'
import BuildingDetailBanner from './components/BuildingDetailBanner/index'
import BasicInfo from './components/BasicInfo/index'
import SpecialPriceHouse from './components/SpecialPriceHouse/index'
import ProjectDynamic from './components/ProjectDynamic/index'
import PropertyConsultant from './components/PropertyConsultant/index'
import Periphery from './components/Periphery/index'
import HouseTypeIntro from './components/HouseTypeIntro/index'
import MarketingActivity from './components/MarketingActivity/index'
import LivingActivity from './components/LivingActivity/index'
import News from './components/News/index'
import Pictures from './components/Pictures/index'

import './index.scss'

export default withLayout((props) => {
  const { router, person, shareContent, trackData, page } = props
  const { id } = router.params

  const [showPoster, setShowPoster] = useState(false)
  const [DetailInfo, setDetailInfo] = useState({})
  const [PictureList, setPictureList] = useState([])

  // 本页面分享或者海报参数
  const paramsRef = useParams({id, buildingId: id, person, from: `${page.type}_share`})

  const fullTrackData = { ...trackData, buildingId: id }

  // 分享
  useShare({
      title: shareContent.shareContentTitle || DetailInfo?.buildingName,
      path: `${router.path}?${paramsRef.current}`,
      image: shareContent.shareContentImg,
    },
    fullTrackData,
  )

  // 海报
  const posterData = usePoster(person, DetailInfo?.poster, router, paramsRef)

  useEffect(() => {
    // 获取楼盘信息
    fetch({ url: `${API_ITEMS_DETAIL}/${id}`, spin: true }).then((res) => {
      setDetailInfo(res || {})
      
      if (res?.buildingApartment) {
        const List = res.buildingApartment.filter(item => item.apartmentType === 'photo')
        setPictureList(List.filter(item => item.buildingImgList.length > 0))
      }

    }).catch((err) => {
      console.error(err)
    })

  }, [id, router.path])

  // 户型图
  const houseTypeImages = (DetailInfo?.buildingApartment || []).filter(x => x.apartmentType === 'apart')

  return (
    <view className='Page buildingDetail flex-v'>
      <view className='flex-item'>
        <view>
          <ScrollView scroll-y>
            <view className='PageContent'>

              {/* banner */}
              <view className='BannerContainer'>
                <view>
                  <view>
                    <BuildingDetailBanner Info={DetailInfo}></BuildingDetailBanner>
                  </view>
                </view>
              </view>

              {/* content */}
              <view className='DetailContent'>

                {/* 基本信息 */}
                <view className='BasicInfo'>
                  <BasicInfo Info={DetailInfo} trackData={fullTrackData}></BasicInfo>
                </view>

                {/* 特价房源 */}
                {
                  DetailInfo?.specialRoomList.length > 0 &&
                  <view className='SpecialPriceHouse' style={{minHeight: 0}}>
                    <SpecialPriceHouse List={DetailInfo?.specialRoomList}></SpecialPriceHouse>
                  </view>
                }

                {/* 项目动态 */}
                {
                  DetailInfo?.trendList.length > 0 &&
                  <view className='ProjectDynamic' style={{minHeight: 0}}>
                    <ProjectDynamic List={DetailInfo?.trendList}></ProjectDynamic>
                  </view>
                }

                {/* 置业顾问 */}
                {
                  (DetailInfo?.consultants || []).length > 0 &&
                  <view className='PropertyConsultant' style={{minHeight: 0}}>
                    <PropertyConsultant Info={DetailInfo}></PropertyConsultant>
                  </view>
                }

                {/* 位置及周边 */}
                <view className='Periphery' style={{minHeight: 0}}>
                  <Periphery Info={DetailInfo}></Periphery>
                </view>

                {/* 户型介绍 */}
                {
                  houseTypeImages.length > 0 &&
                  <view className='HouseTypeIntro' style={{minHeight: 0}}>
                    <HouseTypeIntro Info={houseTypeImages}></HouseTypeIntro>
                  </view>
                }

                {/* 营销活动 */}
                <view className='MarketingActivity' style={{minHeight: 0}}>
                  <MarketingActivity Info={DetailInfo}></MarketingActivity>
                </view>

                {/* 直播活动 */}
                {
                  (DetailInfo?.liveActivityList || []).length > 0 &&
                  <view className='LivingActivity' style={{minHeight: 0}}>
                    <LivingActivity Info={DetailInfo}></LivingActivity>
                  </view>
                }

                {/* 新鲜资讯 */}
                <view className='News' style={{minHeight: 0}}>
                  <News Info={DetailInfo}></News>
                </view>

                {/* 相册 */}
                {
                  PictureList.length > 0 &&
                  <view className='Pictures'>
                    <Pictures List={PictureList}></Pictures>
                  </view>
                }

                {/* 免责声明 */}
                <Disclaimer />
              </view>

            </view>
          </ScrollView>
        </view>
      </view>

      <view className='PageBottom'>
        <DetailBottom Info={DetailInfo} onPoster={() => setShowPoster(true)}></DetailBottom>
      </view>

      <Poster
        show={showPoster}
        dataSource={posterData}
        onClose={() => setShowPoster(false)}
        onSuccess={() => setShowPoster(false)}
      />
    </view>
  )
})