import OHeader from '@/components/o-header'
import OSticky from '@/components/o-sticky'
import { Tabs, Tab, Icon, Popup, DatePicker, DatePickerColumnType } from 'vant'
import { defineComponent, reactive, ref, provide } 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'
import dayjs from 'dayjs'
const activeName = ref('student')
const timers = ref('')
export default defineComponent({
  name: 'ranking-list',
  setup() {
    const router = useRouter()
    const state = reactive({
      heightV: 0,
      showPopoverTime: false,
      currentDate: [dayjs().format('YYYY'), dayjs().format('MM')]
    })

    const forms = reactive({
      practiceMonth: state.currentDate[0] + '' + state.currentDate[1],
      timeName: state.currentDate[0] + '年' + state.currentDate[1] + '月'
    })
    provide('parentData', forms)
    const getHeight = (dataHeight: number) => {
      state.heightV = dataHeight
      console.log(state.heightV, '获取高度')
    }
    const columnsType = ref<DatePickerColumnType[]>(['year', 'month'])
    const checkTimer = (val: any) => {
      forms.practiceMonth = val.selectedValues[0] + val.selectedValues[1]
      forms.timeName = val.selectedValues[0] + '年' + val.selectedValues[1] + '月'
      state.showPopoverTime = false
    }
    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} onClick={() => (state.showPopoverTime = true)}>
              {forms.timeName} <Icon name={state.showPopoverTime ? 'arrow-up' : 'arrow-down'} />
            </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 toHeight={state.heightV}></TimerBang>
        ) : (
          <DayBang toHeight={state.heightV}></DayBang>
        )}
        <Popup v-model:show={state.showPopoverTime} position="bottom" style="{ height: '30%' }">
          <DatePicker
            onCancel={() => {
              state.showPopoverTime = false
            }}
            onConfirm={checkTimer}
            v-model={state.currentDate}
            title="选择年月"
            columnsType={columnsType.value}
          />
        </Popup>
      </>
    )
  }
})
