import { Cell, Sticky, Tab, Tabs } from 'vant'
import { defineComponent } from 'vue'
import styles from './index.module.less'
import List from './list'
import { useRect } from '@vant/use'
import { useEventTracking } from '@/helpers/hooks'
import ColHeader from '@/components/col-header'
import TheSticky from '@/components/the-sticky'

export default defineComponent({
  name: 'tradeRecord',
  data() {
    return {
      active: 'buy',
      height: 44
    }
  },
  mounted() {
    // this.$nextTick(() => {
    //   const { height } = useRect((this as any).$refs.tabs)
    //   this.height = height
    // })
    useEventTracking('交易记录')
  },
  render() {
    return (
      <div class={styles.tradeRecord}>
        <TheSticky
          position="top"
          onBarHeight={(height: any) => {
            this.height = height
          }}
        >
          <ColHeader isFixed={false} />
          <Tabs
            v-model:active={this.active}
            color="var(--van-primary)"
            sticky
            lineWidth={28}
          >
            <Tab name="buy" title="购买记录"></Tab>
            <Tab name="refund" title="退费记录"></Tab>
          </Tabs>
        </TheSticky>

        {this.active === 'buy' && <List height={this.height} />}
        {this.active === 'refund' && (
          <List height={this.height} type="refund" />
        )}
      </div>
    )
  }
})