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'

export default defineComponent({
  name: 'tradeRecord',
  data() {
    return {
      active: 'buy',
      height: 44
    }
  },
  mounted() {
    this.$nextTick(() => {
      const { height } = useRect((this as any).$refs.tabs)
      // console.log(height, (this as any).$refs.tabs)
      this.height = height
    })
  },
  render() {
    return (
      <div class={styles.tradeRecord}>
        <Tabs
          v-model:active={this.active}
          color="var(--van-primary)"
          sticky
          lineWidth={28}
        >
          <Tab
            name="buy"
            v-slots={{
              title: () => (
                <div class={styles.tab} ref="tabs">
                  购买记录
                </div>
              )
            }}
          >
            <List height={this.height} />
          </Tab>
          <Tab name="refund" title="退费记录">
            <List height={this.height} type="refund" />
          </Tab>
        </Tabs>
      </div>
    )
  }
})
