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}>
        <Tabs
          lineWidth={20}
          lineHeight={4}
          sticky
          animated
          swipeable
          offsetTop={0}
          v-model:active={state.tabValue}
          onChange={(val: any) => {
            sessionStorage.setItem('tradeRecordTabs', val)
          }}
        >
          <Tab title="待完成" name="wait_pay">
            <WaitPay height={state.height} />
          </Tab>
          <Tab title="已完成" name="paid">
            <PaidList height={state.height} />
          </Tab>
          <Tab title="退费" name="refund">
            <RefundList height={state.height} />
          </Tab>
        </Tabs>
      </div>
    )
  }
})