import OHeader from '@/components/o-header'
import OSticky from '@/components/o-sticky'
import { Tabs, Tab, Calendar, Icon } 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'
import dayjs from 'dayjs'
import isBetween from 'dayjs/plugin/isBetween'
dayjs.extend(isBetween)
const activeName = ref('day')
const timers = ref('')
export default defineComponent({
  name: 'ranking-list',
  setup() {
    const router = useRouter()
    const state = reactive({
      heightV: 0,
      showPopoverTime: false,
      startTime: dayjs().day(1).format('YYYY-MM-DD'),
      endTime: dayjs().day(7).format('YYYY-MM-DD')
    })

    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} onClick={() => (state.showPopoverTime = true)}>
              {state.startTime}~{state.endTime}
              {/* <i></i> */}
              <Icon
                name={state.showPopoverTime ? 'arrow-up' : 'arrow-down'}
                class={styles.imgIcon}
              />
            </span>
          </div>
          <Tabs
            v-model:active={activeName.value}
            class={styles.rankTabs}
            background={'rgba(224, 69, 21,.71)'}
            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
            startTime={state.startTime}
            endTime={state.endTime}
            toHeight={state.heightV}
          ></TimerBang>
        ) : (
          <DayBang
            startTime={state.startTime}
            endTime={state.endTime}
            toHeight={state.heightV}
          ></DayBang>
        )}

        <Calendar
          v-model:show={state.showPopoverTime}
          firstDayOfWeek={1}
          showConfirm={false}
          type="range"
          maxRange={7}
          minDate={new Date('2023-02-27')}
          defaultDate={[dayjs(state.startTime).toDate(), dayjs(state.endTime).toDate()]}
          style={{
            height: '70%'
          }}
          onSelect={(item: any) => {
            state.startTime = ''
            state.endTime = ''
            if (!dayjs(item[0]).isBetween(dayjs(state.startTime), dayjs(state.endTime))) {
              state.startTime = dayjs(item[0]).day(1).format('YYYY-MM-DD')
              state.endTime = dayjs(item[0]).day(7).format('YYYY-MM-DD')
            }
            state.showPopoverTime = false
          }}
        />
      </>
    )
  }
})