import OHeader from '@/components/o-header'
import OSticky from '@/components/o-sticky'
import request from '@/helpers/request'
import { Button, Tab, Tabs } from 'vant'
import { defineComponent, onMounted, reactive } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import styles from './orchestra-information.module.less'
import OrchestraInformationList from './orchestra-information-list'

export default defineComponent({
  name: 'orchestra-information',
  setup() {
    const tabName = sessionStorage.getItem('orchestra-information-tab')
    const router = useRouter()
    const state = reactive({
      activeName: tabName || 'publish',
      listState: {
        height: 0 // 页面头部高度，为了处理下拉刷新用的
      },
      offlineCount: 0,
      publishedCount: 0
    })
    const getStat = async () => {
      try {
        const { data } = await request.get('/api-school/sysNewsInformation/stat')
        state.publishedCount = data?.publishedCount || 0
        state.offlineCount = data?.offlineCount || 0
      } catch {
        //
      }
    }
    onMounted(async () => {
      // getStat()
    })
    return () => (
      <div class={[styles.information]}>
        <OSticky
          position="top"
          onGetHeight={(height: any) => {
            state.listState.height = height
            document.documentElement.style.setProperty('--header-height', height + 'px')
          }}
        >
          <OHeader border={false} />

          <Tabs
            sticky
            lineWidth={20}
            lineHeight={4}
            v-model:active={state.activeName}
            onChange={(val: string) => {
              sessionStorage.setItem('orchestra-information-tab', val)
            }}
          >
            <Tab title={`已发布(${state.publishedCount})`} name="publish"></Tab>
            <Tab title={`已下架(${state.offlineCount})`} name="offline"></Tab>
          </Tabs>
        </OSticky>

        {state.activeName === 'publish' && (
          <OrchestraInformationList
            key="publish"
            headHeight={state.listState.height}
            type="1"
            onChangeList={getStat}
          />
        )}
        {state.activeName === 'offline' && (
          <OrchestraInformationList
            key="offline"
            headHeight={state.listState.height}
            type="0"
            onChangeList={getStat}
          />
        )}
      </div>
    )
  }
})
