import OEmpty from '@/components/o-empty'
import OFullRefresh from '@/components/o-full-refresh'
import OHeader from '@/components/o-header'
import OSearch from '@/components/o-search'
import OSticky from '@/components/o-sticky'
import { snedStatus } from '@/constant'
import request from '@/helpers/request'
import item from '@/student/coupons/item'
import { Cell, CellGroup, Icon, Swipe, SwipeItem, Tab, Tabs } from 'vant'
import { defineComponent, onMounted, reactive } from 'vue'
import { useRouter } from 'vue-router'
import List from './list'
import styles from './index.module.less'

export default defineComponent({
  name: 'mass-message',
  setup() {
    const router = useRouter()
    const status = sessionStorage.getItem('mass-message-send')
    const state = reactive({
      refreshing: false,
      height: 0, // 页面头部高度，为了处理下拉刷新用的
      tabValue: status || 'WAIT'
    })

    return () => (
      <div class={[styles.massMessage]}>
        <OSticky
          position="top"
          onGetHeight={(height: any) => {
            state.height = height
            document.documentElement.style.setProperty('--header-height', height + 'px')
          }}
        >
          <OHeader border={false}>
            {{
              right: () => (
                <span
                  style="color: var(--van-primary-color)"
                  onClick={() => {
                    router.push('/create-message')
                  }}
                >
                  消息群发
                </span>
              )
            }}
          </OHeader>
        </OSticky>
        <Tabs
          lineWidth={18}
          v-model:active={state.tabValue}
          sticky
          animated
          swipeable
          offsetTop={state.height}
          onChange={(val: string) => {
            sessionStorage.setItem('mass-message-send', val)
          }}
        >
          <Tab title="待发送" name="WAIT">
            {state.tabValue === 'WAIT' && <List status="WAIT" height={state.height} />}
          </Tab>
          <Tab title="已发送" name="SEND">
            {state.tabValue === 'SEND' && <List status="SEND" height={state.height} />}
          </Tab>
        </Tabs>

        {/* <Swipe
          showIndicators={false}
          style={{
            height: 'calc(100vh - var(--header-height))',
            overflowY: 'auto'
          }}
        >
          <SwipeItem>
            <List status="WAIT" height={state.height} />
          </SwipeItem>
          <SwipeItem>
            <List status="SEND" height={state.height} />
          </SwipeItem>
        </Swipe> */}
      </div>
    )
  }
})