import { React, useState, useEffect, useMemo, useRef } from 'react'
import Taro, { useRouter } from '@tarojs/taro'
import { getVerifiedOrder } from '@/services/shopBoss'
import Picker from '@/components/Picker'
import ShopUsed from '@/components/ShopUsed' //已核销
import ShopUnused from '@/components/ShopUnused' //未核销
import SearchBar from '@/components/SearchBar'
import List from '@/components/List';
import NoData from '@/components/NoData'
import eyes from '@/assets/icons/shopKeeper/eyesON.png'
import ceyes from '@/assets/icons/shopKeeper/eyesOFF.png'
import ToggleRole from '@/components/toggleRole/ToggleRole'
import cutoverUser from '@/assets/icons/UserCenter/cutoverUser.png'
import './shopKeeper.less'


export default (props) => {
  const { shopList, shop, onHotelChange, verifiedOrder, shopMoney, onVarified } = props
  const { params } = useRouter()
  const { tabJump } = params || {}

  const [activeTab, setActiveTab] = useState(0)
  const [phonea, setPhone] = useState()
  const [isVerifieda, setisVerified] = useState(0)
  const queryParams = useMemo(() => ({
    shopId: shop?.shopId,
    isVerified: isVerifieda,
    phone: phonea || '',
  }), [phonea, shop?.shopId, isVerifieda])


  // 获取资源表信息
  const [alllist, setAllList] = useState([])

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

  const listRef = useRef()

  const handelSearch = (e) => {
    const val = e.detail.value
    setPhone(val)
  }
  useEffect(() => {
    if (tabJump) {
      setActiveTab(tabJump - 0)
    }
  }, [tabJump])



  const handleTabChange = (e) => {
    const { index } = e.detail
    setActiveTab(index)
    setisVerified(index)
    //如果context有的话代表他滚动了   那么切换tab页就置顶
    if (listRef.current?.context) {
      listRef.current.context.scrollTo({ top: 0 })
    }
  }
  const tabs = [
    {
      title: '未核销订单',
    },
    {
      title: '已核销订单',
    },
  ]

  //给父组件传val
  const handleVarified = () => {
    onVarified()
  }

  const [showCutover, setShowCutover] = useState(false)
  const ShowMoldeOn = () => {
    setShowCutover(true)
  }
  const onClose = () => {
    setShowCutover(false)
  }
  return (
    <view>
      <view>
      </view>
      <ToggleRole showCutover={showCutover} maskClosable={showCutover} onClose={onClose} role='shop' />
      <view style={{ padding: '0 15px 0 15px', height: '100%' }}>
        <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).toFixed(2) : '******'}</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).toFixed(2) : '******'}</text>元
                <image className='micon2' src={isMomth ? eyes : ceyes} onClick={handleMonth}></image>
              </view></view>
          </view>
        </view>
        <view className='search'>
          <SearchBar placeholder='搜索订单(输入客户手机号码)' onBlur={handelSearch} />
        </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>
        <view  >
          {/* 未核销 */}
          {activeTab === 0 &&
            <view style={{ height: '45vh' }}>
              <List
                style={{ height: '100%' }}
                request={getVerifiedOrder}
                params={queryParams}
                onDataChange={setAllList}
                noData={<NoData />}
                render={({ item, index }) =>
                  <ShopUnused key={(index)} item={item} />}
              >
              </List>
            </view>

          }
          {/* 已核销 */}
          {activeTab === 1 &&
            <view style={{ height: '45vh' }}>
              <List
                style={{ height: '100%' }}
                noData={<NoData />}
                request={getVerifiedOrder}
                params={queryParams}
                onDataChange={setAllList}
                render={({ item, index }) => <ShopUsed verifiedOrder={verifiedOrder} key={(index)} item={item} />}
              >
              </List>
            </view>

          }
        </view>
      </view>
    </view>
  )
}