import OHeader from '@/components/o-header'
import OSticky from '@/components/o-sticky'
import request from '@/helpers/request'
import { Tab, Tabs } from 'vant'
import { defineComponent, reactive } from 'vue'
import List from './components/list'
import styles from './index.module.less'

export default defineComponent({
  name: 'train-report',
  setup() {
    const state = reactive({
      loading: true,
      orchestraList: [] as any,
      height: 'auto'
    })
    // 获取乐团列表
    const getOrchestras = async () => {
      try {
        state.loading = true
        const { data } = await request.post('/api-school/orchestra/page', {
          data: {
            page: 1,
            rows: 100,
            status: 'DONE'
          }
        })
        const temps = data.rows || []
        const s = [] as any
        temps.forEach((item: any) => {
          s.push({
            text: item.name,
            value: item.id
          })
        })
        s.unshift({
          text: '全部乐团',
          value: ''
        })
        state.orchestraList = [...s]

        state.loading = false
      } catch {
        //
        state.loading = false
      }
    }

    getOrchestras()
    return () => (
      <div class={styles.train}>
        <OSticky
          position="top"
          onGetHeight={(height: any) => {
            document.documentElement.style.setProperty('--header-height', height + 'px')
            state.height = height
          }}
        >
          <OHeader />
        </OSticky>
        {!state.loading && (
          <Tabs sticky lineWidth={20} lineHeight={4} offsetTop={state.height} swipeable animated>
            <Tab title="周报" name="WEEKLY">
              <List type="WEEKLY" orchestraList={state.orchestraList} />
            </Tab>
            <Tab title="月报" name="MONTHLY">
              <List type="MONTHLY" orchestraList={state.orchestraList} />
            </Tab>
          </Tabs>
        )}
      </div>
    )
  }
})