import { React, useState, useEffect, } from 'react'
import Taro,{ useRouter } from '@tarojs/taro'
import CustomNav from '@/components/CustomNav'
import Popup from '@/components/Popup'
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  ToggleRoul  from  '@/components/toggleRoul/ToggleRoul'


export default (props) => {

  const [activeTab, setActiveTab] = useState(0)
  const { params } = useRouter()
  const { tabJump } = params || {}
  useEffect(() => {
    if (tabJump) {
      setActiveTab(tabJump - 0)
    }
  }, [tabJump])
  
  const handleTabChange = (e) => {
    const { index } = e.detail
    setActiveTab(index)
  }
  const tabs = [
    {
      title: '未核销订单',
    },
    {
      title: '已核销订单',  
    },   
  ]

  const [showCutover, setShowCutover] = useState(false)
  const ShowMoldeOn = () => {
    setShowCutover(true)
  }
  const onClose = () => {
    setShowCutover(false)
  }
  return (
    <view>
      <view>
        <CustomNav title='十公里' />
      </view>
      <ToggleRoul showCutover={showCutover} onClose={onClose} />
  
      <view style={{ padding: '30rpx', height: '100%' }}>
        <scroll-view scroll-y="true" scroll-view='true' bindscrolltoupper="upper" bindscrolltolower="lower" bindscroll="scroll" style={{ height: 'calc(100vh - 120px)' }}>
          <view className='storexx'>
            <view className='storeName'>店名：<text>Yun咖 云里 咖啡店</text></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>2800000</text>元
                  <image className='micon' src={eyes}></image>
                </view>
              </view>
              <view className='line' />
              <view className='sright'>
                <view className='rword'>当月订单收入（税前）</view>
                <view className='monthMoney'>
                  <text>******</text>元
                  <image className='micon2' src={ceyes}></image>
                </view></view>
            </view>
          </view>
          <view className='search'>
            <input className='searchInput'  />
            <image className='searchicon' src={iconsearch} />
            <view className="searchword">搜索订单(输入客户手机号码)</view>
          </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 className='orderCard'>
                <view style={{ overflow: 'hidden' }}>
                  <view className='orderId'>订单编号：<text>ABC123456789</text></view>
                  <view className='orderTime'>下单日期：<text>2021-06-22 12:35</text></view>
                </view>
                <view className='order'>
                  <image className='orderImg' src={ms} mode='aspectFit' />
                  <view className='orderRight'>
                    <view className='foodName'>【SEOUL.创意韩国料理】火爆全南京，
                      新街口又开新店啦...</view>
                    <view className='price'>合计金额：￥<text style={{ fontSize: '24rpx' }}>88</text>元 <text className='pnum'>数量：<text>1</text>张</text> </view>
                    <view>已下单：等待客户上门就餐</view>
                  </view>
                  <view className='line' />
                  <view className='phone'>客户手机：<text>136****9434</text></view>
                  <view className='tripTime'>客户行程日期：预计在<text>2021-06-21中下午10:30-16:30</text></view>
                </view>
              </view>              
            }
            {activeTab === 1&&
            <>
            <view className='orderCard'>
              <view style={{ overflow: 'hidden' }}>
                <view className='orderId'>订单编号：<text>ABC123456789</text></view>
                <view className='orderTime'>下单日期：<text>2021-06-22 12:35</text></view>
              </view>
              <view className='order'>
                <image className='orderImg' src={ms} mode='aspectFit' />
                <view className='orderRight'>
                  <view className='foodName'>【SEOUL.创意韩国料理】火爆全南京，
                    新街口又开新店啦...</view>
                  <view className='price'>合计金额：￥<text style={{ fontSize: '24rpx' }}>88</text>元 <text className='pnum'>数量：<text>1</text>张</text> </view>
                  <view>已下单：等待客户上门就餐</view>
                </view>
                <view className='line' />
                <view className='phone'>客户手机：<text>136****9434</text></view>
                <view className='tripTime'>客户行程日期：预计在<text>2021-06-21中下午10:30-16:30</text></view>
              </view>
            </view>
            <view className='orderCard'>
              <view style={{ overflow: 'hidden' }}>
                <view className='orderId'>订单编号：<text>ABC123456789</text></view>
                <view className='orderTime'>下单日期：<text>2021-06-22 12:35</text></view>
              </view>
              <view className='order'>
                <image className='orderImg' src={ms} mode='aspectFit' />
                <view className='orderRight'>
                  <view className='foodName'>【SEOUL.创意韩国料理】火爆全南京，
                    新街口又开新店啦...</view>
                  <view className='price'>合计金额：￥<text style={{ fontSize: '24rpx' }}>88</text>元 <text className='pnum'>数量：<text>1</text>张</text> </view>
                  <view>已下单：等待客户上门就餐</view>
                </view>
                <view className='line' />
                <view className='phone'>客户手机：<text>136****9434</text></view>
                <view className='tripTime'>客户行程日期：预计在<text>2021-06-21中下午10:30-16:30</text></view>
              </view>
            </view>
          </>
            }
            </view>
          <view className='botton'>已经到底了~</view>
        </scroll-view>        
      </view>      
      </view>
  )
}