import { useEffect, useState } from 'react'
import withLayout from '@/layout'
import Taro from '@tarojs/taro'
import { ScrollView, Image } from '@tarojs/components'
import ProjectItemCard from '@/components/ProjectItemCard/index'
import { queryBrandInfo } from '@/services/common';
import { getImgURL } from '@/utils/image'
import { fetch } from '@/utils/request'
import { API_ITEMS_LIST } from '@/constants/api'
import '@/assets/css/iconfont.css'
import ColumnTitle from '../components/ColumnTitle/index'
import './index.scss'

export default withLayout((props) => {
  const { router, city } = props
  const { id } = router.params
  
  const [PageList, setPageList] = useState([])
  const [IsPull, setPull] = useState(false)
  const [pageNumber, setPageNumber] = useState(1)
  const [HasNextPage, setHasNextPage] = useState(true)
  const [brandInfo, setBrandInfo] = useState({})

  useEffect(() => {
    GetPageList()
  }, [pageNumber])

  const PageRefresh = () => { // 页面下拉刷新回调
    setPull(true)
  }

  const GetPageList = () => {
    setHasNextPage(false)
    fetch({ url: API_ITEMS_LIST, method: 'get', payload: { pageNumber, pageSize: 10, brandId: id, cityId: city.id } }).then((res) => {
      setPageList(pageNumber === 1 ? res.records || [] : PageList.concat(res.records || []))
      setHasNextPage(res.current < res.pages)
      setPull(false)
    })
  }

  const PageLoadMore = () => { // 页面上拉加载更多
    if(HasNextPage) {
      setPageNumber(pageNumber + 1)
    }
  }

  useEffect(() => { // 下拉刷新触发
    if (IsPull) {
      if(pageNumber === 1) {
        GetPageList()
      } else {
        setPageNumber(1)
      }
    }
  }, [IsPull])

  useEffect(() => {
    if (id) {
      queryBrandInfo(id).then((res) => {
        setBrandInfo(res || {})
      })
    }
  }, [id])

  return (
    <view className='brandDetail'>
      <ScrollView scroll-y refresher-enabled refresher-triggered={IsPull} onrefresherrefresh={PageRefresh} onscrolltolower={PageLoadMore} refresher-background='#fff'>
        <view className='Content'>

          {/* 主图 */}
          <view className='Top'>
            <Image mode='scaleToFill' src={getImgURL(brandInfo.brandImg)} className='centerLabel'></Image>
          </view>

          {/* 简介 */}
          <view className='Desc'>
            <view>
              <Image mode='heightFix' src={getImgURL(brandInfo.brandLogo)} className='Logo'></Image>
              <view>
                <text>{brandInfo.brandRemark}</text>
              </view>
            </view>
          </view>

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

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

        </view>
      </ScrollView>
    </view>
  );
});
