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

export default defineComponent({
  name: 'coupon-container',
  data() {
    return {
      couponCount: {
        total: 0,
        useState: 'USABLE'
      } as any,
      height: 'auto'
    }
  },
  async mounted() {
    try {
      // 判断是哪个端
      const url =
        state.platformType === 'STUDENT' ? '/api-student' : '/api-teacher'
      const res = await request.get(`${url}/couponInfo/statInfo`)
      const result = res.data || []
      this.couponCount = result.find(result => result.useState === 'USABLE')
      console.log(result.find(result => result.useState === 'USABLE'))
    } catch {
      // TODO: handle
    }
    useEventTracking('优惠券')
  },
  render() {
    return (
      <div class={styles.coupons}>
        <TheSticky
          position="top"
          onBarHeight={(height: any) => {
            this.height = height
          }}
        >
          <ColHeader isFixed={false} />
        </TheSticky>
        <Tabs color="#2DC7AA" lineWidth={44} sticky offsetTop={this.height}>
          <Tab
            title={`可使用${
              this.couponCount.total > 0
                ? '(' + this.couponCount.total + '张)'
                : ''
            }`}
          >
            <List />
          </Tab>
          <Tab title="已使用">
            <List useState="USED" />
          </Tab>
          <Tab title="已失效">
            <List useState="EXPIRED" />
          </Tab>
        </Tabs>
      </div>
    )
  }
})
