import OSticky from '@/components/o-sticky'
import { useRect } from '@vant/use'
import { Cell, CellGroup, Image, Tab, Tabs } from 'vant'
import { defineComponent, onMounted, reactive, ref } from 'vue'
import PaidList from './component/paid-list'
import RefundList from './component/refund-list'
import WaitPay from './component/wait-pay'
import styles from './index.module.less'

export default defineComponent({
  name: 'trade-record',
  setup() {
    const tabs = sessionStorage.getItem('tradeRecordTabs')
    const state = reactive({
      tabValue: (tabs || 'wait_pay') as 'wait_pay' | 'paid' | 'refund',
      height: 50
    })
    const tabsRef = ref()

    onMounted(() => {
      const { height } = useRect(tabsRef.value)
      state.height = height
    })
    return () => (
      <div class={styles.tradeRecord}>
        <OSticky position="top">
          <div ref={tabsRef}>
            <Tabs
              lineWidth={20}
              lineHeight={4}
              v-model:active={state.tabValue}
              onChange={(val: any) => {
                sessionStorage.setItem('tradeRecordTabs', val)
              }}
            >
              <Tab title="待完成" name="wait_pay"></Tab>
              <Tab title="已完成" name="paid"></Tab>
              <Tab title="退费" name="refund"></Tab>
            </Tabs>
          </div>
        </OSticky>

        {state.tabValue === 'wait_pay' && <WaitPay height={state.height} />}
        {state.tabValue === 'paid' && <PaidList height={state.height} />}
        {state.tabValue === 'refund' && <RefundList height={state.height} />}
      </div>
    )
  }
})
