import { useState, useEffect } from 'react'
import { useSelector } from 'react-redux'
import Taro from '@tarojs/taro'
import { ScrollView } from '@tarojs/components'
import withLayout from '@/layout'
import ProjectListItem from '@/components/ProjectListItem/index'
// import ShareToCircle from '@/components/ShareToCircle/index'
import { fetch } from '@/utils/request'
import { API_BANNER_LIST, API_INDEX_PROJECTS } from '@/constants/api'
import useParams from '@/utils/hooks/useParams'
import useShare from '@/utils/hooks/useShare'
import Location from './components/Location/index'
import Banner from './components/Banner/index'
import Menu from './components/Menu/index'
import HotRecommend from './components/HotRecommend/index'
import LiveSale from './components/LiveSale/index'
import ColumnTitle from './components/ColumnTitle/index'
import useIndexShareContent from './useIndexShareContent'

import './index.scss'

export default withLayout((props) => {
  const { city, router, person, trackData, page } = props
  
  // 本页面分享或者海报参数
  const paramsRef = useParams({person, from: `${page.type}_share`})
  const { miniApp } = useSelector(s => s.user.userInfo)
  const [BannerList, setBannerList] = useState([])
  const [ProjectList, setProjectList] = useState([])
  const [ShowHotRecommend, setShowHotRecommend] = useState(false)
  const [ShowLive, setShowLive] = useState(false)
  const shareContent = useIndexShareContent(miniApp, paramsRef, router)

  // 分享
  useShare(shareContent, trackData)

  useEffect(() => {
    if (city?.id) {
      GetBanner()
      GetProjectList()
    }
  }, [city?.id])

  const GetBanner = () => { // 获取banner
    fetch({ url: `${API_BANNER_LIST}/banner`, method: 'get', payload: { cityId: city.id, showPosition: 'index' } }).then((res) => {
      setBannerList(res || [])
    })
  }

  const GetProjectList = () => { // 获取项目列表
    fetch({ url: API_INDEX_PROJECTS, method: 'get', payload: { cityId: city.id, pageNum: 1, pageSize: 10 } }).then((res) => {
      setProjectList(res.records || [])
    })
  }

  const HotRecommendChange = (e) => {
    setShowHotRecommend(e)
  }

  const LiveChange = (e) => {
    setShowLive(e)
  }

  return (
    <view className='Page Index'>
      {/* <ShareToCircle visible></ShareToCircle> */}
      <ScrollView scroll-y>
        <view className='PageContent'>

          {/* 定位 */}
          <view className='Location'>
            <Location></Location>
          </view>

          {/* banner */}
          <view className='Banner'>
            <view>
              <view>
                <Banner List={BannerList}></Banner>
              </view>
            </view>
          </view>

          {/* 菜单 */}
          <view className='Menu'>
            <Menu></Menu>
          </view>

          {/* 热门推荐 */}
          <view className='HotRecommend' style={{display: ShowHotRecommend ? 'block' : 'none'}}>
            <ColumnTitle Name='热门推荐' Icon='icon-shoucang'></ColumnTitle>
            <HotRecommend change={HotRecommendChange}></HotRecommend>
          </view>

          {/* 直播购房 */}
          <view className='LiveSale' style={{display: ShowLive ? 'block' : 'none'}}>
            <ColumnTitle Name='直播购房' Icon='icon-yinpin' ShowMore ToMore={() => { Taro.switchTab({ url: `/pages/video/index` }) }}></ColumnTitle>
            <LiveSale change={LiveChange}></LiveSale>
          </view>

          {/* 全部项目 */}
          <view className='AllProject'>
            <ColumnTitle Name='全部项目' Icon='icon-aixin' ShowMore ToMore={() => { Taro.navigateTo({ url: `/pages/index/buildingList/index` }) }}></ColumnTitle>
            <view className='ProjectList'>
              {
                ProjectList.map((item, index) => (
                  <ProjectListItem Data={item} key={`ProjectListItem-${index}`}></ProjectListItem>
                ))
              }
            </view>
          </view>

          {/* bottom */}
          <view className='PageBottom'>
            <text>已经到底了~</text>
          </view>

        </view>
      </ScrollView>

    </view>
  )
})