import React, { useState, useEffect } from 'react'
import { useModel } from '@/store'
import WuYeFuWuItem from '@/components/WuYeFuWuItem/index'
import ScrollPageRefresh from '@/components/ScrollPageRefresh/index'
import request, { apis } from '@/utils/request'
import '@/assets/css/reset.less'
import '@/assets/css/iconfont.less'
import './index.less'

export default function WuYeFuWu () {

  const { user } = useModel('user')
  const [PageList, setPageList] = useState([])
  const [BannerList, setBannerList] = useState([])

  useEffect(() => {
    GetBanner()
  }, [])

  const GetBanner = (done = () => { }) => { // 获取轮播图
    request({ ...apis.getBanner, params: { contentType: `news`, pageNum: 1, pageSize: 1 } }).then((res) => {
      setBannerList([...(res || [])])
      done()
    }).catch(() => {
      done()
    })
  }

  const Refresh = (e) => { // 下拉刷新
    setPageList(e)
  }

  const Push = (e) => { // 上拉加载
    setPageList(PageList.concat(e))
  }

  return (
    <view className='WuYeFuWu'>
      <ScrollPageRefresh ApiName={`getWuYeFuWuList`} Refresh={Refresh} Push={Push}>
        {/* 大图 */}
        <view className='BigImg'>
          {
            BannerList.length > 0 &&
            <image mode='aspectFill' src={BannerList[0].image} className='centerLabel' onClick={() => { Taro.navigateTo({ url: `/pages/HuoDong/ZiXunDetail/index?id=${BannerList[0].targetId}` }) }}></image>
          }
        </view>

        {/* 物业办事指南 */}
        <view className='BanShiZhiNan'>
          <text>物业办事指南</text>
          <view className='flex-h'>
            <view className='Line'><view></view></view>
            <view className='flex-item'>
              <text>1、业主收楼手续办理</text>
              <text>2、物业转名手续办理</text>
              <text>3、业主卡、住户卡办理</text>
            </view>
          </view>
        </view>

        {/* 服务列表 */}
        <view className='List'>
          {
            PageList.map((item, index) => (
              <view key={`WuYeFuWuItem-${index}`}>
                <WuYeFuWuItem Data={item}></WuYeFuWuItem>
              </view>
            ))
          }
        </view>
      </ScrollPageRefresh>
    </view>
  )
}