
import { useState, useEffect, } from 'react'
import { Taro, useRouter } from '@tarojs/taro'
import withLayout from '@/layouts'

import CustomNav from '@/components/CustomNav'
import AlreadyExpired from '@/components/CompoentsOrder/AlreadyExpired'
import AlreadyUsed from '@/components/CompoentsOrder/AlreadyUsed'
import Complete from '@/components/CompoentsOrder/complete'
import TobePaid from '@/components/CompoentsOrder/TobePaid'
import TobeWritten from '@/components/CompoentsOrder/TobeWritten'

import './style.less'



export default withLayout((props) => {
  const [activeTab, setActiveTab] = useState(0)
  const [swiperHeight, setSwiperHeight] = useState(0)
  const { router, person } = props


  const { params } = useRouter()
  const { tabJump } = params || {}


  useEffect(() => {
    if (tabJump) {
      setActiveTab(tabJump - 0)
    }
    console.log('---------------------', tabJump);

  }, [tabJump])



  const tabs = [
    {
      title: '全部',
    },
    {
      title: '待支付',

    },
    {
      title: '待核销',

    },
    {
      title: '已使用',

    },
    {
      title: '已过期',

    },
  ]

  const handleTabChange = (e) => {
    const { index } = e.detail
    setActiveTab(index)
  }

  const abccc = () => [
    Taro.getSystemInfo({
      success: function (res) {
        let clientHeight = res.windowHeight;
        let clientWidth = res.windowWidth;
        let ratio = 750 / clientWidth;
        let Height = ratio * clientHeight;
        setSwiperHeight(`height:${Height}rpx;`)
        console.log('------------->', swiperHeight);


      }

    })
  ]


  return (
    <view className='box-content'>
      <CustomNav title='我的订单' />
      <view className='index-tabs'>
        <mp-tabs
          tabClass='tabs-Unselected'
          swiperClass='tabs-swiper'
          activeClass='tabs-Selected'
          tabUnderlineColor='#000'
          tabInactiveTextColor='#C0C8D3'
          tabs={tabs}
          current={activeTab}
          onChange={handleTabChange}
          activeTab={activeTab}
        >
        </mp-tabs>
      </view>
      {activeTab === 0 && <Complete />}
      {activeTab === 1 && <TobePaid />}
      {activeTab === 2 && <TobeWritten />}
      {activeTab === 3 && <AlreadyUsed />}
      {activeTab === 4 && <AlreadyExpired />}
    </view>
  )
})
