import React, { useState, useEffect } from 'react'
import CustomNav from '@/components/CustomNav'
import { useRouter } from '@tarojs/taro'
import { getShopList, getShopMoney, getAccount, getVerifiedOrder, setGetVerifiedOrder } from '@/services/shopBoss'
import ShopKeeper from '../../components/ShopKeeper/shopKeeper'
import Sparead from '../../components/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 withLayout from '@/layouts'

import './spreadIndex.less'


export default withLayout((props) => {
  const { router, person } = props

  const { params } = useRouter()
  const { tab } = params || {}
  const [currentTab, setCurrentTab] = useState(0)
  const [shopList, setShopList] = useState([])
  console.log("🚀 ~ file: spreadIndex.jsx ~ line 24 ~ withLayout ~ shopList", shopList)
  const [shop, setShop] = useState()
  const shopId = shop?.shopId

  const [amountType, setAmountType] = useState('order')
  const [shopMoney, setShopMoney] = useState([])
  const [verifiedOrder, setVerifiedOrder] = useState([])
  const handleTabChange = (e) => {
    const { index } = e.detail
    setCurrentTab(index)
  }

  const handelType = () => {
    setAmountType('commission')
  }

  useEffect(() => {
    getShopList().then((res) => {
      const { shopList: list, shop: current } = res
      setShopList(list)
      setShop(current)
    })

  }, [])


  //未核销订单列表
  useEffect(() => {
    getVerifiedOrder({
      isVerified: 0,
      pageNum: 1,
      pageSize: 99,
      shopId: shopId,

    }).then((res) => {
      const order = res.records
      setVerifiedOrder(order)
      console.log("🚀 ~ file: spreadIndex.jsx ~ line 49 ~ getVerifiedOrder ~ res", res)

    })

  }, [shopId])

  useEffect(() => {
    if (shopId) {
      getShopMoney(shopId, amountType).then((e) => {
        setShopMoney(e)

      })
    }

  }, [amountType, shopId])


  const handleHotelChange = (current) => {
    console.log('已选择店铺', current);
    // getNowHotelManage(current.shopId).then((res) => {
    //   const { account: acc } = res
    //   setAccount(acc)
    //   setHotel(current)
    //   getAccountLogList(acc.accountId).then((res2) => {
    //     setAccountLog(res2.records || [])
    //   })
    // })
  }

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

  return (
    <view className='page-index'>
      <CustomNav title={shop?.shopName} />

      <view className='index-container'>
        {currentTab === 0 && <ShopKeeper verifiedOrder={verifiedOrder} shopList={shopList} shop={shop} onHotelChange={handleHotelChange} shopMoney={shopMoney} />


        }
        {currentTab === 1 && <Sparead shopList={shopList} shop={shop} onHotelChange={handleHotelChange} shopMoney={shopMoney} />}
      </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' : ''}`} onClick={() => { handelType() }} >
            <image className='house' src={currentTab === 1 ? onSpareadImg : spareadImg} /><text>推广收入</text>
          </view>
        </TabBar>
      </view>
    </view>

  )

})
