import React, { useState, useEffect } from 'react'
import { useRouter } from '@tarojs/taro'
import ShopKeeper from '@/components/spreads/ShopKeeper/shopKeeper'
import Sparead from '@/components/spreads/Sparead/spreadMoney'
import TabBar from '@/components/CustTabBar'
import shopImg from '@/assets/icons/shopKeeper/订单收入.png'
import onShopImg from '@/assets/icons/shopKeeper/订单收入按下.png'
import spareadImg from '@/assets/icons/shopKeeper/推广收入.png'
import onSpareadImg from '@/assets/icons/shopKeeper/推广收入按下.png'
import './spreadIndex.less'

export default (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 && <ShopKeeper />}
        {currentTab === 1 && <Sparead />}
      </view>
      <view className='index-tabbar'>
        <TabBar extClass='custom-tabbar bottomTab' current={currentTab} onChange={handleTabChange}>
          <view className={`${currentTab === 0 ? 'orderstab' : ''}`}>
            <image className='incomes' src={currentTab === 0 ? onShopImg : shopImg} /><text>订单收入</text>
          </view>
          <view className={`${currentTab === 1 ? 'spreadtab' : ''}`}>
            <image className='house' src={currentTab === 1 ? onSpareadImg : spareadImg} /><text>推广收入</text>
          </view>
        </TabBar>
      </view>
    </view>

  )

}