import { React, useState, useEffect, } from 'react'
import Taro, { useRouter } from '@tarojs/taro'
import CustomNav from '@/components/CustomNav'
import Picker from '@/components/Picker'
import Popup from '@/components/Popup'
import ShopUsed from '@/components/ShopUsed' //已核销
import ShopUnused from '@/components/ShopUnused' //未核销
import SearchBar from '@/components/SearchBar'
import eyes from '@/assets/icons/shopKeeper/小眼睛.png'
import ceyes from '@/assets/icons/shopKeeper/小眼睛-闭上.png'
import iconsearch from '@/assets/icons/housemantj/search.png'
import ms from '@/assets/icons/housemantj/ms3.jpg'
import cutoverUser from '@/assets/icons/UserCenter/cutoverUser.png'
import touristON from '@/assets/icons/UserCenter/touristON.png'
import touristOFF from '@/assets/icons/UserCenter/touristOFF.png'
import hotelBossON from '@/assets/icons/UserCenter/hotelBossON.png'
import hotelBossOFF from '@/assets/icons/UserCenter/hotelBossOFF.png'
import shopBossON from '@/assets/icons/UserCenter/shopBossON.png'
import shopBossOFF from '@/assets/icons/UserCenter/shopBossOFF.png'
import './shopKeeper.less'
import ToggleRole from '@/components/toggleRole/ToggleRole'


export default (props) => {
  const { shopList, shop, onHotelChange, shopMoney, verifiedOrder } = props
  const [activeTab, setActiveTab] = useState(0)
  const { params } = useRouter()
  const { tabJump } = params || {}

  const [isyear, setYear] = useState(false)
  const [isMomth, setMonth] = useState(false)
  //小眼睛开关
  const handleYear = () => {
    isyear ? setYear(false) : setYear(true)
  }
  const handleMonth = () => {
    isMomth ? setMonth(false) : setMonth(true)
  }


  const handleHotelChange = (shopId, current) => {
    onHotelChange(current)
  }






  const handleChange = (e) => {
    console.log("🚀 ~ file: shopKeeper.jsx ~ line 67 ~ handleChange ~ e", e)


  }


  useEffect(() => {
    if (tabJump) {
      setActiveTab(tabJump - 0)
    }
  }, [tabJump])

  const handleTabChange = (e) => {
    const { index } = e.detail
    setActiveTab(index)
  }
  const tabs = [
    {
      title: '未核销订单',
    },
    {
      title: '已核销订单',
    },
  ]

  const onSearch = (e) => {
    console.log('eeeeeeeeeeeeeeeeee', e.detail.value);
  }

  const [showCutover, setShowCutover] = useState(false)
  const ShowMoldeOn = () => {
    setShowCutover(true)
  }
  const onClose = () => {
    setShowCutover(false)
  }
  return (
    <view>
      <view>
      </view>
      <ToggleRole showCutover={showCutover} onClose={onClose} role='shop' />
      <view style={{ padding: '30rpx', height: '100%' }}>
        <scroll-view scroll-y scroll-view='true' bindscrolltoupper='upper' bindscrolltolower='lower' bindscroll='scroll' style={{ height: 'calc(100vh - 120px)' }}>
          <view className='storexx'>
            <view className='storeName'>店名：<Picker style={{ display: 'inline-block' }} placeholder='请选择商铺' value={shop?.shopId} kv={['shopName', 'shopId']} dicts={shopList} onChange={handleHotelChange} /></view>
            <view onClick={ShowMoldeOn} className='User-info-cutover'>
              <image className='User-info-cutover-image' src={cutoverUser} />
            </view>
            <view className='tip'>（计算收入以核销为准）</view>
            <view className='money'>
              <view className='sleft'>
                <view className='lword'>全年订单收入（税前）</view>

                <view className='yearMoney'>
                  <text>{isyear ? shopMoney?.totalCharges / 100 : '******'}</text>元
                  <image className='micon' src={isyear ? eyes : ceyes} onClick={handleYear} />
                </view>
              </view>
              <view className='line' />
              <view className='sright'>
                <view className='rword'>当月订单收入（税前）</view>
                <view className='monthMoney'>
                  <text>{isMomth ? shopMoney?.currentCharges / 100 : '******'}</text>元
                  <image className='micon2' src={isMomth ? eyes : ceyes} onClick={handleMonth}></image>
                </view></view>
            </view>
          </view>
          <view className='search'>

            <SearchBar placeholder='搜索订单(输入客户手机号码)' onBlur={onSearch} />
          </view>
          <view className='index-tabs'>
            <mp-tabs
              tabClass='tabs-Unselected'
              swiperClass='tabs-swiper'
              activeClass='tabs-Selected'
              tabs={tabs}
              current={activeTab}
              onChange={handleTabChange}
              activeTab={activeTab}
            >
            </mp-tabs>
          </view>
          {
            verifiedOrder.map

          }
          <view>
            {/* 未核销 */}
            {activeTab === 0 &&
              <>
                {
                  verifiedOrder.map((item, index) => {

                    return <ShopUnused key={(index)} item={item} />
                  })
                }
              </>

            }
            {/* 已核销 */}
            {activeTab === 1 &&
              <>
                <ShopUsed />
              </>
            }
          </view>
          <view className='botton'>已经到底了~</view>
        </scroll-view>
      </view>
    </view>
  )
}