import OHeader from '@/components/o-header'
import OSticky from '@/components/o-sticky'
import { Tabs, Tab } from 'vant'
import { defineComponent, reactive, ref } from 'vue'
import { useRouter } from 'vue-router'
// import linkBg from './images/ranking-bg.png'
import TimerBang from './components/timer-bang'
import DayBang from './components/day-bang'
import styles from './index.module.less'
const activeName = ref('day')
const timers = ref('')
export default defineComponent({
  name: 'ranking-list',
  setup() {
    const router = useRouter()
    const state = reactive({ heightV: 0 })

    const setTime = (val: string) => {
      timers.value = val
    }
    const getHeight = (dataHeight: number) => {
      state.heightV = dataHeight
      console.log(state.heightV, '获取高度')
    }
    return () => (
      <>
        <OSticky position="top" background="#F8F8F8" onGetHeight={getHeight}>
          <div class={styles.topWrap}>
            <OHeader
              color={'#ffffff'}
              backIconColor="white"
              background={'transparent'}
              border={false}
            ></OHeader>
            <span class={styles.topTime}>{timers.value}</span>
          </div>
          <Tabs
            v-model:active={activeName.value}
            class={styles.rankTabs}
            background={'rgba(0,0,0,.35)'}
            title-active-color={'#fff'}
            title-inactive-color={'#fff'}
            color={'#fff'}
          >
            <Tab name="day" title="天数榜"></Tab>
            <Tab name="timer" title="时长榜"></Tab>
          </Tabs>
        </OSticky>
        {activeName.value == 'timer' ? (
          <TimerBang onSetTime={(val: string) => setTime(val)} toHeight={state.heightV}></TimerBang>
        ) : (
          <DayBang onSetTime={(val: string) => setTime(val)} toHeight={state.heightV}></DayBang>
        )}
      </>
    )
  }
})
