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 withLayout from '@/layouts'
import { getHotelManage, getAccountLogList, getNowHotelManage } from '@/services/landlord'
import CustomNav from '@/components/CustomNav'

import './landlord.less'

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

  const [hotelList, setHotelList] = useState([])
  const [hotel, setHotel] = useState()
  const [account, setAccount] = useState()
  const [accountlog, setAccountLog] = useState([])

  useEffect(() => {
    getHotelManage().then((res) => {
      const { hotelList: list, account: acc, hotel: current } = res
      setHotelList(list)
      setHotel(current)
      setAccount(acc)
      getAccountLogList(acc.accountId).then((res2) => {
        setAccountLog(res2.records || [])
      })
    })
  }, [])

  const handleHotelChange = (current) => {
    setHotel(current)
    getNowHotelManage(current.hotelId).then((res) => {
      const {account: acc } = res
      setAccount(acc)
      getAccountLogList(acc.accountId).then((res2) => {
        setAccountLog(res2.records || [])
      })
    })
  }

  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'>
      <CustomNav title={hotel?.hotelName} logo={hotel?.logo} />
      <view className='index-container'>
        {currentTab === 0 && <Income hotelList={hotelList} hotel={hotel} account={account} onHotelChange={handleHotelChange} accountlog={accountlog} />}
        {currentTab === 1 && <HouseManage hotel={hotel} />}
      </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>

  )

})
