import { defineComponent, reactive } from 'vue'
import styles from './index.module.less'
import { Tab, Tabs } from 'vant'
import ColHeader from '@/components/col-header'
import TheSticky from '@/components/the-sticky'
import List from './list'
import request from '@/helpers/request'

export default defineComponent({
  name: 'HomeStatistics',
  setup() {
    const typeList = reactive({
      VIP_COURSE: 0,
      PRACTICE: 0,
      GROUP: 0,
      LIVE: 0,
      VIDEO: 0,
      MUSIC: 0
    })
    const getSysConfig = async () => {
      try {
        const { data } = await request.get('/api-teacher/sysConfig/list', {
          params: {
            group: 'ACCOUNT_PERIOD'
          }
        })
        const result = data || []
        result.forEach((item: any) => {
          if (item.paramName === 'vip_course_account_period') {
            typeList.VIP_COURSE = Number(item.paramValue || 0)
          } else if (item.paramName === 'practice_account_period') {
            typeList.PRACTICE = Number(item.paramValue || 0)
          } else if (item.paramName === 'group_course_account_period') {
            typeList.GROUP = Number(item.paramValue || 0)
          } else if (item.paramName === 'live_account_period') {
            typeList.LIVE = Number(item.paramValue || 0)
          } else if (item.paramName === 'video_account_period') {
            typeList.VIDEO = Number(item.paramValue || 0)
          } else if (item.paramName === 'music_account_period') {
            typeList.MUSIC = Number(item.paramValue || 0)
          }
        })
      } catch {
        //
      }
    }

    getSysConfig()
    return () => (
      <div class={styles.homeStatistics}>
        <TheSticky position="top">
          <ColHeader border={false} background="transparent" />
        </TheSticky>

        <Tabs class={styles.tabs}>
          <Tab title="VIP定制课" name="VIP_COURSE">
            <List accountPeriod={typeList.VIP_COURSE} type="VIP_COURSE" />
          </Tab>
          <Tab title="趣纠课" name="PRACTICE">
            <List accountPeriod={typeList.PRACTICE} type="PRACTICE" />
          </Tab>
          <Tab title="小组课" name="GROUP">
            <List accountPeriod={typeList.GROUP} type="GROUP" />
          </Tab>
          <Tab title="直播课" name="LIVE">
            <List accountPeriod={typeList.LIVE} type="LIVE" />
          </Tab>
          <Tab title="视频课" name="VIDEO">
            <List accountPeriod={typeList.VIDEO} type="VIDEO" />
          </Tab>
          <Tab title="乐谱" name="MUSIC">
            <List accountPeriod={typeList.MUSIC} type="MUSIC" />
          </Tab>
        </Tabs>
      </div>
    )
  }
})
