import OHeader from '@/components/o-header'
import OSticky from '@/components/o-sticky'
import { Tabs, Tab, Icon, Popup, DatePicker, DatePickerColumnType, Calendar } from 'vant'
import { defineComponent, reactive, ref, provide } from 'vue'
import { useRoute, 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)

export default defineComponent({
  name: 'ranking-list',
  setup() {
    const router = useRouter()
    const route = useRoute()
    const state = reactive({
      heightV: 0,
      showPopoverTime: false
    })
    const activeName = ref(route.query.type || 'day')

    const forms = reactive({
      practiceMonth: dayjs().day(1).format('YYYYMMDD'),
      endTime: dayjs().day(7).format('YYYY-MM-DD')
    })
    provide('parentData', forms)
    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)}>
              {dayjs(forms.practiceMonth).format('YYYY-MM-DD')}~{forms.endTime}{' '}
              <Icon name={state.showPopoverTime ? 'arrow-up' : 'arrow-down'} />
            </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="time" title="时长榜"></Tab>
          </Tabs>
        </OSticky>
        {activeName.value == 'time' ? (
          <TimerBang toHeight={state.heightV}></TimerBang>
        ) : (
          <DayBang 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(forms.practiceMonth).toDate(), dayjs(forms.endTime).toDate()]}
          style={{
            height: '70%'
          }}
          onSelect={(item: any) => {
            forms.practiceMonth = ''
            forms.endTime = ''
            if (!dayjs(item[0]).isBetween(dayjs(forms.practiceMonth), dayjs(forms.endTime))) {
              // forms.practiceMonth = dayjs(item[0]).day(1).format('YYYYMMDD')
              // forms.endTime = dayjs(item[0]).day(7).format('YYYY-MM-DD')

              const week = dayjs(item[0]).day()
              if (week === 0) {
                // 星期天
                forms.practiceMonth = dayjs(item[0]).subtract(6, 'day').format('YYYYMMDD')
                forms.endTime = dayjs(item[0]).format('YYYY-MM-DD')
              } else if (week === 1) {
                // 星期一
                forms.practiceMonth = dayjs(item[0]).format('YYYYMMDD')
                forms.endTime = dayjs(item[0]).add(6, 'day').format('YYYY-MM-DD')
              } else {
                forms.practiceMonth = dayjs(item[0])
                  .subtract(week - 1, 'day')
                  .format('YYYYMMDD')
                forms.endTime = dayjs(item[0])
                  .add(7 - week, 'day')
                  .format('YYYY-MM-DD')
              }
            }
            state.showPopoverTime = false
          }}
        />
      </>
    )
  }
})
