import React, { useState, useEffect } from 'react'
import { useRouter } from '@tarojs/taro'
import HouseManage from '@/components/Landlord/HouseManage/houseManage'
import Income from '@/components/Landlord/Income/income'
import TabBar from '@/components/CustTabBar'
import incomeImg from '@/assets/icons/landlord/我的收入.png'
import onincomeImg from '@/assets/icons/landlord/我的收入按下.png'
import houseImg from '@/assets/icons/landlord/房源管理.png'
import onhouseImg from '@/assets/icons/landlord/房源管理按下.png'
import './landlord.less'
import withLayout from '@/layouts'


export default withLayout((props) => {
  const { router, person } = props
  const { params } = useRouter()
  const { tab } = params || {}

  const [currentTab, setCurrentTab] = useState(0)

  const handleTabChange = (e) => {
    const { index } = e.detail
    setCurrentTab(index)
  }

  useEffect(() => {
    if (tab) {
      setCurrentTab(tab - 0)
    }
  }, [tab])

  return (
    <view className='page-index'>
      <view className='index-container'>
        {currentTab === 0 && <Income />}
        {currentTab === 1 && <HouseManage />}
      </view>
      <view className='index-tabbar'>
        <TabBar extClass='custom-tabbar bottomTab' current={currentTab} onChange={handleTabChange}>
          <view className={`${currentTab === 0 ? 'incomeTab' : ''}`}>
            <image className='incomes' src={currentTab === 0 ? onincomeImg : incomeImg} /><text>我的收入</text>
          </view>
          <view className={`${currentTab === 1 ? 'houseTab' : ''}`}>
            <image className='house' src={currentTab === 1 ? onhouseImg : houseImg} /><text>房源管理</text>
          </view>
        </TabBar>
      </view>
    </view>

  )

})
