import React, { useState } from 'react'
import TabPageCutNav from '@/components/TabPageCutNav/index'
import NavHeader from '@/components/NavHeader/index'
import WuYeGongGao from '@/components/WuYeGongGao/index'
import WuYeFuWu from '@/components/WuYeFuWu/index'
import WuYeBaoXiu from '@/components/WuYeBaoXiu/index'
import WuYeJiaoFei from '@/components/WuYeJiaoFei/index'
import '@/assets/css/reset.less'
import '@/assets/css/iconfont.less'
import './index.less'

export default function WuYe (props) {

  const [NavList] = useState([{ name: '公告', id: 1 }, { name: '服务', id: 2 }, { name: '报修', id: 3 }, { name: '缴费', id: 4 }])
  const [CurrentNavId, setCurrentNavId] = useState(1)
  const [IsPull, setIsPull] = useState(false)

  const NavChange = (e) => {
    return () => {
      setCurrentNavId(e.id)
    }
  }

  const OnRefresh = () => {
    setIsPull(true)
    window.setTimeout(() => {
      setIsPull(false)
    }, 1000)
  }

  return (
    <view className='WuYe flex-v'>
      <NavHeader Title='物业' BgColor='none' IsFixed={true}></NavHeader>
      <TabPageCutNav List={NavList} CurrentNavId={CurrentNavId} NavChange={NavChange}></TabPageCutNav>
      <view className='flex-item'>
        <view>
          {/* 公告 */}
          {
            CurrentNavId - 0 === 1 &&
            <view className='Content GongGao'>
              <WuYeGongGao></WuYeGongGao>
            </view>
          }

          {/* 服务 */}
          {
            CurrentNavId - 0 === 2 &&
            <view className='Content FuWu'>
              <WuYeFuWu></WuYeFuWu>
            </view>
          }

          {/* 报修 */}
          {
            CurrentNavId - 0 === 3 &&
            <view className='Content BaoXiu'>
              <WuYeBaoXiu></WuYeBaoXiu>
            </view>
          }

          {/* 缴费 */}
          {
            CurrentNavId - 0 === 4 &&
            <view className='Content JiaoFei'>
              <WuYeJiaoFei></WuYeJiaoFei>
            </view>
          }
        </view>
      </view>
    </view>
  )
}
